Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { textSans } from "@guardian/src-foundations/typography"
import { focusHalo } from "@guardian/src-foundations/accessibility"
export const fieldset = css`
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;
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};
}
`
export const tertiary = ({
button,
}: { button: ButtonTheme } = buttonLight) => css`
padding: 0;
background-color: ${button.backgroundTertiary};
color: ${button.textTertiary};
&:hover {
text-decoration: underline;
}
`
export const defaultSize = css`
height: ${size.large}px;
min-height: ${size.large}px;
padding: 0 ${size.large / 2}px;
border-radius: ${size.large / 2}px;
`
export const smallSize = css`
height: ${size.medium}px;
min-height: ${size.medium}px;
padding: 0 ${size.medium / 2}px;
border-radius: ${size.medium / 2}px;
`
export const iconDefault = css`
svg {
flex: 0 0 auto;
display: block;
fill: currentColor;
export const label = ({ radio }: { radio: RadioTheme } = radioLight) => css`
cursor: pointer;
display: flex;
align-items: center;
height: ${size.large}px;
&:hover {
input {
border-color: ${radio.borderHover};
}
}
`
`
export const tertiary = ({
button,
}: { button: ButtonTheme } = buttonLight) => css`
padding: 0;
background-color: ${button.backgroundTertiary};
color: ${button.textTertiary};
&:hover {
text-decoration: underline;
}
`
export const defaultSize = css`
height: ${size.large}px;
min-height: ${size.large}px;
padding: 0 ${size.large / 2}px;
border-radius: ${size.large / 2}px;
`
export const smallSize = css`
height: ${size.medium}px;
min-height: ${size.medium}px;
padding: 0 ${size.medium / 2}px;
border-radius: ${size.medium / 2}px;
`
export const iconDefault = css`
svg {
flex: 0 0 auto;
display: block;