1. Advisor
  2. @guardian/src-foundations
  3. @guardian/src-foundations code examples
View all @guardian/src-foundations analysis

How to use @guardian/src-foundations - 10 common examples

To help you get started, we’ve selected a few @guardian/src-foundations examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github guardian / source-components / packages / radio / themes.ts View on Github external
color: string
	checkedColor: string
	textColor: string
	supportingTextColor: string
	errorColor: string
}

export const lightTheme: {
	radio: RadioTheme
	inlineError: InlineErrorTheme
} = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},
	...inlineErrorBlueTheme,
github guardian / source-components / packages / checkbox / styles.ts View on Github external
}
	}
`

export const labelText = css`
	${textSans.medium()};
	color: ${palette.text.primary};
`

export const labelTextWithSupportingText = css`
	${textSans.medium()};
`

export const supportingText = css`
	${textSans.small()};
	color: ${palette.text.secondary};
`

export const tick = css`
	@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
		left: 9px;
		width: 6px;
		height: 12px;
		transform: rotate(45deg);
		z-index: 5;

		/* the checkmark ✓ */
		&:after,
		&:before {
github guardian / source-components / packages / checkbox / styles.ts View on Github external
}

		&:checked {
			& ~ span:before {
				right: 0;
			}
			& ~ span:after {
				top: 0;
			}
		}
	}
`

export const labelText = css`
	${textSans.medium()};
	color: ${palette.text.primary};
`

export const labelTextWithSupportingText = css`
	${textSans.medium()};
`

export const supportingText = css`
	${textSans.small()};
	color: ${palette.text.secondary};
`

export const tick = css`
	@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
github guardian / source-components / packages / radio / themes.ts View on Github external
export type RadioTheme = {
	hoverBorderColor: string
	color: string
	checkedColor: string
	textColor: string
	supportingTextColor: string
	errorColor: string
}

export const lightTheme: {
	radio: RadioTheme
	inlineError: InlineErrorTheme
} = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
github guardian / source-components / packages / radio / themes.ts View on Github external
} = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},
	...inlineErrorBlueTheme,
}
github guardian / source-components / packages / radio / themes.ts View on Github external
radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},
	...inlineErrorBlueTheme,
}
github guardian / source-components / packages / checkbox / styles.ts View on Github external
@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
		left: 9px;
		width: 6px;
		height: 12px;
		transform: rotate(45deg);
		z-index: 5;

		/* the checkmark ✓ */
		&:after,
		&:before {
			position: absolute;
			display: block;
			background-color: ${palette.background.checkboxChecked};
			transition: all ${transitions.short} ease-in-out;
			content: "";
		}

		/* the short side */
		&:before {
			height: 2px;
			bottom: 0;
			left: 0;
			right: 100%;
			transition-delay: 0.05s;
		}

		/* the long side */
		&:after {
			bottom: 0;
github guardian / source-components / packages / radio / themes.ts View on Github external
hoverBorderColor: string
	color: string
	checkedColor: string
	textColor: string
	supportingTextColor: string
	errorColor: string
}

export const lightTheme: {
	radio: RadioTheme
	inlineError: InlineErrorTheme
} = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.primary,
		supportingTextColor: palette.text.secondary,
		errorColor: palette.border.error,
	},
	...inlineErrorLightTheme,
}

export const blueTheme: { radio: RadioTheme; inlineError: InlineErrorTheme } = {
	radio: {
		color: palette.border.radio, // consider renaming to border
		hoverBorderColor: palette.border.radioHover,
		checkedColor: palette.background.brand.radioChecked, // consider renaming to backgroundChecked
		textColor: palette.text.brand.primary,
		supportingTextColor: palette.text.brand.secondary,
		errorColor: palette.border.brand.error,
	},
github guardian / source-components / packages / checkbox / styles.ts View on Github external
right: 0;
			}
			& ~ span:after {
				top: 0;
			}
		}
	}
`

export const labelText = css`
	${textSans.medium()};
	color: ${palette.text.primary};
`

export const labelTextWithSupportingText = css`
	${textSans.medium()};
`

export const supportingText = css`
	${textSans.small()};
	color: ${palette.text.secondary};
`

export const tick = css`
	@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
		left: 9px;
		width: 6px;
		height: 12px;
		transform: rotate(45deg);
github guardian / source-components / packages / utilities / media-queries.ts View on Github external
const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`

const maxWidth = (until: number): string =>
	`@media (max-width: ${`${until - 1}px`})`

const minWidthMaxWidth = (from: number, until: number): string =>
	`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`

// e.g. from.*
const from: BreakpointMap = {
	mobileMedium: minWidth(breakpoints.mobileMedium),
	mobileLandscape: minWidth(breakpoints.mobileLandscape),
	phablet: minWidth(breakpoints.phablet),
	tablet: minWidth(breakpoints.tablet),
	desktop: minWidth(breakpoints.desktop),
	leftCol: minWidth(breakpoints.leftCol),
	wide: minWidth(breakpoints.wide),
}

// e.g. until.*
const until: BreakpointMap = {
	mobileMedium: maxWidth(breakpoints.mobileMedium),
	mobileLandscape: maxWidth(breakpoints.mobileLandscape),
	phablet: maxWidth(breakpoints.phablet),
	tablet: maxWidth(breakpoints.tablet),
	desktop: maxWidth(breakpoints.desktop),
	leftCol: maxWidth(breakpoints.leftCol),
	wide: maxWidth(breakpoints.wide),
}

// e.g. between.*.and.*

@guardian/src-foundations

The Guardian's foundations are the atoms from which all our visual design is built. They are intended for use with a CSS-in-JS library such as Emotion.

GitHub
Apache-2.0
Latest version published 3 years ago

Package Health Score

51 / 100
Full package analysis

Popular @guardian/src-foundations functions

Similar packages