Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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,
}
export const textInput = ({
textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
height: ${size.large}px;
${textSans.medium()};
color: ${textInput.textInput};
background-color: ${textInput.backgroundInput};
border: 2px solid ${palette.border.textInput};
padding: 0 ${space[2]}px;
&:focus {
${focusHalo};
}
`
box-sizing: border-box;
display: inline-block;
cursor: pointer;
width: ${size.small}px;
height: ${size.small}px;
margin: 0 ${space[1]}px 0 0;
border: 2px solid currentColor;
position: relative;
transition: box-shadow ${transitions.short};
transition-delay: 0.08s;
color: ${palette.border.checkbox};
&:checked {
border: 2px solid ${palette.border.checkboxChecked};
& ~ span:before {
right: 0;
}
& ~ span:after {
top: 0;
}
}
&:focus {
${focusHalo};
}
/*
Take care: Emotion extracts @supports blocks and moves them below
all other <style> elements, making these values hard to override.</style>
const gridItem = ({
breakpoints,
spans,
startingPositions,
}: {
breakpoints: GridBreakpoint[]
spans: number[]
startingPositions: number[]
}) => css`
${gridItemSpans({ breakpoints, spans })}
${gridItemStartingPos({ breakpoints, startingPositions })}
`
const borderRightStyle = css`
border-right: 1px solid ${palette.border.secondary};
padding-right: ${GUTTER_WIDTH / 2}px;
margin-right: ${-GUTTER_WIDTH / 2}px;
`
export {
gridRow,
gridRowMobile,
gridRowTablet,
gridRowDesktop,
gridRowWide,
gridItem,
GridBreakpoint,
borderRightStyle,
}
`
export const width4 = css`
width: 4ch;
`
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;
`
display: flex;
justify-content: flex-start;
flex-direction: column;
border: 0;
`
export const label = css`
position: relative;
display: flex;
align-items: center;
cursor: pointer;
min-height: ${size.large}px;
&:hover {
input {
border-color: ${palette.border.checkboxHover};
}
}
`
export const labelWithSupportingText = css`
align-items: flex-start;
margin-bottom: ${space[3]}px;
`
export const checkbox = css`
flex: 0 0 auto;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
width: ${size.small}px;
height: ${size.small}px;
export const rrYellowTheme: { button: ButtonTheme } = {
button: {
primary: {
color: palette.text.readerRevenueYellow.ctaPrimary,
backgroundColor: palette.background.readerRevenueYellow.ctaPrimary,
hoverBackgroundColor:
palette.background.readerRevenueYellow.ctaPrimaryHover,
},
secondary: {
color: palette.text.readerRevenueYellow.ctaSecondary,
backgroundColor:
palette.background.readerRevenueYellow.ctaSecondary,
hoverBackgroundColor:
palette.background.readerRevenueYellow.ctaSecondaryHover,
borderColor: palette.border.readerRevenueYellow.ctaSecondary,
},
tertiary: {},
},
}
}
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,
},
secondary: {
color: palette.text.readerRevenueYellow.ctaSecondary,
backgroundColor: