FormGroup
Tokens
SCSS Variable
Value
$bds-color-bg-brand
--color-lila-95$bds-color-bg-button-primary
--color-lila-30$bds-color-bg-button-primary--hover
--color-lila-20$bds-color-bg-button-primary--locked
--color-lila-80$bds-color-bg-button-primary--pressed
--color-lila-54$bds-color-bg-button-secondary
--color-grey-93$bds-color-bg-button-secondary--hover
--color-grey-90$bds-color-bg-button-secondary--locked
--color-grey-95$bds-color-bg-button-secondary--pressed
--color-grey-98$bds-color-bg-button-tertiary
--color-transparent-0$bds-color-bg-button-tertiary--hover
--color-grey-93$bds-color-bg-button-tertiary--locked
--color-transparent-0$bds-color-bg-button-tertiary--pressed
--color-grey-95$bds-color-bg-error
--color-red-95$bds-color-bg-generic
--color-grey-95$bds-color-bg-info
--color-blue-95$bds-color-bg-success
--color-green-95$bds-color-bg-warning
--color-ochre-95$bds-color-icon-brand
--color-lila-30$bds-color-icon-button-primary
--color-grey-98$bds-color-icon-button-primary--locked
--color-grey-98$bds-color-icon-button-secondary
--color-lila-30$bds-color-icon-button-secondary--locked
--color-lila-70$bds-color-icon-button-tertiary-1
--color-lila-30$bds-color-icon-button-tertiary-1--locked
--color-lila-70$bds-color-icon-button-tertiary-2
--color-grey-40$bds-color-icon-button-tertiary-2--locked
--color-grey-70$bds-color-icon-error
--color-red-50$bds-color-icon-generic
--color-grey-40$bds-color-icon-info
--color-blue-45$bds-color-icon-success
--color-green-50$bds-color-icon-warning
--color-ochre-45$bds-color-outline-brand
--color-lila-70$bds-color-outline-button-secondary
--color-grey-90$bds-color-outline-button-secondary--hover
--color-grey-86$bds-color-outline-button-secondary--locked
--color-grey-93$bds-color-outline-button-secondary--pressed
--color-grey-90$bds-color-outline-error
--color-red-70$bds-color-outline---focus
--color-azure-45$bds-color-outline-generic
--color-grey-70$bds-color-outline-info
--color-blue-67$bds-color-outline-success
--color-green-75$bds-color-outline-warning
--color-ochre-70$bds-color-text-accent
--color-lila-30$bds-color-text-brand
--color-lila-30$bds-color-text-button-primary
--color-grey-98$bds-color-text-button-primary--locked
--color-grey-98$bds-color-text-button-secondary
--color-lila-30$bds-color-text-button-secondary--locked
--color-lila-70$bds-color-text-button-tertiary-1
--color-lila-30$bds-color-text-button-tertiary-1--locked
--color-lila-70$bds-color-text-button-tertiary-2
--color-grey-40$bds-color-text-button-tertiary-2--locked
--color-grey-70$bds-color-text-error
--color-red-50$bds-color-text-generic
--color-grey-40$bds-color-text-info
--color-blue-45$bds-color-text-inverse
--color-grey-98$bds-color-text-primary
--color-grey-25$bds-color-text-secondary
--color-grey-40$bds-color-text-success
--color-green-50$bds-color-text-tertiary
--color-grey-54$bds-color-text-warning
--color-ochre-45$
export {
formGroup-color$formGroup-border-color
--bds-brand-primary-color$formGroup-legend-color
--bds-brand-primary-colorProperties
ts
export interface FormGroupProps {
name: string;
cols: string;
}