Merged in monorepo-step-1 (pull request #1080)
Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
This commit is contained in:
committed by
Linus Flood
parent
667cab6fb6
commit
80100e7631
628
packages/design-system/lib/styles/colors.ts
Normal file
628
packages/design-system/lib/styles/colors.ts
Normal file
@@ -0,0 +1,628 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const colors = {
|
||||
Scandic: {
|
||||
'Scandic-Brand-Scandic-Red': '#cd0921',
|
||||
'Scandic-Brand-Burgundy': '#4d001b',
|
||||
'Scandic-Brand-Pale-Peach': '#f7e1d5',
|
||||
'Scandic-Brand-Dark-Green': '#093021',
|
||||
'Scandic-Brand-Light-Green': '#d2edaf',
|
||||
'Scandic-Brand-Dark-Grey': '#291710',
|
||||
'Scandic-Brand-Warm-White': '#faf6f2',
|
||||
'Scandic-Brand-Light-Blue': '#b5e0ff',
|
||||
'Scandic-Brand-Dark-Blue': '#0d1440',
|
||||
'Scandic-Brand-Pale-Yellow': '#fff0c2',
|
||||
'Scandic-Red-00': '#ffebeb',
|
||||
'Scandic-Red-10': '#f7c1c2',
|
||||
'Scandic-Red-20': '#f79499',
|
||||
'Scandic-Red-30': '#f26b74',
|
||||
'Scandic-Red-40': '#ed4251',
|
||||
'Scandic-Red-50': '#e32034',
|
||||
'Scandic-Red-60': '#cd0921',
|
||||
'Scandic-Red-70': '#ad0015',
|
||||
'Scandic-Red-80': '#8d0011',
|
||||
'Scandic-Red-90': '#6d000d',
|
||||
'Scandic-Red-100': '#4d001b',
|
||||
'Scandic-Peach-00': '#fff3ed',
|
||||
'Scandic-Beige-00': '#faf6f2',
|
||||
'Scandic-Beige-10': '#f2ece6',
|
||||
'Scandic-Beige-20': '#e3d9d1',
|
||||
'Scandic-Beige-30': '#d1c4ba',
|
||||
'Scandic-Beige-40': '#b8a79a',
|
||||
'Scandic-Beige-50': '#9c8a7e',
|
||||
'Scandic-Beige-60': '#806e63',
|
||||
'Scandic-Beige-70': '#6b584d',
|
||||
'Scandic-Beige-80': '#533f35',
|
||||
'Scandic-Beige-90': '#3e2b23',
|
||||
'Scandic-Beige-100': '#291710',
|
||||
'Scandic-Peach-10': '#f7e1d5',
|
||||
'Scandic-Peach-20': '#f4d5c8',
|
||||
'Scandic-Peach-30': '#f0c1b6',
|
||||
'Scandic-Peach-40': '#e9aba3',
|
||||
'Scandic-Peach-50': '#de9490',
|
||||
'Scandic-Peach-60': '#cd797c',
|
||||
'Scandic-Peach-70': '#b05b65',
|
||||
'Scandic-Peach-80': '#8f4350',
|
||||
'Scandic-Peach-90': '#642636',
|
||||
'Scandic-Peach-100': '#4d0f25',
|
||||
'Scandic-Green-00': '#f3fce8',
|
||||
'Scandic-Green-10': '#e1f3ca',
|
||||
'Scandic-Green-20': '#d2edaf',
|
||||
'Scandic-Green-30': '#acdb8a',
|
||||
'Scandic-Green-40': '#7cb865',
|
||||
'Scandic-Green-50': '#539e49',
|
||||
'Scandic-Green-60': '#348337',
|
||||
'Scandic-Green-70': '#256931',
|
||||
'Scandic-Green-80': '#164e29',
|
||||
'Scandic-Green-90': '#093021',
|
||||
'Scandic-Green-100': '#091f16',
|
||||
'Scandic-Blue-00': '#e8f6ff',
|
||||
'Scandic-Blue-10': '#cfebff',
|
||||
'Scandic-Blue-20': '#b5e0ff',
|
||||
'Scandic-Blue-30': '#93c9f5',
|
||||
'Scandic-Blue-40': '#79aee7',
|
||||
'Scandic-Blue-50': '#5b8fd4',
|
||||
'Scandic-Blue-60': '#3f6dbd',
|
||||
'Scandic-Blue-70': '#284ea0',
|
||||
'Scandic-Blue-80': '#18347f',
|
||||
'Scandic-Blue-90': '#0d1f5f',
|
||||
'Scandic-Blue-100': '#0d1440',
|
||||
'Scandic-Yellow-00': '#fff8e3',
|
||||
'Scandic-Yellow-10': '#fff0c2',
|
||||
'Scandic-Yellow-20': '#fade89',
|
||||
'Scandic-Yellow-30': '#f7ce52',
|
||||
'Scandic-Yellow-40': '#edb532',
|
||||
'Scandic-Yellow-50': '#e59515',
|
||||
'Scandic-Yellow-60': '#d17308',
|
||||
'Scandic-Yellow-70': '#a85211',
|
||||
'Scandic-Yellow-80': '#7d370f',
|
||||
'Scandic-Yellow-90': '#4f2313',
|
||||
'Scandic-Yellow-100': '#301508',
|
||||
'Go-Brand-Lavender': '#dcd7ff',
|
||||
'Go-Beige-00': '#faf8f2',
|
||||
'Go-Beige-10': '#f0ede4',
|
||||
'Go-Beige-20': '#e0dcce',
|
||||
'Go-Beige-30': '#c8c4b6',
|
||||
'Go-Beige-40': '#b0aca0',
|
||||
'Go-Beige-50': '#918f83',
|
||||
'Go-Beige-60': '#78766d',
|
||||
'Go-Beige-70': '#63615a',
|
||||
'Go-Beige-80': '#4f4d49',
|
||||
'Go-Beige-90': '#373633',
|
||||
'Go-Beige-100': '#1f1e1d',
|
||||
'Go-Brand-Obsidian': '#2d163a',
|
||||
'Go-Brand-Lemon': '#f5ff73',
|
||||
'Go-Brand-Linen': '#e0dcce',
|
||||
'Go-Brand-Chartreuse': '#85ff52',
|
||||
'Go-Brand-Pine': '#21331f',
|
||||
'Go-Brand-Aqua': '#73fcee',
|
||||
'Go-Brand-Powder-rose': '#ecc8c9',
|
||||
'Go-Brand-Coral': '#fa3737',
|
||||
'UI-Grey-00': '#f9f6f4',
|
||||
'UI-Opacity-White-100': '#ffffff',
|
||||
'UI-Opacity-White-90': '#ffffffe6',
|
||||
'UI-Opacity-White-80': '#ffffffcc',
|
||||
'UI-Opacity-White-70': '#ffffffb3',
|
||||
'UI-Opacity-White-60': '#ffffff99',
|
||||
'UI-Opacity-White-50': '#ffffff80',
|
||||
'UI-Opacity-White-40': '#ffffff66',
|
||||
'UI-Opacity-White-30': '#ffffff4d',
|
||||
'UI-Opacity-White-20': '#ffffff33',
|
||||
'UI-Opacity-White-10': '#ffffff1a',
|
||||
'UI-Opacity-White-0': '#ffffff00',
|
||||
'UI-Opacity-Almost-Black-100': '#1f1c1b',
|
||||
'UI-Opacity-Almost-Black-90': '#1f1c1be6',
|
||||
'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
|
||||
'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
|
||||
'UI-Opacity-Almost-Black-60': '#1f1c1b99',
|
||||
'UI-Opacity-Almost-Black-50': '#1f1c1b80',
|
||||
'UI-Opacity-Almost-Black-40': '#1f1c1b66',
|
||||
'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
|
||||
'UI-Opacity-Almost-Black-20': '#1f1c1b33',
|
||||
'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
|
||||
'UI-Opacity-Almost-Black-0': '#1f1c1b00',
|
||||
'UI-Grey-10': '#ebe8e6',
|
||||
'UI-Grey-20': '#d6d2d0',
|
||||
'UI-Grey-30': '#c2bdba',
|
||||
'UI-Grey-40': '#a8a4a2',
|
||||
'UI-Grey-50': '#8c8987',
|
||||
'UI-Grey-60': '#787472',
|
||||
'UI-Grey-70': '#635f5d',
|
||||
'UI-Grey-80': '#57514e',
|
||||
'UI-Grey-90': '#403937',
|
||||
'UI-Grey-100': '#26201e',
|
||||
'Go-Purple-00': '#f4f2ff',
|
||||
'Go-Purple-10': '#dcd7ff',
|
||||
'Go-Purple-20': '#cabffc',
|
||||
'Go-Purple-30': '#baa7f7',
|
||||
'Go-Purple-40': '#ab8ef0',
|
||||
'Go-Purple-50': '#9c75e6',
|
||||
'Go-Purple-60': '#8c5bd5',
|
||||
'Go-Purple-70': '#733cb2',
|
||||
'Go-Purple-80': '#5e2a8c',
|
||||
'Go-Purple-90': '#451f61',
|
||||
'Go-Purple-100': '#2d163a',
|
||||
'Go-Yellow-00': '#fdffe8',
|
||||
'Go-Yellow-10': '#faffc4',
|
||||
'Go-Yellow-20': '#f8ff9c',
|
||||
'Go-Yellow-30': '#f5ff73',
|
||||
'Go-Yellow-40': '#edea39',
|
||||
'Go-Yellow-50': '#dec614',
|
||||
'Go-Yellow-60': '#ba8d07',
|
||||
'Go-Yellow-70': '#966400',
|
||||
'Go-Yellow-80': '#754403',
|
||||
'Go-Yellow-90': '#572701',
|
||||
'Go-Yellow-100': '#3b1300',
|
||||
'Go-Green-00': '#edffe5',
|
||||
'Go-Green-10': '#cdffb8',
|
||||
'Go-Green-20': '#a7ff82',
|
||||
'Go-Green-30': '#85ff52',
|
||||
'Go-Green-40': '#66e03a',
|
||||
'Go-Green-50': '#45b222',
|
||||
'Go-Green-60': '#2e7f18',
|
||||
'Go-Green-70': '#2a601e',
|
||||
'Go-Green-80': '#26461f',
|
||||
'Go-Green-90': '#21331f',
|
||||
'Go-Green-100': '#162115',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const tokens = {
|
||||
'Base-Background-Primary-Normal': 'Scandic-Beige-00',
|
||||
'Base-Background-Primary-Elevated': 'Scandic-Beige-00',
|
||||
'Base-Surface-Primary-light-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Surface-Primary-dark-Normal': 'Scandic-Peach-10',
|
||||
'Base-Surface-Secondary-light-Normal': 'Scandic-Beige-00',
|
||||
'Base-Surface-Secondary-light-Hover': 'Scandic-Peach-10',
|
||||
'Base-Surface-Secondary-light-Hover-alt': 'Scandic-Peach-20',
|
||||
'Base-Surface-Primary-dark-Hover': 'Scandic-Peach-20',
|
||||
'Base-Surface-Primary-light-Hover': 'UI-Grey-00',
|
||||
'Base-Surface-Primary-light-Hover-alt': 'Scandic-Beige-10',
|
||||
'Base-Surface-Subtle-Normal': 'Scandic-Beige-10',
|
||||
'Base-Surface-Subtle-Hover': 'Scandic-Beige-20',
|
||||
'Base-Text-High-contrast': 'Scandic-Red-100',
|
||||
'Base-Icon-Low-contrast': 'Scandic-Peach-70',
|
||||
'Base-Text-Medium-contrast': 'Scandic-Peach-80',
|
||||
'Base-Text-Accent': 'Scandic-Red-60',
|
||||
'Base-Text-Disabled': 'UI-Grey-40',
|
||||
'Base-Text-Inverted': 'UI-Opacity-White-100',
|
||||
'Base-Border-Normal': 'Scandic-Beige-40',
|
||||
'Base-Border-Hover': 'Scandic-Peach-80',
|
||||
'Base-Border-Subtle': 'Scandic-Beige-20',
|
||||
'Base-Border-Inverted': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-Fill-Normal': 'Scandic-Red-60',
|
||||
'Base-Interactive-Surface-Primary-normal': 'Scandic-Red-80',
|
||||
'Base-Interactive-Surface-Secondary-normal': 'Scandic-Green-70',
|
||||
'Base-Interactive-Surface-Tertiary-normal': 'Scandic-Blue-60',
|
||||
'Base-Button-Primary-Fill-Hover': 'Scandic-Red-70',
|
||||
'Base-Button-Primary-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Primary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-On-Fill-Hover': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Secondary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Secondary-Border-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Secondary-Border-Disabled': 'UI-Grey-30',
|
||||
'Base-Button-Tertiary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Tertiary-Fill-Hover': 'Scandic-Red-90',
|
||||
'Base-Button-Tertiary-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Tertiary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Tertiary-On-Fill-Hover': 'UI-Opacity-White-100',
|
||||
'Base-Button-Tertiary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Tertiary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Tertiary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Tertiary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Inverted-Fill-Hover': 'Scandic-Beige-10',
|
||||
'Base-Button-Inverted-Fill-Hover-alt': 'Scandic-Peach-10',
|
||||
'Base-Button-Inverted-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Inverted-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Inverted-On-Fill-Hover': 'Scandic-Red-90',
|
||||
'Base-Button-Inverted-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Inverted-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'UI-Text-High-contrast': 'UI-Grey-100',
|
||||
'UI-Input-Controls-Surface-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Semantic-Information': 'Scandic-Blue-70',
|
||||
'UI-Semantic-Success': 'Scandic-Green-60',
|
||||
'UI-Semantic-Warning': 'Scandic-Yellow-60',
|
||||
'UI-Semantic-Error': 'Scandic-Red-70',
|
||||
'UI-Input-Controls-Surface-Hover': 'Scandic-Beige-10',
|
||||
'UI-Input-Controls-Surface-Disabled': 'UI-Grey-10',
|
||||
'UI-Input-Controls-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Input-Controls-Fill-Selected': 'Scandic-Blue-80',
|
||||
'UI-Input-Controls-Fill-Selected-hover': 'Scandic-Blue-70',
|
||||
'UI-Input-Controls-Fill-Disabled': 'UI-Grey-60',
|
||||
'UI-Input-Controls-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Input-Controls-Border-Normal': 'Scandic-Beige-50',
|
||||
'UI-Input-Controls-Border-Hover': 'Scandic-Beige-70',
|
||||
'UI-Input-Controls-Border-Focus': 'Scandic-Blue-80',
|
||||
'UI-Input-Controls-Border-Disabled': 'UI-Grey-40',
|
||||
'UI-Input-Controls-Border-Error': 'Scandic-Red-70',
|
||||
'UI-Input-Controls-Border-KeyboardFocus': 'Scandic-Blue-50',
|
||||
'UI-Text-Medium-contrast': 'UI-Grey-80',
|
||||
'UI-Text-Active': 'Scandic-Blue-90',
|
||||
'UI-Text-Error': 'Scandic-Red-70',
|
||||
'UI-Text-Placeholder': 'UI-Grey-60',
|
||||
'Primary-Light-Surface-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Light-Surface-Hover': 'Scandic-Peach-20',
|
||||
'Primary-Light-On-Surface-Text': 'Scandic-Red-100',
|
||||
'Primary-Light-On-Surface-Accent': 'Scandic-Red-60',
|
||||
'Primary-Light-On-Surface-Divider': 'Scandic-Peach-30',
|
||||
'Primary-Light-On-Surface-Divider-subtle': 'Scandic-Beige-10',
|
||||
'Primary-Light-Button-Primary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Primary-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Primary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Light-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Light-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Secondary-Border-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Surface-Normal': 'Scandic-Peach-30',
|
||||
'Primary-Dim-Surface-Hover': 'Scandic-Peach-40',
|
||||
'Primary-Dim-On-Surface-Text': 'Scandic-Red-100',
|
||||
'Primary-Dim-On-Surface-Accent': 'Scandic-Peach-80',
|
||||
'Primary-Dim-On-Surface-Divider': 'Scandic-Peach-40',
|
||||
'Primary-Dim-Button-Primary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Primary-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Secondary-Border-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Secondary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Strong-Surface-Normal': 'Scandic-Red-60',
|
||||
'Primary-Strong-Surface-Hover': 'Scandic-Red-70',
|
||||
'Primary-Strong-On-Surface-Text': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-On-Surface-Accent': 'Scandic-Peach-10',
|
||||
'Primary-Strong-On-Surface-Divider': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Primary-Fill-Hover': 'Scandic-Red-00',
|
||||
'Primary-Strong-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Normal': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Hover': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Hover': 'Scandic-Red-00',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Secondary-Border-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Secondary-Border-Hover': 'Scandic-Peach-00',
|
||||
'Primary-Strong-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Dark-Surface-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dark-Surface-Hover': 'Scandic-Red-90',
|
||||
'Primary-Dark-On-Surface-Text': 'Scandic-Peach-10',
|
||||
'Primary-Dark-On-Surface-Accent': 'Scandic-Peach-50',
|
||||
'Primary-Dark-On-Surface-Divider': 'Scandic-Peach-80',
|
||||
'Primary-Dark-Button-Primary-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Primary-Fill-Hover': 'Scandic-Peach-20',
|
||||
'Primary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-30',
|
||||
'Primary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-30',
|
||||
'Primary-Dark-Button-Secondary-Border-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Secondary-Border-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Light-Surface-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Surface-Normal': 'Scandic-Green-90',
|
||||
'Tertiary-Light-Surface-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Surface-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-On-Surface-Text': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-On-Surface-Accent': 'Scandic-Yellow-50',
|
||||
'Tertiary-Light-On-Surface-Divider': 'Scandic-Yellow-20',
|
||||
'Tertiary-Light-Button-Primary-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Primary-Fill-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Primary-Border-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Button-Primary-Border-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Secondary-Border-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Secondary-Border-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Dark-Surface-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Dark-On-Surface-Text': 'Scandic-Green-20',
|
||||
'Secondary-Dark-On-Surface-Accent': 'Scandic-Green-40',
|
||||
'Secondary-Dark-On-Surface-Divider': 'Scandic-Green-80',
|
||||
'Secondary-Dark-Button-Primary-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Primary-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Dark-Button-Secondary-Border-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Secondary-Border-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Light-Surface-Hover': 'Scandic-Green-20',
|
||||
'Secondary-Light-On-Surface-Text': 'Scandic-Green-90',
|
||||
'Secondary-Light-On-Surface-Accent': 'Scandic-Green-50',
|
||||
'Secondary-Light-On-Surface-Divider': 'Scandic-Green-30',
|
||||
'Secondary-Light-Button-Primary-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Primary-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Light-Button-Secondary-Border-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Secondary-Border-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Dark-Surface-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Dark-Surface-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Dark-On-Surface-Text': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-On-Surface-Accent': 'Scandic-Blue-40',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Blue-80',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-On-Surface-Divider': 'Scandic-Blue-80',
|
||||
'Base-Button-Text-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Text-On-Fill-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Text-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Text-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Border-Disabled': 'UI-Opacity-White-0',
|
||||
} as const
|
||||
|
||||
export const Scandic = {
|
||||
Scandic: {
|
||||
'Scandic-Brand-Scandic-Red': '#cd0921',
|
||||
'Scandic-Brand-Burgundy': '#4d001b',
|
||||
'Scandic-Brand-Pale-Peach': '#f7e1d5',
|
||||
'Scandic-Brand-Dark-Green': '#093021',
|
||||
'Scandic-Brand-Light-Green': '#d2edaf',
|
||||
'Scandic-Brand-Dark-Grey': '#291710',
|
||||
'Scandic-Brand-Warm-White': '#faf6f2',
|
||||
'Scandic-Brand-Light-Blue': '#b5e0ff',
|
||||
'Scandic-Brand-Dark-Blue': '#0d1440',
|
||||
'Scandic-Brand-Pale-Yellow': '#fff0c2',
|
||||
'Scandic-Red-00': '#ffebeb',
|
||||
'Scandic-Red-10': '#f7c1c2',
|
||||
'Scandic-Red-20': '#f79499',
|
||||
'Scandic-Red-30': '#f26b74',
|
||||
'Scandic-Red-40': '#ed4251',
|
||||
'Scandic-Red-50': '#e32034',
|
||||
'Scandic-Red-60': '#cd0921',
|
||||
'Scandic-Red-70': '#ad0015',
|
||||
'Scandic-Red-80': '#8d0011',
|
||||
'Scandic-Red-90': '#6d000d',
|
||||
'Scandic-Red-100': '#4d001b',
|
||||
'Scandic-Peach-00': '#fff3ed',
|
||||
'Scandic-Beige-00': '#faf6f2',
|
||||
'Scandic-Beige-10': '#f2ece6',
|
||||
'Scandic-Beige-20': '#e3d9d1',
|
||||
'Scandic-Beige-30': '#d1c4ba',
|
||||
'Scandic-Beige-40': '#b8a79a',
|
||||
'Scandic-Beige-50': '#9c8a7e',
|
||||
'Scandic-Beige-60': '#806e63',
|
||||
'Scandic-Beige-70': '#6b584d',
|
||||
'Scandic-Beige-80': '#533f35',
|
||||
'Scandic-Beige-90': '#3e2b23',
|
||||
'Scandic-Beige-100': '#291710',
|
||||
'Scandic-Peach-10': '#f7e1d5',
|
||||
'Scandic-Peach-20': '#f4d5c8',
|
||||
'Scandic-Peach-30': '#f0c1b6',
|
||||
'Scandic-Peach-40': '#e9aba3',
|
||||
'Scandic-Peach-50': '#de9490',
|
||||
'Scandic-Peach-60': '#cd797c',
|
||||
'Scandic-Peach-70': '#b05b65',
|
||||
'Scandic-Peach-80': '#8f4350',
|
||||
'Scandic-Peach-90': '#642636',
|
||||
'Scandic-Peach-100': '#4d0f25',
|
||||
'Scandic-Green-00': '#f3fce8',
|
||||
'Scandic-Green-10': '#e1f3ca',
|
||||
'Scandic-Green-20': '#d2edaf',
|
||||
'Scandic-Green-30': '#acdb8a',
|
||||
'Scandic-Green-40': '#7cb865',
|
||||
'Scandic-Green-50': '#539e49',
|
||||
'Scandic-Green-60': '#348337',
|
||||
'Scandic-Green-70': '#256931',
|
||||
'Scandic-Green-80': '#164e29',
|
||||
'Scandic-Green-90': '#093021',
|
||||
'Scandic-Green-100': '#091f16',
|
||||
'Scandic-Blue-00': '#e8f6ff',
|
||||
'Scandic-Blue-10': '#cfebff',
|
||||
'Scandic-Blue-20': '#b5e0ff',
|
||||
'Scandic-Blue-30': '#93c9f5',
|
||||
'Scandic-Blue-40': '#79aee7',
|
||||
'Scandic-Blue-50': '#5b8fd4',
|
||||
'Scandic-Blue-60': '#3f6dbd',
|
||||
'Scandic-Blue-70': '#284ea0',
|
||||
'Scandic-Blue-80': '#18347f',
|
||||
'Scandic-Blue-90': '#0d1f5f',
|
||||
'Scandic-Blue-100': '#0d1440',
|
||||
'Scandic-Yellow-00': '#fff8e3',
|
||||
'Scandic-Yellow-10': '#fff0c2',
|
||||
'Scandic-Yellow-20': '#fade89',
|
||||
'Scandic-Yellow-30': '#f7ce52',
|
||||
'Scandic-Yellow-40': '#edb532',
|
||||
'Scandic-Yellow-50': '#e59515',
|
||||
'Scandic-Yellow-60': '#d17308',
|
||||
'Scandic-Yellow-70': '#a85211',
|
||||
'Scandic-Yellow-80': '#7d370f',
|
||||
'Scandic-Yellow-90': '#4f2313',
|
||||
'Scandic-Yellow-100': '#301508',
|
||||
},
|
||||
Go: {
|
||||
'Go-Brand-Lavender': '#dcd7ff',
|
||||
'Go-Beige-00': '#faf8f2',
|
||||
'Go-Beige-10': '#f0ede4',
|
||||
'Go-Beige-20': '#e0dcce',
|
||||
'Go-Beige-30': '#c8c4b6',
|
||||
'Go-Beige-40': '#b0aca0',
|
||||
'Go-Beige-50': '#918f83',
|
||||
'Go-Beige-60': '#78766d',
|
||||
'Go-Beige-70': '#63615a',
|
||||
'Go-Beige-80': '#4f4d49',
|
||||
'Go-Beige-90': '#373633',
|
||||
'Go-Beige-100': '#1f1e1d',
|
||||
'Go-Brand-Obsidian': '#2d163a',
|
||||
'Go-Brand-Lemon': '#f5ff73',
|
||||
'Go-Brand-Linen': '#e0dcce',
|
||||
'Go-Brand-Chartreuse': '#85ff52',
|
||||
'Go-Brand-Pine': '#21331f',
|
||||
'Go-Brand-Aqua': '#73fcee',
|
||||
'Go-Brand-Powder-rose': '#ecc8c9',
|
||||
'Go-Brand-Coral': '#fa3737',
|
||||
'Go-Purple-00': '#f4f2ff',
|
||||
'Go-Purple-10': '#dcd7ff',
|
||||
'Go-Purple-20': '#cabffc',
|
||||
'Go-Purple-30': '#baa7f7',
|
||||
'Go-Purple-40': '#ab8ef0',
|
||||
'Go-Purple-50': '#9c75e6',
|
||||
'Go-Purple-60': '#8c5bd5',
|
||||
'Go-Purple-70': '#733cb2',
|
||||
'Go-Purple-80': '#5e2a8c',
|
||||
'Go-Purple-90': '#451f61',
|
||||
'Go-Purple-100': '#2d163a',
|
||||
'Go-Yellow-00': '#fdffe8',
|
||||
'Go-Yellow-10': '#faffc4',
|
||||
'Go-Yellow-20': '#f8ff9c',
|
||||
'Go-Yellow-30': '#f5ff73',
|
||||
'Go-Yellow-40': '#edea39',
|
||||
'Go-Yellow-50': '#dec614',
|
||||
'Go-Yellow-60': '#ba8d07',
|
||||
'Go-Yellow-70': '#966400',
|
||||
'Go-Yellow-80': '#754403',
|
||||
'Go-Yellow-90': '#572701',
|
||||
'Go-Yellow-100': '#3b1300',
|
||||
'Go-Green-00': '#edffe5',
|
||||
'Go-Green-10': '#cdffb8',
|
||||
'Go-Green-20': '#a7ff82',
|
||||
'Go-Green-30': '#85ff52',
|
||||
'Go-Green-40': '#66e03a',
|
||||
'Go-Green-50': '#45b222',
|
||||
'Go-Green-60': '#2e7f18',
|
||||
'Go-Green-70': '#2a601e',
|
||||
'Go-Green-80': '#26461f',
|
||||
'Go-Green-90': '#21331f',
|
||||
'Go-Green-100': '#162115',
|
||||
},
|
||||
UI: {
|
||||
'UI-Grey-00': '#f9f6f4',
|
||||
'UI-Opacity-White-100': '#ffffff',
|
||||
'UI-Opacity-White-90': '#ffffffe6',
|
||||
'UI-Opacity-White-80': '#ffffffcc',
|
||||
'UI-Opacity-White-70': '#ffffffb3',
|
||||
'UI-Opacity-White-60': '#ffffff99',
|
||||
'UI-Opacity-White-50': '#ffffff80',
|
||||
'UI-Opacity-White-40': '#ffffff66',
|
||||
'UI-Opacity-White-30': '#ffffff4d',
|
||||
'UI-Opacity-White-20': '#ffffff33',
|
||||
'UI-Opacity-White-10': '#ffffff1a',
|
||||
'UI-Opacity-White-0': '#ffffff00',
|
||||
'UI-Opacity-Almost-Black-100': '#1f1c1b',
|
||||
'UI-Opacity-Almost-Black-90': '#1f1c1be6',
|
||||
'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
|
||||
'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
|
||||
'UI-Opacity-Almost-Black-60': '#1f1c1b99',
|
||||
'UI-Opacity-Almost-Black-50': '#1f1c1b80',
|
||||
'UI-Opacity-Almost-Black-40': '#1f1c1b66',
|
||||
'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
|
||||
'UI-Opacity-Almost-Black-20': '#1f1c1b33',
|
||||
'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
|
||||
'UI-Opacity-Almost-Black-0': '#1f1c1b00',
|
||||
'UI-Grey-10': '#ebe8e6',
|
||||
'UI-Grey-20': '#d6d2d0',
|
||||
'UI-Grey-30': '#c2bdba',
|
||||
'UI-Grey-40': '#a8a4a2',
|
||||
'UI-Grey-50': '#8c8987',
|
||||
'UI-Grey-60': '#787472',
|
||||
'UI-Grey-70': '#635f5d',
|
||||
'UI-Grey-80': '#57514e',
|
||||
'UI-Grey-90': '#403937',
|
||||
'UI-Grey-100': '#26201e',
|
||||
},
|
||||
} as const
|
||||
BIN
packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
Normal file
BIN
packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
Normal file
Binary file not shown.
5
packages/design-system/lib/styles/globals.css
Normal file
5
packages/design-system/lib/styles/globals.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@font-face {
|
||||
font-family: 'Helvetica';
|
||||
font-style: normal;
|
||||
src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
|
||||
}
|
||||
165
packages/design-system/lib/styles/modes.css
Normal file
165
packages/design-system/lib/styles/modes.css
Normal file
@@ -0,0 +1,165 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Go-Beige-00: #faf8f2;
|
||||
--Go-Beige-10: #f0ede4;
|
||||
--Go-Beige-20: #e0dcce;
|
||||
--Go-Beige-30: #c8c4b6;
|
||||
--Go-Beige-40: #b0aca0;
|
||||
--Go-Beige-50: #918f83;
|
||||
--Go-Beige-60: #78766d;
|
||||
--Go-Beige-70: #63615a;
|
||||
--Go-Beige-80: #4f4d49;
|
||||
--Go-Beige-90: #373633;
|
||||
--Go-Beige-100: #1f1e1d;
|
||||
--Go-Brand-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powder-rose: #ecc8c9;
|
||||
--Go-Green-00: #edffe5;
|
||||
--Go-Green-10: #cdffb8;
|
||||
--Go-Green-20: #a7ff82;
|
||||
--Go-Green-30: #85ff52;
|
||||
--Go-Green-40: #66e03a;
|
||||
--Go-Green-50: #45b222;
|
||||
--Go-Green-60: #2e7f18;
|
||||
--Go-Green-70: #2a601e;
|
||||
--Go-Green-80: #26461f;
|
||||
--Go-Green-90: #21331f;
|
||||
--Go-Green-100: #162115;
|
||||
--Go-Purple-00: #f4f2ff;
|
||||
--Go-Purple-10: #dcd7ff;
|
||||
--Go-Purple-20: #cabffc;
|
||||
--Go-Purple-30: #baa7f7;
|
||||
--Go-Purple-40: #ab8ef0;
|
||||
--Go-Purple-50: #9c75e6;
|
||||
--Go-Purple-60: #8c5bd5;
|
||||
--Go-Purple-70: #733cb2;
|
||||
--Go-Purple-80: #5e2a8c;
|
||||
--Go-Purple-90: #451f61;
|
||||
--Go-Purple-100: #2d163a;
|
||||
--Go-Yellow-00: #fdffe8;
|
||||
--Go-Yellow-10: #faffc4;
|
||||
--Go-Yellow-20: #f8ff9c;
|
||||
--Go-Yellow-30: #f5ff73;
|
||||
--Go-Yellow-40: #edea39;
|
||||
--Go-Yellow-50: #dec614;
|
||||
--Go-Yellow-60: #ba8d07;
|
||||
--Go-Yellow-70: #966400;
|
||||
--Go-Yellow-80: #754403;
|
||||
--Go-Yellow-90: #572701;
|
||||
--Go-Yellow-100: #3b1300;
|
||||
--Scandic-Beige-00: #faf6f2;
|
||||
--Scandic-Beige-10: #f2ece6;
|
||||
--Scandic-Beige-20: #e3d9d1;
|
||||
--Scandic-Beige-30: #d1c4ba;
|
||||
--Scandic-Beige-40: #b8a79a;
|
||||
--Scandic-Beige-50: #9c8a7e;
|
||||
--Scandic-Beige-60: #806e63;
|
||||
--Scandic-Beige-70: #6b584d;
|
||||
--Scandic-Beige-80: #533f35;
|
||||
--Scandic-Beige-90: #3e2b23;
|
||||
--Scandic-Beige-100: #291710;
|
||||
--Scandic-Blue-00: #e8f6ff;
|
||||
--Scandic-Blue-10: #cfebff;
|
||||
--Scandic-Blue-20: #b5e0ff;
|
||||
--Scandic-Blue-30: #93c9f5;
|
||||
--Scandic-Blue-40: #79aee7;
|
||||
--Scandic-Blue-50: #5b8fd4;
|
||||
--Scandic-Blue-60: #3f6dbd;
|
||||
--Scandic-Blue-70: #284ea0;
|
||||
--Scandic-Blue-80: #18347f;
|
||||
--Scandic-Blue-90: #0d1f5f;
|
||||
--Scandic-Blue-100: #0d1440;
|
||||
--Scandic-Brand-Burgundy: #4d001b;
|
||||
--Scandic-Brand-Dark-Blue: #0d1440;
|
||||
--Scandic-Brand-Dark-Green: #093021;
|
||||
--Scandic-Brand-Dark-Grey: #291710;
|
||||
--Scandic-Brand-Light-Blue: #b5e0ff;
|
||||
--Scandic-Brand-Light-Green: #d2edaf;
|
||||
--Scandic-Brand-Pale-Peach: #f7e1d5;
|
||||
--Scandic-Brand-Pale-Yellow: #fff0c2;
|
||||
--Scandic-Brand-Scandic-Red: #cd0921;
|
||||
--Scandic-Brand-Warm-White: #faf6f2;
|
||||
--Scandic-Green-00: #f3fce8;
|
||||
--Scandic-Green-10: #e1f3ca;
|
||||
--Scandic-Green-20: #d2edaf;
|
||||
--Scandic-Green-30: #acdb8a;
|
||||
--Scandic-Green-40: #7cb865;
|
||||
--Scandic-Green-50: #539e49;
|
||||
--Scandic-Green-60: #348337;
|
||||
--Scandic-Green-70: #256931;
|
||||
--Scandic-Green-80: #164e29;
|
||||
--Scandic-Green-90: #093021;
|
||||
--Scandic-Green-100: #091f16;
|
||||
--Scandic-Peach-00: #fff3ed;
|
||||
--Scandic-Peach-10: #f7e1d5;
|
||||
--Scandic-Peach-20: #f4d5c8;
|
||||
--Scandic-Peach-30: #f0c1b6;
|
||||
--Scandic-Peach-40: #e9aba3;
|
||||
--Scandic-Peach-50: #de9490;
|
||||
--Scandic-Peach-60: #cd797c;
|
||||
--Scandic-Peach-70: #b05b65;
|
||||
--Scandic-Peach-80: #8f4350;
|
||||
--Scandic-Peach-90: #642636;
|
||||
--Scandic-Peach-100: #4d0f25;
|
||||
--Scandic-Red-00: #ffebeb;
|
||||
--Scandic-Red-10: #f7c1c2;
|
||||
--Scandic-Red-20: #f79499;
|
||||
--Scandic-Red-30: #f26b74;
|
||||
--Scandic-Red-40: #ed4251;
|
||||
--Scandic-Red-50: #e32034;
|
||||
--Scandic-Red-60: #cd0921;
|
||||
--Scandic-Red-70: #ad0015;
|
||||
--Scandic-Red-80: #8d0011;
|
||||
--Scandic-Red-90: #6d000d;
|
||||
--Scandic-Red-100: #4d001b;
|
||||
--Scandic-Yellow-00: #fff8e3;
|
||||
--Scandic-Yellow-10: #fff0c2;
|
||||
--Scandic-Yellow-20: #fade89;
|
||||
--Scandic-Yellow-30: #f7ce52;
|
||||
--Scandic-Yellow-40: #edb532;
|
||||
--Scandic-Yellow-50: #e59515;
|
||||
--Scandic-Yellow-60: #d17308;
|
||||
--Scandic-Yellow-70: #a85211;
|
||||
--Scandic-Yellow-80: #7d370f;
|
||||
--Scandic-Yellow-90: #4f2313;
|
||||
--Scandic-Yellow-100: #301508;
|
||||
--UI-Grey-00: #f9f6f4;
|
||||
--UI-Grey-10: #ebe8e6;
|
||||
--UI-Grey-20: #d6d2d0;
|
||||
--UI-Grey-30: #c2bdba;
|
||||
--UI-Grey-40: #a8a4a2;
|
||||
--UI-Grey-50: #8c8987;
|
||||
--UI-Grey-60: #787472;
|
||||
--UI-Grey-70: #635f5d;
|
||||
--UI-Grey-80: #57514e;
|
||||
--UI-Grey-90: #403937;
|
||||
--UI-Grey-100: #26201e;
|
||||
--UI-Opacity-Almost-Black-0: #1f1c1b00;
|
||||
--UI-Opacity-Almost-Black-10: #1f1c1b1a;
|
||||
--UI-Opacity-Almost-Black-20: #1f1c1b33;
|
||||
--UI-Opacity-Almost-Black-30: #1f1c1b4d;
|
||||
--UI-Opacity-Almost-Black-40: #1f1c1b66;
|
||||
--UI-Opacity-Almost-Black-50: #1f1c1b80;
|
||||
--UI-Opacity-Almost-Black-60: #1f1c1b99;
|
||||
--UI-Opacity-Almost-Black-70: #1f1c1bb3;
|
||||
--UI-Opacity-Almost-Black-80: #1f1c1bcc;
|
||||
--UI-Opacity-Almost-Black-90: #1f1c1be6;
|
||||
--UI-Opacity-Almost-Black-100: #1f1c1b;
|
||||
--UI-Opacity-White-0: #ffffff00;
|
||||
--UI-Opacity-White-10: #ffffff1a;
|
||||
--UI-Opacity-White-20: #ffffff33;
|
||||
--UI-Opacity-White-30: #ffffff4d;
|
||||
--UI-Opacity-White-40: #ffffff66;
|
||||
--UI-Opacity-White-50: #ffffff80;
|
||||
--UI-Opacity-White-60: #ffffff99;
|
||||
--UI-Opacity-White-70: #ffffffb3;
|
||||
--UI-Opacity-White-80: #ffffffcc;
|
||||
--UI-Opacity-White-90: #ffffffe6;
|
||||
--UI-Opacity-White-100: #ffffff;
|
||||
}
|
||||
134
packages/design-system/lib/styles/new.css
Normal file
134
packages/design-system/lib/styles/new.css
Normal file
@@ -0,0 +1,134 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Go-Beige-00: #faf8f2;
|
||||
--Go-Beige-10: #f0ede4;
|
||||
--Go-Beige-20: #e0dcce;
|
||||
--Go-Beige-30: #c8c4b6;
|
||||
--Go-Beige-40: #b0aca0;
|
||||
--Go-Beige-50: #918f83;
|
||||
--Go-Beige-60: #78766d;
|
||||
--Go-Beige-70: #63615a;
|
||||
--Go-Beige-80: #4f4d49;
|
||||
--Go-Beige-90: #373633;
|
||||
--Go-Beige-100: #1f1e1d;
|
||||
--Go-Brand-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powderrose: #ecc8c9;
|
||||
--Go-Green-00: #edffe5;
|
||||
--Go-Green-10: #cdffb8;
|
||||
--Go-Green-20: #a7ff82;
|
||||
--Go-Green-30: #85ff52;
|
||||
--Go-Green-40: #66e03a;
|
||||
--Go-Green-50: #45b222;
|
||||
--Go-Green-60: #2e7f18;
|
||||
--Go-Green-70: #2a601e;
|
||||
--Go-Green-80: #26461f;
|
||||
--Go-Green-90: #21331f;
|
||||
--Go-Green-100: #162115;
|
||||
--Go-Purple-00: #f4f2ff;
|
||||
--Go-Purple-10: #dcd7ff;
|
||||
--Go-Purple-20: #cabffc;
|
||||
--Go-Purple-30: #baa7f7;
|
||||
--Go-Purple-40: #ab8ef0;
|
||||
--Go-Purple-50: #9c75e6;
|
||||
--Go-Purple-60: #8c5bd5;
|
||||
--Go-Purple-70: #733cb2;
|
||||
--Go-Purple-80: #5e2a8c;
|
||||
--Go-Purple-90: #451f61;
|
||||
--Go-Purple-100: #2d163a;
|
||||
--Go-Yellow-00: #fdffe8;
|
||||
--Go-Yellow-10: #faffc4;
|
||||
--Go-Yellow-20: #f8ff9c;
|
||||
--Go-Yellow-30: #f5ff73;
|
||||
--Go-Yellow-40: #edea39;
|
||||
--Go-Yellow-50: #dec614;
|
||||
--Go-Yellow-60: #ba8d07;
|
||||
--Go-Yellow-70: #966400;
|
||||
--Go-Yellow-80: #754403;
|
||||
--Go-Yellow-90: #572701;
|
||||
--Go-Yellow-100: #3b1300;
|
||||
--Main-Blue-00: #eaf2fc;
|
||||
--Main-Blue-10: #c7d9f5;
|
||||
--Main-Blue-20: #a5c2ee;
|
||||
--Main-Blue-30: #84ace7;
|
||||
--Main-Blue-40: #6697df;
|
||||
--Main-Blue-50: #4983d8;
|
||||
--Main-Blue-60: #2e70d1;
|
||||
--Main-Blue-70: #1555b4;
|
||||
--Main-Blue-80: #023d96;
|
||||
--Main-Blue-90: #002a69;
|
||||
--Main-Blue-100: #001b42;
|
||||
--Main-Brand-Burgundy: #4d001b;
|
||||
--Main-Brand-DarkBlue: #0d1440;
|
||||
--Main-Brand-DarkGreen: #093021;
|
||||
--Main-Brand-DarkGrey: #291710;
|
||||
--Main-Brand-LightBlue: #b5e0ff;
|
||||
--Main-Brand-LightGreen: #d2edaf;
|
||||
--Main-Brand-PalePeach: #f7e1d5;
|
||||
--Main-Brand-PaleYellow: #fff0c2;
|
||||
--Main-Brand-ScandicRed: #cd0921;
|
||||
--Main-Brand-WarmWhite: #faf6f2;
|
||||
--Main-Green-00: #e7f5e1;
|
||||
--Main-Green-10: #badda8;
|
||||
--Main-Green-20: #99ca7e;
|
||||
--Main-Green-30: #7ab859;
|
||||
--Main-Green-40: #5fa53a;
|
||||
--Main-Green-50: #47931f;
|
||||
--Main-Green-60: #33800a;
|
||||
--Main-Green-70: #286806;
|
||||
--Main-Green-80: #1e4f03;
|
||||
--Main-Green-90: #143701;
|
||||
--Main-Green-100: #0e2600;
|
||||
--Main-Grey-00: #f9f6f4;
|
||||
--Main-Grey-10: #ebe8e6;
|
||||
--Main-Grey-20: #d6d2d0;
|
||||
--Main-Grey-30: #c2bdba;
|
||||
--Main-Grey-40: #a8a4a2;
|
||||
--Main-Grey-50: #8c8987;
|
||||
--Main-Grey-60: #787472;
|
||||
--Main-Grey-70: #635f5d;
|
||||
--Main-Grey-80: #57514e;
|
||||
--Main-Grey-90: #403937;
|
||||
--Main-Grey-100: #26201e;
|
||||
--Main-Grey-Almostblack: #1f1c1b;
|
||||
--Main-Grey-White: #ffffff;
|
||||
--Main-Red-00: #ffebeb;
|
||||
--Main-Red-10: #f7c1c2;
|
||||
--Main-Red-20: #f79499;
|
||||
--Main-Red-30: #f26b74;
|
||||
--Main-Red-40: #ed4251;
|
||||
--Main-Red-50: #e32034;
|
||||
--Main-Red-60: #cd0921;
|
||||
--Main-Red-70: #ad0015;
|
||||
--Main-Red-80: #8d0011;
|
||||
--Main-Red-90: #6d000d;
|
||||
--Main-Red-100: #4d001b;
|
||||
--Main-Scandic-00: #ffebeb;
|
||||
--Main-Scandic-10: #f7c1c2;
|
||||
--Main-Scandic-20: #f79499;
|
||||
--Main-Scandic-30: #f26b74;
|
||||
--Main-Scandic-40: #ed4251;
|
||||
--Main-Scandic-50: #e32034;
|
||||
--Main-Scandic-60: #cd0921;
|
||||
--Main-Scandic-70: #ad0015;
|
||||
--Main-Scandic-80: #8d0011;
|
||||
--Main-Scandic-90: #6d000d;
|
||||
--Main-Scandic-100: #4d001b;
|
||||
--Main-Yellow-00: #fff8e3;
|
||||
--Main-Yellow-10: #fff0c2;
|
||||
--Main-Yellow-20: #fade89;
|
||||
--Main-Yellow-30: #f7ce52;
|
||||
--Main-Yellow-40: #edb532;
|
||||
--Main-Yellow-50: #e59515;
|
||||
--Main-Yellow-60: #d17308;
|
||||
--Main-Yellow-70: #a85211;
|
||||
--Main-Yellow-80: #7d370f;
|
||||
--Main-Yellow-90: #4f2313;
|
||||
--Main-Yellow-100: #301508;
|
||||
}
|
||||
41
packages/design-system/lib/styles/numberedTokens.css
Normal file
41
packages/design-system/lib/styles/numberedTokens.css
Normal file
@@ -0,0 +1,41 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Corner-radius-Large: 12px;
|
||||
--Corner-radius-Medium: 8px;
|
||||
--Corner-radius-Rounded: 250px;
|
||||
--Corner-radius-Small: 4px;
|
||||
--Corner-radius-xLarge: 16px;
|
||||
--Layout-Desktop-Breakpoints-max-width: 1920px;
|
||||
--Layout-Desktop-Breakpoints-min-width: 1367px;
|
||||
--Layout-Desktop-Columns-Column: 12px;
|
||||
--Layout-Desktop-Gutter-max-width: 24px;
|
||||
--Layout-Desktop-Gutter-min-width: 16px;
|
||||
--Layout-Desktop-Margin-Margin-max: 72px;
|
||||
--Layout-Desktop-Margin-Margin-min: 40px;
|
||||
--Layout-Mobile-Breakpoints-max-width: 767px;
|
||||
--Layout-Mobile-Breakpoints-min-width: 320px;
|
||||
--Layout-Mobile-Columns-Column: 4px;
|
||||
--Layout-Mobile-Gutter-max-width: 16px;
|
||||
--Layout-Mobile-Gutter-min-width: 16px;
|
||||
--Layout-Mobile-Margin-Margin-max: 16px;
|
||||
--Layout-Mobile-Margin-Margin-min: 16px;
|
||||
--Layout-Tablet-Breakpoints-max-width: 1366px;
|
||||
--Layout-Tablet-Breakpoints-min-width: 768px;
|
||||
--Layout-Tablet-Columns-Column: 8px;
|
||||
--Layout-Tablet-Gutter-max-width: 16px;
|
||||
--Layout-Tablet-Gutter-min-width: 16px;
|
||||
--Layout-Tablet-Margin-Margin-max: 32px;
|
||||
--Layout-Tablet-Margin-Margin-min: 24px;
|
||||
--Spacing-x0: 0px;
|
||||
--Spacing-x1: 8px;
|
||||
--Spacing-x2: 16px;
|
||||
--Spacing-x3: 24px;
|
||||
--Spacing-x4: 32px;
|
||||
--Spacing-x5: 40px;
|
||||
--Spacing-x6: 48px;
|
||||
--Spacing-x7: 56px;
|
||||
--Spacing-x9: 72px;
|
||||
--Spacing-x-half: 4px;
|
||||
--Spacing-x-one-and-half: 12px;
|
||||
--Spacing-x-quarter: 2px;
|
||||
}
|
||||
134
packages/design-system/lib/styles/old.css
Normal file
134
packages/design-system/lib/styles/old.css
Normal file
@@ -0,0 +1,134 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Go-Beige-00: #faf8f2;
|
||||
--Go-Beige-10: #f0ede4;
|
||||
--Go-Beige-20: #e0dcce;
|
||||
--Go-Beige-30: #c8c4b6;
|
||||
--Go-Beige-40: #b0aca0;
|
||||
--Go-Beige-50: #918f83;
|
||||
--Go-Beige-60: #78766d;
|
||||
--Go-Beige-70: #63615a;
|
||||
--Go-Beige-80: #4f4d49;
|
||||
--Go-Beige-90: #373633;
|
||||
--Go-Beige-100: #1f1e1d;
|
||||
--Go-Brand-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powderrose: #ecc8c9;
|
||||
--Go-Green-00: #edffe5;
|
||||
--Go-Green-10: #cdffb8;
|
||||
--Go-Green-20: #a7ff82;
|
||||
--Go-Green-30: #85ff52;
|
||||
--Go-Green-40: #66e03a;
|
||||
--Go-Green-50: #45b222;
|
||||
--Go-Green-60: #2e7f18;
|
||||
--Go-Green-70: #2a601e;
|
||||
--Go-Green-80: #26461f;
|
||||
--Go-Green-90: #21331f;
|
||||
--Go-Green-100: #162115;
|
||||
--Go-Purple-00: #f4f2ff;
|
||||
--Go-Purple-10: #dcd7ff;
|
||||
--Go-Purple-20: #cabffc;
|
||||
--Go-Purple-30: #baa7f7;
|
||||
--Go-Purple-40: #ab8ef0;
|
||||
--Go-Purple-50: #9c75e6;
|
||||
--Go-Purple-60: #8c5bd5;
|
||||
--Go-Purple-70: #733cb2;
|
||||
--Go-Purple-80: #5e2a8c;
|
||||
--Go-Purple-90: #451f61;
|
||||
--Go-Purple-100: #2d163a;
|
||||
--Go-Yellow-00: #fdffe8;
|
||||
--Go-Yellow-10: #faffc4;
|
||||
--Go-Yellow-20: #f8ff9c;
|
||||
--Go-Yellow-30: #f5ff73;
|
||||
--Go-Yellow-40: #edea39;
|
||||
--Go-Yellow-50: #dec614;
|
||||
--Go-Yellow-60: #ba8d07;
|
||||
--Go-Yellow-70: #966400;
|
||||
--Go-Yellow-80: #754403;
|
||||
--Go-Yellow-90: #572701;
|
||||
--Go-Yellow-100: #3b1300;
|
||||
--Main-Blue-00: #eaf2fc;
|
||||
--Main-Blue-10: #c7d9f5;
|
||||
--Main-Blue-20: #a5c2ee;
|
||||
--Main-Blue-30: #84ace7;
|
||||
--Main-Blue-40: #6697df;
|
||||
--Main-Blue-50: #4983d8;
|
||||
--Main-Blue-60: #2e70d1;
|
||||
--Main-Blue-70: #1555b4;
|
||||
--Main-Blue-80: #023d96;
|
||||
--Main-Blue-90: #002a69;
|
||||
--Main-Blue-100: #001b42;
|
||||
--Main-Brand-Burgundy: #4d001b;
|
||||
--Main-Brand-DarkBlue: #0d1440;
|
||||
--Main-Brand-DarkGreen: #093021;
|
||||
--Main-Brand-DarkGrey: #291710;
|
||||
--Main-Brand-LightBlue: #b5e0ff;
|
||||
--Main-Brand-LightGreen: #d2edaf;
|
||||
--Main-Brand-PalePeach: #f7e1d5;
|
||||
--Main-Brand-PaleYellow: #fff0c2;
|
||||
--Main-Brand-ScandicRed: #cd0921;
|
||||
--Main-Brand-WarmWhite: #faf6f2;
|
||||
--Main-Green-00: #e7f5e1;
|
||||
--Main-Green-10: #badda8;
|
||||
--Main-Green-20: #99ca7e;
|
||||
--Main-Green-30: #7ab859;
|
||||
--Main-Green-40: #5fa53a;
|
||||
--Main-Green-50: #47931f;
|
||||
--Main-Green-60: #33800a;
|
||||
--Main-Green-70: #286806;
|
||||
--Main-Green-80: #1e4f03;
|
||||
--Main-Green-90: #143701;
|
||||
--Main-Green-100: #0e2600;
|
||||
--Main-Grey-00: #f2f2f2;
|
||||
--Main-Grey-10: #e7e7e8;
|
||||
--Main-Grey-20: #d8d8da;
|
||||
--Main-Grey-30: #ceced2;
|
||||
--Main-Grey-40: #c5c5ca;
|
||||
--Main-Grey-50: #a7a7ad;
|
||||
--Main-Grey-60: #7e7e84;
|
||||
--Main-Grey-70: #535358;
|
||||
--Main-Grey-80: #2f2f32;
|
||||
--Main-Grey-90: #1b1b1c;
|
||||
--Main-Grey-100: #111112;
|
||||
--Main-Grey-Almostblack: #1f1c1b;
|
||||
--Main-Grey-White: #ffffff;
|
||||
--Main-Red-00: #ffebeb;
|
||||
--Main-Red-10: #f7c1c2;
|
||||
--Main-Red-20: #f79499;
|
||||
--Main-Red-30: #f26b74;
|
||||
--Main-Red-40: #ed4251;
|
||||
--Main-Red-50: #e32034;
|
||||
--Main-Red-60: #cd0921;
|
||||
--Main-Red-70: #ad0015;
|
||||
--Main-Red-80: #8d0011;
|
||||
--Main-Red-90: #6d000d;
|
||||
--Main-Red-100: #4d001b;
|
||||
--Main-Scandic-00: #edf7f7;
|
||||
--Main-Scandic-10: #c5e3e5;
|
||||
--Main-Scandic-20: #97d3d9;
|
||||
--Main-Scandic-30: #74cbd2;
|
||||
--Main-Scandic-40: #53c3cc;
|
||||
--Main-Scandic-50: #26a7b2;
|
||||
--Main-Scandic-60: #00838e;
|
||||
--Main-Scandic-70: #055b62;
|
||||
--Main-Scandic-80: #08393d;
|
||||
--Main-Scandic-90: #082022;
|
||||
--Main-Scandic-100: #061112;
|
||||
--Main-Yellow-00: #fff8e3;
|
||||
--Main-Yellow-10: #fff0c2;
|
||||
--Main-Yellow-20: #fade89;
|
||||
--Main-Yellow-30: #f7ce52;
|
||||
--Main-Yellow-40: #edb532;
|
||||
--Main-Yellow-50: #e59515;
|
||||
--Main-Yellow-60: #d17308;
|
||||
--Main-Yellow-70: #a85211;
|
||||
--Main-Yellow-80: #7d370f;
|
||||
--Main-Yellow-90: #4f2313;
|
||||
--Main-Yellow-100: #301508;
|
||||
}
|
||||
318
packages/design-system/lib/styles/tokens.css
Normal file
318
packages/design-system/lib/styles/tokens.css
Normal file
@@ -0,0 +1,318 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Base-Background-Primary-Elevated: var(--Scandic-Beige-00);
|
||||
--Base-Background-Primary-Normal: var(--Scandic-Beige-00);
|
||||
--Base-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Border-Inverted: var(--UI-Opacity-White-100);
|
||||
--Base-Border-Normal: var(--Scandic-Beige-40);
|
||||
--Base-Border-Subtle: var(--Scandic-Beige-20);
|
||||
--Base-Button-Inverted-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Inverted-Fill-Hover: var(--Scandic-Beige-10);
|
||||
--Base-Button-Inverted-Fill-Hover-alt: var(--Scandic-Peach-10);
|
||||
--Base-Button-Inverted-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Inverted-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Inverted-On-Fill-Hover: var(--Scandic-Red-90);
|
||||
--Base-Button-Inverted-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Primary-Fill-Hover: var(--Scandic-Red-70);
|
||||
--Base-Button-Primary-Fill-Normal: var(--Scandic-Red-60);
|
||||
--Base-Button-Primary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Primary-On-Fill-Hover: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Primary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Secondary-Border-Disabled: var(--UI-Grey-30);
|
||||
--Base-Button-Secondary-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Tertiary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Tertiary-Fill-Hover: var(--Scandic-Red-90);
|
||||
--Base-Button-Tertiary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Tertiary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Tertiary-On-Fill-Hover: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Tertiary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Text-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Text-On-Fill-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Text-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Icon-Low-contrast: var(--Scandic-Peach-70);
|
||||
--Base-Interactive-Surface-Primary-normal: var(--Scandic-Red-80);
|
||||
--Base-Interactive-Surface-Secondary-normal: var(--Scandic-Green-70);
|
||||
--Base-Interactive-Surface-Tertiary-normal: var(--Scandic-Blue-60);
|
||||
--Base-Surface-Primary-dark-Hover: var(--Scandic-Peach-20);
|
||||
--Base-Surface-Primary-dark-Normal: var(--Scandic-Peach-10);
|
||||
--Base-Surface-Primary-light-Hover: var(--UI-Grey-00);
|
||||
--Base-Surface-Primary-light-Hover-alt: var(--Scandic-Beige-10);
|
||||
--Base-Surface-Primary-light-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Surface-Secondary-light-Hover: var(--Scandic-Peach-10);
|
||||
--Base-Surface-Secondary-light-Hover-alt: var(--Scandic-Peach-20);
|
||||
--Base-Surface-Secondary-light-Normal: var(--Scandic-Beige-00);
|
||||
--Base-Surface-Subtle-Hover: var(--Scandic-Beige-20);
|
||||
--Base-Surface-Subtle-Normal: var(--Scandic-Beige-10);
|
||||
--Base-Text-Accent: var(--Scandic-Red-60);
|
||||
--Base-Text-Disabled: var(--UI-Grey-40);
|
||||
--Base-Text-High-contrast: var(--Scandic-Red-100);
|
||||
--Base-Text-Inverted: var(--UI-Opacity-White-100);
|
||||
--Base-Text-Medium-contrast: var(--Scandic-Peach-80);
|
||||
--Primary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Peach-20);
|
||||
--Primary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-30);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-30);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-On-Surface-Accent: var(--Scandic-Peach-50);
|
||||
--Primary-Dark-On-Surface-Divider: var(--Scandic-Peach-80);
|
||||
--Primary-Dark-On-Surface-Text: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Surface-Hover: var(--Scandic-Red-90);
|
||||
--Primary-Dark-Surface-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Fill-Disabled: var(--UI-Opacity-Almost-Black-10);
|
||||
--Primary-Dim-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dim-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-On-Surface-Accent: var(--Scandic-Peach-80);
|
||||
--Primary-Dim-On-Surface-Divider: var(--Scandic-Peach-40);
|
||||
--Primary-Dim-On-Surface-Text: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Surface-Hover: var(--Scandic-Peach-40);
|
||||
--Primary-Dim-Surface-Normal: var(--Scandic-Peach-30);
|
||||
--Primary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Primary-Light-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-On-Surface-Accent: var(--Scandic-Red-60);
|
||||
--Primary-Light-On-Surface-Divider: var(--Scandic-Peach-30);
|
||||
--Primary-Light-On-Surface-Divider-subtle: var(--Scandic-Beige-10);
|
||||
--Primary-Light-On-Surface-Text: var(--Scandic-Red-100);
|
||||
--Primary-Light-Surface-Hover: var(--Scandic-Peach-20);
|
||||
--Primary-Light-Surface-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Strong-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Primary-Fill-Hover: var(--Scandic-Red-00);
|
||||
--Primary-Strong-Button-Primary-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Hover: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Normal: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Secondary-Border-Hover: var(--Scandic-Peach-00);
|
||||
--Primary-Strong-Button-Secondary-Border-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-White-20
|
||||
);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-00);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-On-Surface-Accent: var(--Scandic-Peach-10);
|
||||
--Primary-Strong-On-Surface-Divider: var(--Scandic-Red-70);
|
||||
--Primary-Strong-On-Surface-Text: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Surface-Hover: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Surface-Normal: var(--Scandic-Red-60);
|
||||
--Secondary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
|
||||
--Secondary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Secondary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-White-20
|
||||
);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-On-Surface-Accent: var(--Scandic-Green-40);
|
||||
--Secondary-Dark-On-Surface-Divider: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-On-Surface-Text: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Surface-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-Surface-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Secondary-Light-Button-Primary-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Primary-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Secondary-Border-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Secondary-Border-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-On-Surface-Accent: var(--Scandic-Green-50);
|
||||
--Secondary-Light-On-Surface-Divider: var(--Scandic-Green-30);
|
||||
--Secondary-Light-On-Surface-Text: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Surface-Hover: var(--Scandic-Green-20);
|
||||
--Secondary-Light-Surface-Normal: var(--Scandic-Green-20);
|
||||
--Tertiary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Blue-80);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-On-Surface-Accent: var(--Scandic-Blue-40);
|
||||
--Tertiary-Dark-On-Surface-Divider: var(--Scandic-Blue-80);
|
||||
--Tertiary-Dark-On-Surface-Text: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Surface-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Dark-Surface-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Primary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-Border-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Button-Primary-Border-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-Fill-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Primary-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Secondary-Border-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Secondary-Border-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-On-Surface-Accent: var(--Scandic-Yellow-50);
|
||||
--Tertiary-Light-On-Surface-Divider: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Light-On-Surface-Text: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Surface-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Surface-Normal: var(--Scandic-Yellow-10);
|
||||
--UI-Input-Controls-Border-Disabled: var(--UI-Grey-40);
|
||||
--UI-Input-Controls-Border-Error: var(--Scandic-Red-70);
|
||||
--UI-Input-Controls-Border-Focus: var(--Scandic-Blue-80);
|
||||
--UI-Input-Controls-Border-Hover: var(--Scandic-Beige-70);
|
||||
--UI-Input-Controls-Border-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--UI-Input-Controls-Border-Normal: var(--Scandic-Beige-50);
|
||||
--UI-Input-Controls-Fill-Disabled: var(--UI-Grey-60);
|
||||
--UI-Input-Controls-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Input-Controls-Fill-Selected: var(--Scandic-Blue-80);
|
||||
--UI-Input-Controls-Fill-Selected-hover: var(--Scandic-Blue-70);
|
||||
--UI-Input-Controls-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Input-Controls-Surface-Disabled: var(--UI-Grey-10);
|
||||
--UI-Input-Controls-Surface-Hover: var(--Scandic-Beige-10);
|
||||
--UI-Input-Controls-Surface-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Semantic-Error: var(--Scandic-Red-70);
|
||||
--UI-Semantic-Information: var(--Scandic-Blue-70);
|
||||
--UI-Semantic-Success: var(--Scandic-Green-60);
|
||||
--UI-Semantic-Warning: var(--Scandic-Yellow-60);
|
||||
--UI-Text-Active: var(--Scandic-Blue-90);
|
||||
--UI-Text-Error: var(--Scandic-Red-70);
|
||||
--UI-Text-High-contrast: var(--UI-Grey-100);
|
||||
--UI-Text-Medium-contrast: var(--UI-Grey-80);
|
||||
--UI-Text-Placeholder: var(--UI-Grey-60);
|
||||
}
|
||||
217
packages/design-system/lib/styles/typography.css
Normal file
217
packages/design-system/lib/styles/typography.css
Normal file
@@ -0,0 +1,217 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--typography-Body-Bold-Desktop-fontSize: 16px;
|
||||
--typography-Body-Bold-fontFamily: 'fira sans';
|
||||
--typography-Body-Bold-fontSize: 16px;
|
||||
--typography-Body-Bold-fontWeight: 'medium';
|
||||
--typography-Body-Bold-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Bold-lineHeight: 150%;
|
||||
--typography-Body-Bold-Mobile-fontSize: 16px;
|
||||
--typography-Body-Bold-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Bold-textCase: 'original';
|
||||
--typography-Body-Bold-textDecoration: 'none';
|
||||
--typography-Body-Inline-Desktop-fontSize: 16px;
|
||||
--typography-Body-Inline-fontFamily: 'fira sans';
|
||||
--typography-Body-Inline-fontSize: 16px;
|
||||
--typography-Body-Inline-fontWeight: 'regular';
|
||||
--typography-Body-Inline-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Inline-lineHeight: 150%;
|
||||
--typography-Body-Inline-Mobile-fontSize: 16px;
|
||||
--typography-Body-Inline-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Inline-textCase: 'original';
|
||||
--typography-Body-Inline-textDecoration: 'underline';
|
||||
--typography-Body-Link-Desktop-fontSize: 16px;
|
||||
--typography-Body-Link-Mobile-fontSize: 16px;
|
||||
--typography-Body-Link-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Regular-Desktop-fontSize: 16px;
|
||||
--typography-Body-Regular-fontFamily: 'fira sans';
|
||||
--typography-Body-Regular-fontSize: 16px;
|
||||
--typography-Body-Regular-fontWeight: 'regular';
|
||||
--typography-Body-Regular-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Regular-lineHeight: 150%;
|
||||
--typography-Body-Regular-Mobile-fontSize: 16px;
|
||||
--typography-Body-Regular-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Regular-textCase: 'original';
|
||||
--typography-Body-Regular-textDecoration: 'none';
|
||||
--typography-Body-Underline-fontFamily: 'fira sans';
|
||||
--typography-Body-Underline-fontSize: 16px;
|
||||
--typography-Body-Underline-fontWeight: 'medium';
|
||||
--typography-Body-Underline-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Underline-lineHeight: 150%;
|
||||
--typography-Body-Underline-textCase: 'original';
|
||||
--typography-Body-Underline-textDecoration: 'underline';
|
||||
--typography-Caption-Bold-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Bold-fontFamily: 'fira sans';
|
||||
--typography-Caption-Bold-fontSize: 14px;
|
||||
--typography-Caption-Bold-fontWeight: 'medium';
|
||||
--typography-Caption-Bold-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Bold-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Bold-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Bold-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Bold-textCase: 'original';
|
||||
--typography-Caption-Bold-textDecoration: 'none';
|
||||
--typography-Caption-Inline-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Inline-fontFamily: 'fira sans';
|
||||
--typography-Caption-Inline-fontSize: 14px;
|
||||
--typography-Caption-Inline-fontWeight: 'regular';
|
||||
--typography-Caption-Inline-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Inline-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Inline-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Inline-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Inline-textCase: 'original';
|
||||
--typography-Caption-Inline-textDecoration: 'underline';
|
||||
--typography-Caption-Labels-fontFamily: 'brandon text';
|
||||
--typography-Caption-Labels-fontSize: 14px;
|
||||
--typography-Caption-Labels-fontWeight: 'bold';
|
||||
--typography-Caption-Labels-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Labels-lineHeight: 150%;
|
||||
--typography-Caption-Labels-textCase: 'upper';
|
||||
--typography-Caption-Labels-textDecoration: 'none';
|
||||
--typography-Caption-Link-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Link-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Link-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Regular-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Regular-fontFamily: 'fira sans';
|
||||
--typography-Caption-Regular-fontSize: 14px;
|
||||
--typography-Caption-Regular-fontWeight: 'regular';
|
||||
--typography-Caption-Regular-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Regular-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Regular-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Regular-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Regular-textCase: 'original';
|
||||
--typography-Caption-Regular-textDecoration: 'none';
|
||||
--typography-Caption-Underline-fontFamily: 'fira sans';
|
||||
--typography-Caption-Underline-fontSize: 14px;
|
||||
--typography-Caption-Underline-fontWeight: 'medium';
|
||||
--typography-Caption-Underline-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Underline-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Underline-textCase: 'original';
|
||||
--typography-Caption-Underline-textDecoration: 'underline';
|
||||
--typography-Foot-note-Bold-Desktop-fontSize: 12px;
|
||||
--typography-Foot-note-Bold-Mobile-fontSize: 12px;
|
||||
--typography-Foot-note-Bold-Tablet-estimate-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Desktop-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Mobile-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Tablet-estimate-fontSize: 12px;
|
||||
--typography-Footnote-Bold-fontFamily: 'fira sans';
|
||||
--typography-Footnote-Bold-fontSize: 12px;
|
||||
--typography-Footnote-Bold-fontWeight: 'medium';
|
||||
--typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Bold-lineHeight: 150%;
|
||||
--typography-Footnote-Bold-textCase: 'original';
|
||||
--typography-Footnote-Bold-textDecoration: 'none';
|
||||
--typography-Footnote-Labels-fontFamily: 'brandon text';
|
||||
--typography-Footnote-Labels-fontSize: 12px;
|
||||
--typography-Footnote-Labels-fontWeight: 'bold';
|
||||
--typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Labels-lineHeight: 150%;
|
||||
--typography-Footnote-Labels-textCase: 'upper';
|
||||
--typography-Footnote-Labels-textDecoration: 'none';
|
||||
--typography-Footnote-Regular-fontFamily: 'fira sans';
|
||||
--typography-Footnote-Regular-fontSize: 12px;
|
||||
--typography-Footnote-Regular-fontWeight: 'regular';
|
||||
--typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Regular-lineHeight: 150%;
|
||||
--typography-Footnote-Regular-textCase: 'original';
|
||||
--typography-Footnote-Regular-textDecoration: 'none';
|
||||
--typography-Preamble-Desktop-fontSize: 20px;
|
||||
--typography-Preamble-fontFamily: 'fira sans';
|
||||
--typography-Preamble-fontSize: 20px;
|
||||
--typography-Preamble-fontWeight: 'regular';
|
||||
--typography-Preamble-letterSpacing: 1%;
|
||||
--typography-Preamble-lineHeight: 139.9999976158142%;
|
||||
--typography-Preamble-Mobile-fontSize: 18px;
|
||||
--typography-Preamble-Tablet-estimate-fontSize: 19px;
|
||||
--typography-Preamble-textCase: 'original';
|
||||
--typography-Preamble-textDecoration: 'none';
|
||||
--typography-Script-1-Desktop-fontSize: 32px;
|
||||
--typography-Script-1-fontFamily: 'biro script plus';
|
||||
--typography-Script-1-fontSize: 32px;
|
||||
--typography-Script-1-fontWeight: 'regular';
|
||||
--typography-Script-1-letterSpacing: 2%;
|
||||
--typography-Script-1-lineHeight: 110.00000238418579%;
|
||||
--typography-Script-1-Mobile-fontSize: 24px;
|
||||
--typography-Script-1-Tablet-estimate-fontSize: 29px;
|
||||
--typography-Script-1-textCase: 'original';
|
||||
--typography-Script-1-textDecoration: 'none';
|
||||
--typography-Script-2-Desktop-fontSize: 24px;
|
||||
--typography-Script-2-fontFamily: 'biro script plus';
|
||||
--typography-Script-2-fontSize: 24px;
|
||||
--typography-Script-2-fontWeight: 'regular';
|
||||
--typography-Script-2-letterSpacing: 2%;
|
||||
--typography-Script-2-lineHeight: 110.00000238418579%;
|
||||
--typography-Script-2-Mobile-fontSize: 20px;
|
||||
--typography-Script-2-Tablet-estimate-fontSize: 22px;
|
||||
--typography-Script-2-textCase: 'original';
|
||||
--typography-Script-2-textDecoration: 'none';
|
||||
--typography-Subtitle-1-Desktop-fontSize: 24px;
|
||||
--typography-Subtitle-1-fontFamily: 'fira sans';
|
||||
--typography-Subtitle-1-fontSize: 24px;
|
||||
--typography-Subtitle-1-fontWeight: 'medium';
|
||||
--typography-Subtitle-1-letterSpacing: 1%;
|
||||
--typography-Subtitle-1-lineHeight: 120.00000476837158%;
|
||||
--typography-Subtitle-1-Mobile-fontSize: 20px;
|
||||
--typography-Subtitle-1-Tablet-estimate-fontSize: 22px;
|
||||
--typography-Subtitle-1-textCase: 'original';
|
||||
--typography-Subtitle-1-textDecoration: 'none';
|
||||
--typography-Subtitle-2-Desktop-fontSize: 20px;
|
||||
--typography-Subtitle-2-fontFamily: 'fira sans';
|
||||
--typography-Subtitle-2-fontSize: 20px;
|
||||
--typography-Subtitle-2-fontWeight: 'medium';
|
||||
--typography-Subtitle-2-letterSpacing: 1%;
|
||||
--typography-Subtitle-2-lineHeight: 120.00000476837158%;
|
||||
--typography-Subtitle-2-Mobile-fontSize: 18px;
|
||||
--typography-Subtitle-2-Tablet-estimate-fontSize: 19px;
|
||||
--typography-Subtitle-2-textCase: 'original';
|
||||
--typography-Subtitle-2-textDecoration: 'none';
|
||||
--typography-Title-1-Desktop-fontSize: 64px;
|
||||
--typography-Title-1-fontFamily: 'brandon text';
|
||||
--typography-Title-1-fontSize: 64px;
|
||||
--typography-Title-1-fontWeight: 'black';
|
||||
--typography-Title-1-letterSpacing: 0.25%;
|
||||
--typography-Title-1-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-1-Mobile-fontSize: 48px;
|
||||
--typography-Title-1-Tablet-estimate-fontSize: 60px;
|
||||
--typography-Title-1-textCase: 'upper';
|
||||
--typography-Title-1-textDecoration: 'none';
|
||||
--typography-Title-2-Desktop-fontSize: 48px;
|
||||
--typography-Title-2-fontFamily: 'brandon text';
|
||||
--typography-Title-2-fontSize: 48px;
|
||||
--typography-Title-2-fontWeight: 'black';
|
||||
--typography-Title-2-letterSpacing: 0.25%;
|
||||
--typography-Title-2-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-2-Mobile-fontSize: 36px;
|
||||
--typography-Title-2-Tablet-estimate-fontSize: 44px;
|
||||
--typography-Title-2-textCase: 'upper';
|
||||
--typography-Title-2-textDecoration: 'none';
|
||||
--typography-Title-3-Desktop-fontSize: 36px;
|
||||
--typography-Title-3-fontFamily: 'brandon text';
|
||||
--typography-Title-3-fontSize: 36px;
|
||||
--typography-Title-3-fontWeight: 'black';
|
||||
--typography-Title-3-letterSpacing: 0.25%;
|
||||
--typography-Title-3-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-3-Mobile-fontSize: 30px;
|
||||
--typography-Title-3-Tablet-estimate-fontSize: 34px;
|
||||
--typography-Title-3-textCase: 'upper';
|
||||
--typography-Title-3-textDecoration: 'none';
|
||||
--typography-Title-4-Desktop-fontSize: 28px;
|
||||
--typography-Title-4-fontFamily: 'brandon text';
|
||||
--typography-Title-4-fontSize: 28px;
|
||||
--typography-Title-4-fontWeight: 'bold';
|
||||
--typography-Title-4-letterSpacing: 0.25%;
|
||||
--typography-Title-4-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-4-Mobile-fontSize: 24px;
|
||||
--typography-Title-4-Tablet-estimate-fontSize: 26px;
|
||||
--typography-Title-4-textCase: 'original';
|
||||
--typography-Title-4-textDecoration: 'none';
|
||||
--typography-Title-5-Desktop-fontSize: 24px;
|
||||
--typography-Title-5-fontFamily: 'brandon text';
|
||||
--typography-Title-5-fontSize: 24px;
|
||||
--typography-Title-5-fontWeight: 'black';
|
||||
--typography-Title-5-letterSpacing: 0.25%;
|
||||
--typography-Title-5-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-5-Mobile-fontSize: 20px;
|
||||
--typography-Title-5-Tablet-estimate-fontSize: 21px;
|
||||
--typography-Title-5-textCase: 'upper';
|
||||
--typography-Title-5-textDecoration: 'none';
|
||||
}
|
||||
Reference in New Issue
Block a user