Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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,
}
}
`
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 {
}
&: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;
tertiary: {
color: palette.text.ctaSecondary,
backgroundColor: palette.background.primary,
},
},
}
export const darkTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.mono.ctaPrimary,
backgroundColor: palette.background.mono.ctaPrimary,
hoverBackgroundColor: palette.background.mono.ctaPrimaryHover,
},
secondary: {
color: palette.text.mono.ctaSecondary,
backgroundColor: palette.background.mono.ctaSecondary,
hoverBackgroundColor: palette.background.mono.ctaSecondaryHover,
},
tertiary: {
color: palette.text.mono.ctaSecondary,
backgroundColor: palette.background.mono.primary,
},
},
}
export const blueTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.brand.ctaPrimary,
backgroundColor: palette.background.brand.ctaPrimary,
hoverBackgroundColor: palette.background.brand.ctaPrimaryHover,
InlineErrorTheme,
} from "@guardian/src-inline-error"
export type TextInputTheme = {
inputColor: string
textColor: string
backgroundColor: string
}
export const lightTheme: {
textInput: TextInputTheme
inlineError: InlineErrorTheme
} = {
textInput: {
inputColor: palette.text.primary,
textColor: palette.text.primary,
backgroundColor: palette.background.primary,
},
...inlineErrorLightTheme,
}
lightTheme as inlineErrorLightTheme,
InlineErrorTheme,
} from "@guardian/src-inline-error"
export type TextInputTheme = {
inputColor: string
textColor: string
backgroundColor: string
}
export const lightTheme: {
textInput: TextInputTheme
inlineError: InlineErrorTheme
} = {
textInput: {
inputColor: palette.text.primary,
textColor: palette.text.primary,
backgroundColor: palette.background.primary,
},
...inlineErrorLightTheme,
}
`
export const errorInput = css`
border: 4px solid ${palette.border.error};
color: ${palette.error.main};
`
export const optionalLabel = css`
${textSans.small()};
color: ${palette.text.secondary};
font-style: italic;
`
export const supportingText = css`
${textSans.small()};
color: ${palette.text.secondary};
margin-bottom: ${space[1]}px;
`
import { palette } from "@guardian/src-foundations"
export type InlineErrorTheme = {
color: string
}
export const lightTheme: { inlineError: InlineErrorTheme } = {
inlineError: {
color: palette.text.error,
},
}
export const blueTheme: { inlineError: InlineErrorTheme } = {
inlineError: {
color: palette.text.brand.error,
},
}
import { palette } from "@guardian/src-foundations"
export type InlineErrorTheme = {
color: string
}
export const lightTheme: { inlineError: InlineErrorTheme } = {
inlineError: {
color: palette.text.error,
},
}
export const blueTheme: { inlineError: InlineErrorTheme } = {
inlineError: {
color: palette.text.brand.error,
},
}
export const text = ({
textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
${textSans.medium()};
color: ${textInput.textLabel};
margin-bottom: ${space[1]}px;
`
export const errorInput = css`
border: 4px solid ${palette.border.error};
color: ${palette.error.main};
`
export const optionalLabel = css`
${textSans.small()};
color: ${palette.text.secondary};
font-style: italic;
`
export const supportingText = css`
${textSans.small()};
color: ${palette.text.secondary};
margin-bottom: ${space[1]}px;
`