File: /var/www/design.system/src/tokens/tokens.ts
export const radius: Record<string, string> = {
radius100: '4px',
radius200: '8px',
radius400: '16px',
radiusFull: '100%',
};
export const spacing: Record<string, string> = {
space100: '4px',
space200: '8px',
space300: '12px',
space400: '16px',
space600: '24px',
space800: '32px',
space1600: '64px',
space2400: '96px',
space4000: '160px',
};
export const primitivesColors: Record<string, string> = {
blue100: '#EBF2FFFF',
blue200: '#CFE0FFFF',
blue300: '#AAC7FFFF',
blue400: '#82ADFFFF',
blue500: '#5D94FFFF',
blue600: '#397DFFFF',
blue700: '#306AD9FF',
blue800: '#2859B5FF',
blue900: '#204791FF',
blue1000: '#1A3873FF',
slate10: '#F7F7F8FF',
slate50: '#EFEFF1FF',
slate100: '#E5E6E9FF',
slate200: '#CECED5FF',
slate300: '#C2C2CAFF',
slate400: '#ACADB8FF',
slate500: '#9495A3FF',
slate600: '#7C7E8FFF',
slate700: '#67687CFF',
slate800: '#4F5168FF',
slate900: '#393B55FF',
slate1000: '#28293BFF',
gray100: '#F3F3F3FF',
gray200: '#E3E3E3FF',
gray300: '#CDCDCDFF',
gray400: '#B2B2B2FF',
gray500: '#949494FF',
gray600: '#767676FF',
gray700: '#5A5A5AFF',
gray800: '#434343FF',
gray900: '#303030FF',
gray1000: '#242424FF',
green100: '#E9F8F1FF',
green200: '#C9EDDDFF',
green300: '#9FE0C2FF',
green400: '#73D1A5FF',
green500: '#20B670FF',
green600: '#20B670FF',
green700: '#1B9B5FFF',
green800: '#178150FF',
green900: '#126840FF',
green1000: '#0E5232FF',
yellow100: '#FBF4E8FF',
yellow200: '#F5E5C8FF',
yellow300: '#EDD09DFF',
yellow400: '#E5BA6FFF',
yellow500: '#DDA543FF',
yellow600: '#D5911AFF',
yellow700: '#B57B16FF',
yellow800: '#976712FF',
yellow900: '#79530FFF',
yellow1000: '#60410CFF',
red100: '#FBEAEBFF',
red200: '#F5CCCFFF',
red300: '#EDA4A9FF',
red400: '#E47981FF',
red500: '#DC515BFF',
red600: '#D42B37FF',
red700: '#B4252FFF',
red800: '#971F27FF',
red900: '#79191FFF',
red1000: '#5F1319FF',
black100: '#0C0C0D0D',
black200: '#0C0C0D1A',
black300: '#0C0C0D33',
black400: '#0C0C0D66',
black500: '#0C0C0DB2',
black600: '#0C0C0DCC',
black700: '#0C0C0DD9',
black800: '#0C0C0DE5',
black900: '#0C0C0DF2',
black1000: '#0C0C0DFF',
white100: '#FFFFFF0D',
white200: '#FFFFFF1A',
white300: '#FFFFFF33',
white400: '#FFFFFF66',
white500: '#FFFFFFB2',
white600: '#FFFFFFCC',
white700: '#FFFFFFD9',
white800: '#FFFFFFE5',
white900: '#FFFFFFF2',
white1000: '#FFFFFFFF',
};
export const backgroundColors: Record<string, string> = {
backgroundDefaultPrimary: 'var(--white1000)',
backgroundNeutralPrimary: 'var(--gray600)',
backgroundNeutralPrimaryHover: 'var(--gray700)',
backgroundNeutralSecondary: 'var(--gray200)',
backgroundNeutralSecondaryHover: 'var(--gray300)',
backgroundNeutralTertiary: 'var(--gray100)',
backgroundNeutralTertiaryHover: 'var(--gray200)',
backgroundDefaultPrimaryHover: 'var(--slate10)',
backgroundDefaultSecondary: 'var(--slate10)',
backgroundDefaultSecondaryHover: 'var(--slate50)',
backgroundDefaultTertiary: 'var(--slate50)',
backgroundDefaultTertiaryHover: 'var(--slate100)',
backgroundBrandPrimary: 'var(--blue600)',
backgroundBrandPrimaryHover: 'var(--blue700)',
backgroundBrandSecondary: 'var(--blue200)',
backgroundBrandSecondaryHover: 'var(--blue300)',
backgroundBrandTertiary: 'var(--blue100)',
backgroundBrandTertiaryHover: 'var(--blue200)',
backgroundPositivePrimary: 'var(--green600)',
backgroundPositivePrimaryHover: 'var(--green700)',
backgroundPositiveSecondary: 'var(--green200)',
backgroundPositiveSecondaryHover: 'var(--green300)',
backgroundPositiveTertiary: 'var(--green100)',
backgroundPositiveTertiaryHover: 'var(--green200)',
backgroundWarningPrimary: 'var(--yellow600)',
backgroundWarningPrimaryHover: 'var(--yellow700)',
backgroundWarningSecondary: 'var(--yellow200)',
backgroundWarningSecondaryHover: 'var(--yellow300)',
backgroundWarningTertiary: 'var(--yellow100)',
backgroundWarningTertiaryHover: 'var(--yellow200)',
backgroundDangerPrimary: 'var(--red600)',
backgroundDangerPrimaryHover: 'var(--red700)',
backgroundDangerSecondary: 'var(--red200)',
backgroundDangerSecondaryHover: 'var(--red300)',
backgroundDangerTertiary: 'var(--red100)',
backgroundDangerTertiaryHover: 'var(--red200)',
backgroundDisabledPrimary: 'var(--slate100)',
backgroundUtilitiesScrim: '#FFFFFFCC',
backgroundUtilitiesBlanket: '#000000B2',
backgroundUtilitiesOverlay: '#00000080',
backgroundInversePrimary: 'var(--slate900)',
};
export const textColors: Record<string, string> = {
textDefaultPrimary: 'var(--slate900)',
textDefaultSecondary: 'var(--slate600)',
textDefaultTertiary: 'var(--slate400)',
textNeutralPrimary: 'var(--gray900)',
textNeutralSecondary: 'var(--gray700)',
textNeutralTertiary: 'var(--gray600)',
textNeutralOnNeutralPrimary: 'var(--gray100)',
textNeutralOnNeutralSecondary: 'var(--gray900)',
textNeutralOnNeutralTertiary: 'var(--gray800)',
textBrandPrimary: 'var(--blue700)',
textBrandSecondary: 'var(--blue600)',
textBrandTertiary: 'var(--blue500)',
textBrandOnBrandPrimary: 'var(--blue100)',
textBrandOnBrandSecondary: 'var(--blue700)',
textBrandOnBrandTertiary: 'var(--blue700)',
textPositivePrimary: 'var(--green700)',
textPositiveSecondary: 'var(--green600)',
textPositiveTertiary: 'var(--green500)',
textPositiveOnPositivePrimary: 'var(--green100)',
textPositiveOnPositiveSecondary: 'var(--green700)',
textPositiveOnPositiveTertiary: 'var(--green700)',
textWarningPrimary: 'var(--yellow700)',
textWarningSecondary: 'var(--yellow600)',
textWarningTertiary: 'var(--yellow500)',
textWarningOnWarningPrimary: 'var(--yellow900)',
textWarningOnWarningSecondary: 'var(--yellow700)',
textWarningOnWarningTertiary: 'var(--yellow700)',
textDangerPrimary: 'var(--red700)',
textDangerSecondary: 'var(--red600)',
textDangerTertiary: 'var(--red500)',
textDangerOnDangerPrimary: 'var(--red100)',
textDangerOnDangerSecondary: 'var(--red700)',
textDangerOnDangerTertiary: 'var(--red700)',
textDisabledPrimary: 'var(--slate400)',
textDisabledOnDisabledPrimary: 'var(--slate500)',
textDisabledSecondary: 'var(--slate200)',
textDisabledOnDisabledSecondary: 'var(--slate300)',
};
export const iconColors: Record<string, string> = {
iconDefaultPrimary: 'var(--slate900)',
iconNeutralPrimary: 'var(--gray900)',
iconNeutralSecondary: 'var(--gray700)',
iconNeutralTertiary: 'var(--gray600)',
iconNeutralOnNeutralPrimary: 'var(--gray100)',
iconNeutralOnNeutralSecondary: 'var(--gray900)',
iconNeutralOnNeutralTertiary: 'var(--gray800)',
iconDefaultSecondary: 'var(--slate500)',
iconDefaultTertiary: 'var(--slate400)',
iconBrandPrimary: 'var(--blue700)',
iconBrandSecondary: 'var(--blue600)',
iconBrandTertiary: 'var(--blue500)',
iconBrandOnBrandPrimary: 'var(--blue100)',
iconBrandOnBrandSecondary: 'var(--blue700)',
iconBrandOnBrandTertiary: 'var(--blue700)',
iconPositivePrimary: 'var(--green700)',
iconPositiveSecondary: 'var(--green600)',
iconPositiveTertiary: 'var(--green500)',
iconPositiveOnPositivePrimary: 'var(--green100)',
iconPositiveOnPositiveSecondary: 'var(--green700)',
iconPositiveOnPositiveTertiary: 'var(--green700)',
iconWarningPrimary: 'var(--yellow700)',
iconWarningSecondary: 'var(--yellow600)',
iconWarningTertiary: 'var(--yellow500)',
iconWarningOnWarningPrimary: 'var(--yellow900)',
iconWarningOnWarningSecondary: 'var(--yellow700)',
iconWarningOnWarningTertiary: 'var(--yellow700)',
iconDangerPrimary: 'var(--red700)',
iconDangerSecondary: 'var(--red600)',
iconDangerTertiary: 'var(--red500)',
iconDangerOnDangerPrimary: 'var(--red100)',
iconDangerOnDangerSecondary: 'var(--red700)',
iconDangerOnDangerTertiary: 'var(--red700)',
iconDisabledPrimary: 'var(--slate300)',
iconDisabledOnDisabledPrimary: 'var(--slate500)',
};
export const borderColors: Record<string, string> = {
borderDefaultPrimary: 'var(--slate100)',
borderDefaultSecondary: 'var(--slate300)',
borderDefaultTertiary: 'var(--slate500)',
borderNeutralPrimary: 'var(--gray700)',
borderNeutralSecondary: 'var(--gray500)',
borderNeutralTertiary: 'var(--gray300)',
borderBrandPrimary: 'var(--blue600)',
borderBrandSecondary: 'var(--blue400)',
borderBrandTertiary: 'var(--blue200)',
borderPositivePrimary: 'var(--green600)',
borderPositiveSecondary: 'var(--green400)',
borderPositiveTertiary: 'var(--green200)',
borderWarningPrimary: 'var(--yellow600)',
borderWarningSecondary: 'var(--yellow400)',
borderWarningTertiary: 'var(--yellow200)',
borderDangerPrimary: 'var(--red600)',
borderDangerSecondary: 'var(--red400)',
borderDangerTertiary: 'var(--red200)',
borderDisabledPrimary: 'var(--slate300)',
};
export const dropShadows: Record<string, string> = {
dropShadow100: '0 1px 4px 0 var(--black100)',
dropShadow200: '0 1px 4px 0 var(--black100)',
dropShadow300: '0 4px 4px -1px var(--black100)',
dropShadow400: '0 16px 32px -4px var(--black200)',
dropShadow500: '0 16px 16px -8px var(--black200)',
dropShadow600: '0 16px 32px -8px var(--black400)',
};
export const innerShadows: Record<string, string> = {
innerShadow100: 'inset 0 1px 4px 0 var(--black100)',
innerShadow200: 'inset 0 1px 4px 0 var(--black100)',
innerShadow300: 'inset 0 4px 4px -1px var(--black100)',
innerShadow400: 'inset 0 16px 32px -4px var(--black200)',
innerShadow500: 'inset 0 16px 16px -8px var(--black200)',
innerShadow600: 'inset 0 16px 32px -8px var(--black400)',
};