Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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,
}
@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;
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,
},
import { Priority } from "./index"
export type ButtonTheme = {
[key in Priority]: {
backgroundColor?: string
color?: string
hoverBackgroundColor?: string
borderColor?: string
}
}
export const lightTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.ctaPrimary,
backgroundColor: palette.background.ctaPrimary,
hoverBackgroundColor: palette.background.ctaPrimaryHover,
},
secondary: {
color: palette.text.ctaSecondary,
backgroundColor: palette.background.ctaSecondary,
hoverBackgroundColor: palette.background.ctaSecondaryHover,
},
tertiary: {
color: palette.text.ctaSecondary,
backgroundColor: palette.background.primary,
},
},
}
export const darkTheme: { button: ButtonTheme } = {
button: {
} 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,
}
backgroundColor: palette.background.brandYellow.primary,
},
},
}
export const rrBlueTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.readerRevenue.ctaPrimary,
backgroundColor: palette.background.readerRevenue.ctaPrimary,
hoverBackgroundColor:
palette.background.readerRevenue.ctaPrimaryHover,
},
secondary: {
color: palette.text.readerRevenue.ctaSecondary,
backgroundColor: palette.background.readerRevenue.ctaSecondary,
hoverBackgroundColor:
palette.background.readerRevenue.ctaSecondaryHover,
borderColor: palette.border.readerRevenue.ctaSecondary,
},
tertiary: {},
},
}
export const rrYellowTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.readerRevenueYellow.ctaPrimary,
backgroundColor: palette.background.readerRevenueYellow.ctaPrimary,
hoverBackgroundColor:
palette.background.readerRevenueYellow.ctaPrimaryHover,
},