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;
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,
} = {
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,
}
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,
},
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);
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.*