feat(SW-375): new tokens
new asset generation logic BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
119
packages/design-system/lib/styles/base.css
Normal file
119
packages/design-system/lib/styles/base.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
/* Values */
|
||||
--Border-width-lg: 3px;
|
||||
--Border-width-md: 2px;
|
||||
--Border-width-none: 0px;
|
||||
--Border-width-sm: 1px;
|
||||
--BoxShadow-Level-1: 0 0 2 1 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-2: 0 0 4 2 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-3: 0 0 8 3 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-4: 0 0 14 6 rgba(0, 0, 0, 0.1);
|
||||
--Breakpoints-max-width: 767px;
|
||||
--Breakpoints-min-width: 320px;
|
||||
--Columns-Column: 4px;
|
||||
--Corner-radius-lg: 12px;
|
||||
--Corner-radius-md: 8px;
|
||||
--Corner-radius-rounded: 250px;
|
||||
--Corner-radius-sm: 4px;
|
||||
--Corner-radius-xl: 16px;
|
||||
--Font-family-Body: 'Fira sans';
|
||||
--Font-family-Decorative: 'Biro Script Plus';
|
||||
--Font-family-Title: 'Brandon Text';
|
||||
--Font-weight-Black: 900;
|
||||
--Font-weight-Bold: 700;
|
||||
--Font-weight-Extra-Bold: 800;
|
||||
--Font-weight-Medium: 500;
|
||||
--Font-weight-Regular-bold: 450;
|
||||
--Font-weight-Regular: 400;
|
||||
--Font-weight-Semi-Bold: 600;
|
||||
--Gutter-max-width: 16px;
|
||||
--Gutter-min-width: 16px;
|
||||
--Icon-2xs: 16px;
|
||||
--Icon-lg: 40px;
|
||||
--Icon-md: 32px;
|
||||
--Icon-sm: 24px;
|
||||
--Icon-xl: 42px;
|
||||
--Icon-xs: 20px;
|
||||
--Line-height-xs: 100px;
|
||||
--Margin-Margin-max: 16px;
|
||||
--Margin-Margin-min: 16px;
|
||||
--Neutral-0: #fcfcfc;
|
||||
--Neutral-100: #141414;
|
||||
--Neutral-10: #f0f0f0;
|
||||
--Neutral-15: #e9e9e9;
|
||||
--Neutral-20: #d9d9d9;
|
||||
--Neutral-30: #bfbfbf;
|
||||
--Neutral-40: #8c8c8c;
|
||||
--Neutral-50: #747474;
|
||||
--Neutral-5: #f5f5f5;
|
||||
--Neutral-60: #575757;
|
||||
--Neutral-70: #454545;
|
||||
--Neutral-80: #262626;
|
||||
--Neutral-90: #1f1f1f;
|
||||
--Neutral-Opacity-Black-0: #1f1c1b00;
|
||||
--Neutral-Opacity-Black-100: #1f1c1b;
|
||||
--Neutral-Opacity-Black-10: #1f1c1b1a;
|
||||
--Neutral-Opacity-Black-20: #1f1c1b33;
|
||||
--Neutral-Opacity-Black-30: #1f1c1b4d;
|
||||
--Neutral-Opacity-Black-40: #1f1c1b66;
|
||||
--Neutral-Opacity-Black-50: #1f1c1b80;
|
||||
--Neutral-Opacity-Black-5: #1f1c1b0d;
|
||||
--Neutral-Opacity-Black-60: #1f1c1b99;
|
||||
--Neutral-Opacity-Black-70: #1f1c1bb3;
|
||||
--Neutral-Opacity-Black-80: #1f1c1bcc;
|
||||
--Neutral-Opacity-Black-90: #1f1c1be6;
|
||||
--Neutral-Opacity-White-0: #ffffff00;
|
||||
--Neutral-Opacity-White-100: #ffffff;
|
||||
--Neutral-Opacity-White-10: #ffffff1a;
|
||||
--Neutral-Opacity-White-20: #ffffff33;
|
||||
--Neutral-Opacity-White-30: #ffffff4d;
|
||||
--Neutral-Opacity-White-40: #ffffff66;
|
||||
--Neutral-Opacity-White-50: #ffffff80;
|
||||
--Neutral-Opacity-White-5: #ffffff00;
|
||||
--Neutral-Opacity-White-60: #ffffff99;
|
||||
--Neutral-Opacity-White-70: #ffffffb3;
|
||||
--Neutral-Opacity-White-80: #ffffffcc;
|
||||
--Neutral-Opacity-White-90: #ffffffe6;
|
||||
--Size-1100-48: 48px;
|
||||
--Size-1300-56: 56px;
|
||||
--Size-1500-64: 64px;
|
||||
--Size-200-12: 12px;
|
||||
--Size-250-14: 14px;
|
||||
--Size-300-16: 16px;
|
||||
--Size-350-18: 18px;
|
||||
--Size-400-20: 20px;
|
||||
--Size-500-24: 24px;
|
||||
--Size-550-26: 26px;
|
||||
--Size-600-28: 28px;
|
||||
--Size-700-32: 32px;
|
||||
--Size-800-36: 36px;
|
||||
--Size-900-40: 40px;
|
||||
--Space-x025: 2px;
|
||||
--Space-x05: 4px;
|
||||
--Space-x0: 0px;
|
||||
--Space-x15: 12px;
|
||||
--Space-x1: 8px;
|
||||
--Space-x2: 16px;
|
||||
--Space-x3: 24px;
|
||||
--Space-x4: 32px;
|
||||
--Space-x5: 40px;
|
||||
--Space-x6: 48px;
|
||||
--Space-x7: 56px;
|
||||
--Space-x8: 72px;
|
||||
|
||||
/* Aliases */
|
||||
--Text-size-2xl: var(--Size-800-36);
|
||||
--Text-size-2xs: var(--Size-300-16);
|
||||
--Text-size-3xl: var(--Size-700-32);
|
||||
--Text-size-3xs: var(--Size-300-16);
|
||||
--Text-size-4xl: var(--Size-800-36);
|
||||
--Text-size-4xs: var(--Size-250-14);
|
||||
--Text-size-5xl: var(--Size-1300-56);
|
||||
--Text-size-5xs: var(--Size-200-12);
|
||||
--Text-size-lg: var(--Size-500-24);
|
||||
--Text-size-md: var(--Size-500-24);
|
||||
--Text-size-sm: var(--Size-400-20);
|
||||
--Text-size-xl: var(--Size-500-24);
|
||||
--Text-size-xs: var(--Size-350-18);
|
||||
}
|
||||
114
packages/design-system/lib/styles/base.js
Normal file
114
packages/design-system/lib/styles/base.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Neutral/0': '#FCFCFC',
|
||||
'Neutral/5': '#F5F5F5',
|
||||
'Neutral/10': '#F0F0F0',
|
||||
'Neutral/15': '#E9E9E9',
|
||||
'Neutral/20': '#D9D9D9',
|
||||
'Neutral/30': '#BFBFBF',
|
||||
'Neutral/40': '#8C8C8C',
|
||||
'Neutral/50': '#747474',
|
||||
'Neutral/60': '#575757',
|
||||
'Neutral/70': '#454545',
|
||||
'Neutral/80': '#262626',
|
||||
'Neutral/90': '#1F1F1F',
|
||||
'Neutral/100': '#141414',
|
||||
'Neutral/Opacity/White/100': '#FFFFFF',
|
||||
'Neutral/Opacity/White/90': '#FFFFFFE6',
|
||||
'Neutral/Opacity/White/80': '#FFFFFFCC',
|
||||
'Neutral/Opacity/White/70': '#FFFFFFB3',
|
||||
'Neutral/Opacity/White/60': '#FFFFFF99',
|
||||
'Neutral/Opacity/White/50': '#FFFFFF80',
|
||||
'Neutral/Opacity/White/40': '#FFFFFF66',
|
||||
'Neutral/Opacity/White/30': '#FFFFFF4D',
|
||||
'Neutral/Opacity/White/20': '#FFFFFF33',
|
||||
'Neutral/Opacity/White/10': '#FFFFFF1A',
|
||||
'Neutral/Opacity/White/5': '#FFFFFF00',
|
||||
'Neutral/Opacity/White/0': '#FFFFFF00',
|
||||
'Neutral/Opacity/Black/100': '#1F1C1B',
|
||||
'Neutral/Opacity/Black/90': '#1F1C1BE6',
|
||||
'Neutral/Opacity/Black/80': '#1F1C1BCC',
|
||||
'Neutral/Opacity/Black/70': '#1F1C1BB3',
|
||||
'Neutral/Opacity/Black/60': '#1F1C1B99',
|
||||
'Neutral/Opacity/Black/50': '#1F1C1B80',
|
||||
'Neutral/Opacity/Black/40': '#1F1C1B66',
|
||||
'Neutral/Opacity/Black/30': '#1F1C1B4D',
|
||||
'Neutral/Opacity/Black/20': '#1F1C1B33',
|
||||
'Neutral/Opacity/Black/10': '#1F1C1B1A',
|
||||
'Neutral/Opacity/Black/5': '#1F1C1B0D',
|
||||
'Neutral/Opacity/Black/0': '#1F1C1B00',
|
||||
'Margin/Margin-min': 16,
|
||||
'Breakpoints/min-width': 320,
|
||||
'Breakpoints/max-width': 767,
|
||||
'Margin/Margin-max': 16,
|
||||
'Columns/Column': 4,
|
||||
'Gutter/min-width': 16,
|
||||
'Gutter/max-width': 16,
|
||||
'Text size/xs': 18,
|
||||
'Text size/sm': 20,
|
||||
'Text size/xl': 24,
|
||||
'Text size/2xl': 36,
|
||||
'Text size/3xl': 32,
|
||||
'Text size/4xl': 36,
|
||||
'Text size/5xl': 56,
|
||||
'Text size/md': 24,
|
||||
'Font family/Title': 'Brandon Text',
|
||||
'Font family/Body': 'Fira sans',
|
||||
'Font family/Decorative': 'Biro Script Plus',
|
||||
'Font weight/Regular': 400,
|
||||
'Font weight/Regular bold': 450,
|
||||
'Font weight/Medium': 500,
|
||||
'Font weight/Semi Bold': 600,
|
||||
'Font weight/Bold': 700,
|
||||
'Font weight/Extra Bold': 800,
|
||||
'Font weight/Black': 900,
|
||||
'Size/200-12': 12,
|
||||
'Size/250-14': 14,
|
||||
'Size/300-16': 16,
|
||||
'Size/350-18': 18,
|
||||
'Size/400-20': 20,
|
||||
'Size/500-24': 24,
|
||||
'Size/550-26': 26,
|
||||
'Size/600-28': 28,
|
||||
'Size/700-32': 32,
|
||||
'Size/800-36': 36,
|
||||
'Size/900-40': 40,
|
||||
'Size/1100-48': 48,
|
||||
'Size/1300-56': 56,
|
||||
'Size/1500-64': 64,
|
||||
'Line height/xs': 100,
|
||||
'Corner radius/sm': 4,
|
||||
'Border width/sm': 1,
|
||||
'Border width/md': 2,
|
||||
'Border width/lg': 3,
|
||||
'Corner radius/md': 8,
|
||||
'Corner radius/lg': 12,
|
||||
'Corner radius/xl': 16,
|
||||
'Corner radius/rounded': 250,
|
||||
'Space/x025': 2,
|
||||
'Space/x05': 4,
|
||||
'Space/x1': 8,
|
||||
'Space/x15': 12,
|
||||
'Space/x2': 16,
|
||||
'Space/x3': 24,
|
||||
'Space/x4': 32,
|
||||
'Space/x5': 40,
|
||||
'Space/x6': 48,
|
||||
'Space/x7': 56,
|
||||
'Space/x8': 72,
|
||||
'Icon/2xs': 16,
|
||||
'Icon/xs': 20,
|
||||
'Icon/sm': 24,
|
||||
'Icon/md': 32,
|
||||
'Icon/lg': 40,
|
||||
'Icon/xl': 42,
|
||||
'Text size/5xs': 12,
|
||||
'Text size/4xs': 14,
|
||||
'Text size/3xs': 16,
|
||||
'Text size/2xs': 16,
|
||||
'Text size/lg': 24,
|
||||
'BoxShadow-Level 1': '0 0 2 1 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 2': '0 0 4 2 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 3': '0 0 8 3 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 4': '0 0 14 6 rgba(0, 0, 0, 0.1)',
|
||||
}
|
||||
@@ -1,628 +0,0 @@
|
||||
/* 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
|
||||
371
packages/design-system/lib/styles/downtown-camper.css
Normal file
371
packages/design-system/lib/styles/downtown-camper.css
Normal file
@@ -0,0 +1,371 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.downtown-camper {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #915836;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #f4ebe7;
|
||||
--Component-Button-Brand-Tertiary-Hover: #4d5448;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #915836;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Downtown-Camper-Body: 'Fira sans';
|
||||
--Font-family-Downtown-Camper-Decorative: 'Gotham';
|
||||
--Font-family-Downtown-Camper-Title: 'Gotham';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Downtown-Camper-Lunar-green-0: #f3f4f1;
|
||||
--Signature-Downtown-Camper-Lunar-green-100: #191d16;
|
||||
--Signature-Downtown-Camper-Lunar-green-10: #e4e7e0;
|
||||
--Signature-Downtown-Camper-Lunar-green-20: #ccd2c4;
|
||||
--Signature-Downtown-Camper-Lunar-green-30: #acb6a0;
|
||||
--Signature-Downtown-Camper-Lunar-green-40: #8e9b80;
|
||||
--Signature-Downtown-Camper-Lunar-green-50: #717f63;
|
||||
--Signature-Downtown-Camper-Lunar-green-60: #58644c;
|
||||
--Signature-Downtown-Camper-Lunar-green-70: #454e3d;
|
||||
--Signature-Downtown-Camper-Lunar-green-80: #3c4336;
|
||||
--Signature-Downtown-Camper-Lunar-green-90: #33382f;
|
||||
--Signature-Downtown-Camper-Quicksand-0: #fbf7f5;
|
||||
--Signature-Downtown-Camper-Quicksand-100: #35211a;
|
||||
--Signature-Downtown-Camper-Quicksand-10: #f6edea;
|
||||
--Signature-Downtown-Camper-Quicksand-20: #f0ded8;
|
||||
--Signature-Downtown-Camper-Quicksand-30: #e4c7bd;
|
||||
--Signature-Downtown-Camper-Quicksand-40: #d2a697;
|
||||
--Signature-Downtown-Camper-Quicksand-50: #c69382;
|
||||
--Signature-Downtown-Camper-Quicksand-60: #a96d59;
|
||||
--Signature-Downtown-Camper-Quicksand-70: #8d5948;
|
||||
--Signature-Downtown-Camper-Quicksand-80: #764c3e;
|
||||
--Signature-Downtown-Camper-Quicksand-90: #644338;
|
||||
--Signature-Downtown-Camper-Russet-0: #fcf9ee;
|
||||
--Signature-Downtown-Camper-Russet-100: #3c1d0c;
|
||||
--Signature-Downtown-Camper-Russet-10: #f6eecf;
|
||||
--Signature-Downtown-Camper-Russet-20: #ecdc9b;
|
||||
--Signature-Downtown-Camper-Russet-30: #e3c666;
|
||||
--Signature-Downtown-Camper-Russet-40: #dcb143;
|
||||
--Signature-Downtown-Camper-Russet-50: #d3952d;
|
||||
--Signature-Downtown-Camper-Russet-60: #bb7524;
|
||||
--Signature-Downtown-Camper-Russet-70: #9b5622;
|
||||
--Signature-Downtown-Camper-Russet-80: #834722;
|
||||
--Signature-Downtown-Camper-Russet-90: #69391e;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e4e4e4;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.06px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.05px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.19px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.12px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3c43361a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-0);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Downtown-Camper-Lunar-green-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Neutral-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Downtown-Camper-Quicksand-60);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-60);
|
||||
--Surface-Accent-3: var(--Signature-Downtown-Camper-Lunar-green-70);
|
||||
--Surface-Accent-4: var(--Signature-Downtown-Camper-Russet-50);
|
||||
--Surface-Accent-5: var(--Scandic-Blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Downtown-Camper-Russet-50);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Surface-Brand-Primary-3-Default: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Neutral-5);
|
||||
--Surface-Secondary-Default: var(--Neutral-10);
|
||||
--Surface-Secondary-Secondary: var(--Neutral-10);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Regular);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Neutral-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Downtown-Camper-Russet-60
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(
|
||||
--Font-family-Downtown-Camper-Decorative
|
||||
);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(
|
||||
--Font-family-Downtown-Camper-Decorative
|
||||
);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Black);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Black);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Black);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Black);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
292
packages/design-system/lib/styles/downtown-camper.js
Normal file
292
packages/design-system/lib/styles/downtown-camper.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Downtown Camper/Lunar green/0': '#F3F4F1',
|
||||
'Signature/Downtown Camper/Lunar green/10': '#E4E7E0',
|
||||
'Signature/Downtown Camper/Lunar green/20': '#CCD2C4',
|
||||
'Signature/Downtown Camper/Lunar green/30': '#ACB6A0',
|
||||
'Signature/Downtown Camper/Lunar green/40': '#8E9B80',
|
||||
'Signature/Downtown Camper/Lunar green/50': '#717F63',
|
||||
'Signature/Downtown Camper/Lunar green/60': '#58644C',
|
||||
'Signature/Downtown Camper/Lunar green/70': '#454E3D',
|
||||
'Signature/Downtown Camper/Lunar green/80': '#3C4336',
|
||||
'Signature/Downtown Camper/Lunar green/90': '#33382F',
|
||||
'Signature/Downtown Camper/Lunar green/100': '#191D16',
|
||||
'Signature/Downtown Camper/Russet/0': '#FCF9EE',
|
||||
'Signature/Downtown Camper/Russet/10': '#F6EECF',
|
||||
'Signature/Downtown Camper/Russet/20': '#ECDC9B',
|
||||
'Signature/Downtown Camper/Russet/30': '#E3C666',
|
||||
'Signature/Downtown Camper/Russet/40': '#DCB143',
|
||||
'Signature/Downtown Camper/Russet/50': '#D3952D',
|
||||
'Signature/Downtown Camper/Russet/60': '#BB7524',
|
||||
'Signature/Downtown Camper/Russet/70': '#9B5622',
|
||||
'Signature/Downtown Camper/Russet/80': '#834722',
|
||||
'Signature/Downtown Camper/Russet/90': '#69391E',
|
||||
'Signature/Downtown Camper/Russet/100': '#3C1D0C',
|
||||
'Signature/Downtown Camper/Quicksand/0': '#FBF7F5',
|
||||
'Signature/Downtown Camper/Quicksand/10': '#F6EDEA',
|
||||
'Signature/Downtown Camper/Quicksand/20': '#F0DED8',
|
||||
'Signature/Downtown Camper/Quicksand/30': '#E4C7BD',
|
||||
'Signature/Downtown Camper/Quicksand/40': '#D2A697',
|
||||
'Signature/Downtown Camper/Quicksand/50': '#C69382',
|
||||
'Signature/Downtown Camper/Quicksand/60': '#A96D59',
|
||||
'Signature/Downtown Camper/Quicksand/70': '#8D5948',
|
||||
'Signature/Downtown Camper/Quicksand/80': '#764C3E',
|
||||
'Signature/Downtown Camper/Quicksand/90': '#644338',
|
||||
'Signature/Downtown Camper/Quicksand/100': '#35211A',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.07,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.05,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.19,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.07,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.12,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.06,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3C43361A',
|
||||
'Font family/Downtown Camper/Title': 'Gotham',
|
||||
'Font family/Downtown Camper/Body': 'Fira sans',
|
||||
'Font family/Downtown Camper/Decorative': 'Gotham',
|
||||
'Title/lg/Font weight': 900,
|
||||
'Title/lg/Font family': 'Gotham',
|
||||
'Title/md/Font weight': 900,
|
||||
'Title/md/Font family': 'Gotham',
|
||||
'Title/sm/Font weight': 900,
|
||||
'Title/sm/Font family': 'Gotham',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Gotham',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Gotham',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Gotham',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 400,
|
||||
'Title/Overline/sm/Font family': 'Gotham',
|
||||
'Title/xs/Font weight': 900,
|
||||
'Title/xs/Font family': 'Gotham',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Gotham',
|
||||
'Tag/Font weight': 400,
|
||||
'Tag/Font family': 'Gotham',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#834722',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#1F1F1F',
|
||||
'Text/Interactive/Secondary': '#834722',
|
||||
'Text/Interactive/Hover Secondary': '#BB7524',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
|
||||
'Background/Primary': '#FCFCFC',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F5F5F5',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F0F0F0',
|
||||
'Surface/Secondary/Secondary': '#F0F0F0',
|
||||
'Surface/Secondary/Hover': '#e4e4e4',
|
||||
'Surface/Brand/Accent/Default': '#D3952D',
|
||||
'Surface/Brand/Primary 1/Default': '#834722',
|
||||
'Surface/Brand/Primary 2/Default': '#834722',
|
||||
'Surface/Brand/Primary 3/Default': '#3C4336',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#A96D59',
|
||||
'Surface/Accent/2': '#3F6DBD',
|
||||
'Surface/Accent/3': '#454E3D',
|
||||
'Surface/Accent/4': '#D3952D',
|
||||
'Surface/Accent/5': '#18347F',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#717F63',
|
||||
'Icon/Interactive/Default': '#1F1F1F',
|
||||
'Icon/Interactive/Secondary': '#834722',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#834722',
|
||||
'Component/Button/Brand/Primary/Hover': '#915836',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#3C4336',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#834722',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#9B5622',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#834722',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#9B5622',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#f4ebe7',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#3C4336',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#4d5448',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#3C4336',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#834722',
|
||||
'Component/Button/Inverted/On fill/Hover': '#915836',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#9B5622',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
Binary file not shown.
@@ -1,5 +1,3 @@
|
||||
@font-face {
|
||||
font-family: 'Helvetica';
|
||||
font-style: normal;
|
||||
src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
349
packages/design-system/lib/styles/grand-hotel.css
Normal file
349
packages/design-system/lib/styles/grand-hotel.css
Normal file
@@ -0,0 +1,349 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.grand-hotel {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #34373d;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e7;
|
||||
--Component-Button-Brand-Tertiary-Hover: #b8cad0;
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: #34373d;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #34373d;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Component-Button-Muted-Hover-inverted: #f2f2f2;
|
||||
--Font-family-Grand-Hotel-Body: 'Fira sans';
|
||||
--Font-family-Grand-Hotel-Decorative: 'Canela Deck';
|
||||
--Font-family-Grand-Hotel-Title: 'Canela Deck';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100: #21252b;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-90: #363c43;
|
||||
--Signature-Grand-Hotel-Careys-Pink-40: #dba7b1;
|
||||
--Signature-Grand-Hotel-Careys-Pink-50: #c27183;
|
||||
--Signature-Grand-Hotel-Careys-Pink-60: #aa546b;
|
||||
--Signature-Grand-Hotel-Careys-Pink-70: #8e4258;
|
||||
--Signature-Grand-Hotel-Cloudy-0: #f7f6f5;
|
||||
--Signature-Grand-Hotel-Cloudy-10: #ebeae9;
|
||||
--Signature-Grand-Hotel-Cloudy-20: #d7d7d1;
|
||||
--Signature-Grand-Hotel-Cloudy-30: #b2ada7;
|
||||
--Signature-Grand-Hotel-Submarine-30: #b0c4cb;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #ebeae9;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.3px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.24px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: Serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: Serif;
|
||||
--Title-md-Letter-spacing: 0.18px;
|
||||
--Title-md-LowCase-Font-fallback: Serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.18px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: Serif;
|
||||
--Title-sm-Letter-spacing: 0.28px;
|
||||
--Title-sm-LowCase-Font-fallback: Serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.28px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: Serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #5b6e7f1a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Grand-Hotel-Careys-Pink-40);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Grand-Hotel-Careys-Pink-70);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-70);
|
||||
--Surface-Accent-3: var(--Signature-Grand-Hotel-Careys-Pink-50);
|
||||
--Surface-Accent-4: var(--Signature-Grand-Hotel-Blue-Bayoux-50);
|
||||
--Surface-Accent-5: var(--Signature-Grand-Hotel-Blue-Bayoux-90);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Grand-Hotel-Cloudy-30);
|
||||
--Surface-Brand-Primary-1-Default: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-40
|
||||
);
|
||||
--Surface-Brand-Primary-2-Default: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-40
|
||||
);
|
||||
--Surface-Brand-Primary-3-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-50
|
||||
);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-50
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Grand-Hotel-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
272
packages/design-system/lib/styles/grand-hotel.js
Normal file
272
packages/design-system/lib/styles/grand-hotel.js
Normal file
@@ -0,0 +1,272 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Grand Hotel/Careys Pink/40': '#DBA7B1',
|
||||
'Signature/Grand Hotel/Careys Pink/50': '#C27183',
|
||||
'Signature/Grand Hotel/Careys Pink/60': '#AA546B',
|
||||
'Signature/Grand Hotel/Careys Pink/70': '#8E4258',
|
||||
'Signature/Grand Hotel/Cloudy/0': '#F7F6F5',
|
||||
'Signature/Grand Hotel/Cloudy/10': '#EBEAE9',
|
||||
'Signature/Grand Hotel/Cloudy/20': '#D7D7D1',
|
||||
'Signature/Grand Hotel/Blue Bayoux/50': '#5B6E7F',
|
||||
'Signature/Grand Hotel/Blue Bayoux/80': '#3D444D',
|
||||
'Signature/Grand Hotel/Blue Bayoux/90': '#363C43',
|
||||
'Signature/Grand Hotel/Blue Bayoux/100': '#21252B',
|
||||
'Signature/Grand Hotel/Cloudy/30': '#B2ADA7',
|
||||
'Signature/Grand Hotel/Submarine/30': '#B0C4CB',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'Serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.18,
|
||||
'Title/md/Font fallback': 'Serif',
|
||||
'Title/sm/Letter spacing': 0.28,
|
||||
'Title/sm/Font fallback': 'Serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.3,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.24,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.28,
|
||||
'Title/sm/LowCase/Font fallback': 'Serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'Serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.18,
|
||||
'Title/md/LowCase/Font fallback': 'Serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#5B6E7F1A',
|
||||
'Font family/Grand Hotel/Title': 'Canela Deck',
|
||||
'Font family/Grand Hotel/Body': 'Fira sans',
|
||||
'Font family/Grand Hotel/Decorative': 'Canela Deck',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Canela Deck',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Canela Deck',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Canela Deck',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Canela Deck',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Canela Deck',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Canela Deck',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Canela Deck',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Canela Deck',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#AA546B',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#21252B',
|
||||
'Text/Interactive/Secondary': '#AA546B',
|
||||
'Text/Interactive/Hover Secondary': '#C27183',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Default': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F7F6F5',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F7F6F5',
|
||||
'Surface/Secondary/Secondary': '#F7F6F5',
|
||||
'Surface/Secondary/Hover': '#ebeae9',
|
||||
'Surface/Brand/Accent/Default': '#B2ADA7',
|
||||
'Surface/Brand/Primary 1/Default': '#DBA7B1',
|
||||
'Surface/Brand/Primary 2/Default': '#DBA7B1',
|
||||
'Surface/Brand/Primary 3/Default': '#5B6E7F',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#8E4258',
|
||||
'Surface/Accent/2': '#284EA0',
|
||||
'Surface/Accent/3': '#C27183',
|
||||
'Surface/Accent/4': '#5B6E7F',
|
||||
'Surface/Accent/5': '#363C43',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#DBA7B1',
|
||||
'Icon/Interactive/Default': '#21252B',
|
||||
'Icon/Interactive/Secondary': '#AA546B',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#21252B',
|
||||
'Component/Button/Brand/Primary/Hover': '#34373d',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#B0C4CB',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#21252B',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#21252B',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#3D444D',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e7',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#B0C4CB',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#b8cad0',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#21252B',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#B0C4CB',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#21252B',
|
||||
'Component/Button/Inverted/On fill/Hover': '#34373d',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#f2f2f2',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#3D444D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
353
packages/design-system/lib/styles/haymarket.css
Normal file
353
packages/design-system/lib/styles/haymarket.css
Normal file
@@ -0,0 +1,353 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.haymarket {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #323232;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e6;
|
||||
--Component-Button-Brand-Tertiary-Hover: #87664e;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #323232;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Haymarket-Body: 'Fira sans';
|
||||
--Font-family-Haymarket-Decorative: 'Prumo text';
|
||||
--Font-family-Haymarket-Title: 'Prumo text';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Haymarket-Antique-Brass-0: #f9f5f1;
|
||||
--Signature-Haymarket-Antique-Brass-100: #37271c;
|
||||
--Signature-Haymarket-Antique-Brass-10: #ede3d8;
|
||||
--Signature-Haymarket-Antique-Brass-20: #d9c3ae;
|
||||
--Signature-Haymarket-Antique-Brass-30: #c5a384;
|
||||
--Signature-Haymarket-Antique-Brass-40: #ba8e6e;
|
||||
--Signature-Haymarket-Antique-Brass-50: #946f54;
|
||||
--Signature-Haymarket-Antique-Brass-60: #805e45;
|
||||
--Signature-Haymarket-Antique-Brass-70: #634732;
|
||||
--Signature-Haymarket-Antique-Brass-80: #5d4330;
|
||||
--Signature-Haymarket-Antique-Brass-90: #483425;
|
||||
--Signature-Haymarket-Bismark-0: #f3f8f8;
|
||||
--Signature-Haymarket-Bismark-100: #1e282e;
|
||||
--Signature-Haymarket-Bismark-10: #e0ebed;
|
||||
--Signature-Haymarket-Bismark-20: #c5d7dc;
|
||||
--Signature-Haymarket-Bismark-30: #9dbcc3;
|
||||
--Signature-Haymarket-Bismark-40: #6e98a2;
|
||||
--Signature-Haymarket-Bismark-50: #527c88;
|
||||
--Signature-Haymarket-Bismark-60: #4a6c78;
|
||||
--Signature-Haymarket-Bismark-70: #3e5760;
|
||||
--Signature-Haymarket-Bismark-80: #394951;
|
||||
--Signature-Haymarket-Bismark-90: #334046;
|
||||
--Signature-Haymarket-Vista-White-0: #fbf7f6;
|
||||
--Signature-Haymarket-Vista-White-100: #351f1a;
|
||||
--Signature-Haymarket-Vista-White-10: #f6ecea;
|
||||
--Signature-Haymarket-Vista-White-20: #f0ddd8;
|
||||
--Signature-Haymarket-Vista-White-30: #e4c5bd;
|
||||
--Signature-Haymarket-Vista-White-40: #d3a296;
|
||||
--Signature-Haymarket-Vista-White-50: #c08273;
|
||||
--Signature-Haymarket-Vista-White-60: #aa6858;
|
||||
--Signature-Haymarket-Vista-White-70: #8e5547;
|
||||
--Signature-Haymarket-Vista-White-80: #76493e;
|
||||
--Signature-Haymarket-Vista-White-90: #644138;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #efebea;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.6px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.64px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: Serif;
|
||||
--Title-lg-Letter-spacing: 1.44px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: Serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: Serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: Serif;
|
||||
--Title-sm-Letter-spacing: 0.56px;
|
||||
--Title-sm-LowCase-Font-fallback: Serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.56px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: Serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #f0ddd81a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Neutral-70);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Neutral-70);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Haymarket-Vista-White-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Neutral-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Haymarket-Vista-White-60);
|
||||
--Surface-Accent-2: var(--Signature-Haymarket-Bismark-40);
|
||||
--Surface-Accent-3: var(--Signature-Haymarket-Antique-Brass-90);
|
||||
--Surface-Accent-4: var(--Signature-Haymarket-Antique-Brass-40);
|
||||
--Surface-Accent-5: var(--Signature-Haymarket-Bismark-90);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Haymarket-Antique-Brass-50);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Haymarket-Bismark-60);
|
||||
--Surface-Brand-Primary-2-Default: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Haymarket-Vista-White-20);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Accent-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-90);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Neutral-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Haymarket-Antique-Brass-40
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Haymarket-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Haymarket-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
292
packages/design-system/lib/styles/haymarket.js
Normal file
292
packages/design-system/lib/styles/haymarket.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Haymarket/Antique Brass/0': '#F9F5F1',
|
||||
'Signature/Haymarket/Antique Brass/10': '#EDE3D8',
|
||||
'Signature/Haymarket/Antique Brass/20': '#D9C3AE',
|
||||
'Signature/Haymarket/Antique Brass/30': '#C5A384',
|
||||
'Signature/Haymarket/Antique Brass/40': '#BA8E6E',
|
||||
'Signature/Haymarket/Antique Brass/50': '#946F54',
|
||||
'Signature/Haymarket/Antique Brass/60': '#805E45',
|
||||
'Signature/Haymarket/Antique Brass/70': '#634732',
|
||||
'Signature/Haymarket/Antique Brass/80': '#5D4330',
|
||||
'Signature/Haymarket/Antique Brass/90': '#483425',
|
||||
'Signature/Haymarket/Antique Brass/100': '#37271C',
|
||||
'Signature/Haymarket/Vista White/0': '#FBF7F6',
|
||||
'Signature/Haymarket/Vista White/10': '#F6ECEA',
|
||||
'Signature/Haymarket/Vista White/20': '#F0DDD8',
|
||||
'Signature/Haymarket/Vista White/30': '#E4C5BD',
|
||||
'Signature/Haymarket/Vista White/40': '#D3A296',
|
||||
'Signature/Haymarket/Vista White/50': '#C08273',
|
||||
'Signature/Haymarket/Vista White/60': '#AA6858',
|
||||
'Signature/Haymarket/Vista White/70': '#8E5547',
|
||||
'Signature/Haymarket/Vista White/80': '#76493E',
|
||||
'Signature/Haymarket/Vista White/90': '#644138',
|
||||
'Signature/Haymarket/Vista White/100': '#351F1A',
|
||||
'Signature/Haymarket/Bismark/0': '#F3F8F8',
|
||||
'Signature/Haymarket/Bismark/10': '#E0EBED',
|
||||
'Signature/Haymarket/Bismark/20': '#C5D7DC',
|
||||
'Signature/Haymarket/Bismark/30': '#9DBCC3',
|
||||
'Signature/Haymarket/Bismark/40': '#6E98A2',
|
||||
'Signature/Haymarket/Bismark/50': '#527C88',
|
||||
'Signature/Haymarket/Bismark/60': '#4A6C78',
|
||||
'Signature/Haymarket/Bismark/70': '#3E5760',
|
||||
'Signature/Haymarket/Bismark/80': '#394951',
|
||||
'Signature/Haymarket/Bismark/90': '#334046',
|
||||
'Signature/Haymarket/Bismark/100': '#1E282E',
|
||||
'Title/lg/Letter spacing': 1.44,
|
||||
'Title/lg/Font fallback': 'Serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'Serif',
|
||||
'Title/sm/Letter spacing': 0.56,
|
||||
'Title/sm/Font fallback': 'Serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.6,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.64,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.56,
|
||||
'Title/sm/LowCase/Font fallback': 'Serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'Serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'Serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#F0DDD81A',
|
||||
'Font family/Haymarket/Title': 'Prumo text',
|
||||
'Font family/Haymarket/Body': 'Fira sans',
|
||||
'Font family/Haymarket/Decorative': 'Prumo text',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Prumo text',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Prumo text',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Prumo text',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Prumo text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Prumo text',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Prumo text',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Prumo text',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Prumo text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#805E45',
|
||||
'Text/Accent Secondary': '#805E45',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#1F1F1F',
|
||||
'Text/Interactive/Secondary': '#805E45',
|
||||
'Text/Interactive/Hover Secondary': '#BA8E6E',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#1F1F1F',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#FBF7F6',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#FBF7F6',
|
||||
'Surface/Secondary/Secondary': '#FBF7F6',
|
||||
'Surface/Secondary/Hover': '#efebea',
|
||||
'Surface/Brand/Accent/Default': '#946F54',
|
||||
'Surface/Brand/Primary 1/Default': '#4A6C78',
|
||||
'Surface/Brand/Primary 2/Default': '#946F54',
|
||||
'Surface/Brand/Primary 3/Default': '#F0DDD8',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#AA6858',
|
||||
'Surface/Accent/2': '#6E98A2',
|
||||
'Surface/Accent/3': '#483425',
|
||||
'Surface/Accent/4': '#BA8E6E',
|
||||
'Surface/Accent/5': '#334046',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#C08273',
|
||||
'Icon/Interactive/Default': '#1F1F1F',
|
||||
'Icon/Interactive/Secondary': '#805E45',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Primary/Hover': '#323232',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#946F54',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#454545',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#454545',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e6',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#946F54',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#87664e',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#946F54',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Inverted/On fill/Hover': '#323232',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#454545',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
353
packages/design-system/lib/styles/hotel-norge.css
Normal file
353
packages/design-system/lib/styles/hotel-norge.css
Normal file
@@ -0,0 +1,353 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.hotel-norge {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #2c3146;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e6e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #215448;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #2c3146;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Hotel-Norge-Body: 'Fira sans';
|
||||
--Font-family-Hotel-Norge-Decorative: 'Domaine Sans Text';
|
||||
--Font-family-Hotel-Norge-Title: 'Domaine Sans Text';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Hotel-Norge-Dark-blue-0: #b7c5c8;
|
||||
--Signature-Hotel-Norge-Dark-blue-100: #2f3445;
|
||||
--Signature-Hotel-Norge-Dark-blue-30: #858f97;
|
||||
--Signature-Hotel-Norge-Dark-blue-80: #404655;
|
||||
--Signature-Hotel-Norge-Dark-blue-90: #181e34;
|
||||
--Signature-Hotel-Norge-Emerald-0: #c7ddd5;
|
||||
--Signature-Hotel-Norge-Emerald-100: #004337;
|
||||
--Signature-Hotel-Norge-Emerald-80: #3a655c;
|
||||
--Signature-Hotel-Norge-Emerald-90: #26544a;
|
||||
--Signature-Hotel-Norge-Off-White-0: #fdfefd;
|
||||
--Signature-Hotel-Norge-Off-White-100: #646563;
|
||||
--Signature-Hotel-Norge-Off-White-10: #fafaf9;
|
||||
--Signature-Hotel-Norge-Off-White-20: #f8f8f6;
|
||||
--Signature-Hotel-Norge-Off-White-30: #f4f5f2;
|
||||
--Signature-Hotel-Norge-Off-White-40: #f2f3ef;
|
||||
--Signature-Hotel-Norge-Off-White-50: #eff0eb;
|
||||
--Signature-Hotel-Norge-Off-White-60: #d9dad6;
|
||||
--Signature-Hotel-Norge-Off-White-70: #aaaaa7;
|
||||
--Signature-Hotel-Norge-Off-White-80: #838481;
|
||||
--Signature-Hotel-Norge-Off-White-90: #6f716f;
|
||||
--Signature-Hotel-Norge-Salmon-50: #ec615b;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e3e4df;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.18px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.24px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: -0.05px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3c43361a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Hotel-Norge-Salmon-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Hotel-Norge-Salmon-50);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-70);
|
||||
--Surface-Accent-3: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Surface-Accent-4: var(--Signature-Hotel-Norge-Dark-blue-30);
|
||||
--Surface-Accent-5: var(--Signature-Hotel-Norge-Dark-blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(
|
||||
--Signature-Hotel-Norge-Off-White-30
|
||||
);
|
||||
--Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Hotel-Norge-Off-White-50);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Neutral-50);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Signature-Hotel-Norge-Dark-blue-0);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Signature-Hotel-Norge-Emerald-80);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Hotel-Norge-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
277
packages/design-system/lib/styles/hotel-norge.js
Normal file
277
packages/design-system/lib/styles/hotel-norge.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Hotel Norge/Off White/0': '#FDFEFD',
|
||||
'Signature/Hotel Norge/Off White/10': '#FAFAF9',
|
||||
'Signature/Hotel Norge/Off White/20': '#F8F8F6',
|
||||
'Signature/Hotel Norge/Off White/30': '#F4F5F2',
|
||||
'Signature/Hotel Norge/Off White/40': '#F2F3EF',
|
||||
'Signature/Hotel Norge/Off White/50': '#EFF0EB',
|
||||
'Signature/Hotel Norge/Off White/60': '#D9DAD6',
|
||||
'Signature/Hotel Norge/Off White/70': '#AAAAA7',
|
||||
'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
|
||||
'Signature/Hotel Norge/Emerald/80': '#3A655C',
|
||||
'Signature/Hotel Norge/Off White/80': '#838481',
|
||||
'Signature/Hotel Norge/Off White/90': '#6F716F',
|
||||
'Signature/Hotel Norge/Emerald/90': '#26544A',
|
||||
'Signature/Hotel Norge/Off White/100': '#646563',
|
||||
'Signature/Hotel Norge/Emerald/100': '#004337',
|
||||
'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
|
||||
'Signature/Hotel Norge/Dark blue/30': '#858F97',
|
||||
'Signature/Hotel Norge/Dark blue/80': '#404655',
|
||||
'Signature/Hotel Norge/Dark blue/90': '#181E34',
|
||||
'Signature/Hotel Norge/Dark blue/100': '#2F3445',
|
||||
'Signature/Hotel Norge/Salmon/50': '#EC615B',
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.24,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.32,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': -0.05,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.18,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3C43361A',
|
||||
'Font family/Hotel Norge/Title': 'Domaine Sans Text',
|
||||
'Font family/Hotel Norge/Body': 'Fira sans',
|
||||
'Font family/Hotel Norge/Decorative': 'Domaine Sans Text',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Domaine Sans Text',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Domaine Sans Text',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Domaine Sans Text',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Domaine Sans Text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Domaine Sans Text',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Domaine Sans Text',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Domaine Sans Text',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Domaine Sans Text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#747474',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#181E34',
|
||||
'Text/Interactive/Secondary': '#26544A',
|
||||
'Text/Interactive/Hover Secondary': '#3A655C',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Default': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Accent': '#004337',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#B7C5C8',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#C7DDD5',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#C7DDD5',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F4F5F2',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#EFF0EB',
|
||||
'Surface/Secondary/Secondary': '#EFF0EB',
|
||||
'Surface/Secondary/Hover': '#e3e4df',
|
||||
'Surface/Brand/Accent/Default': '#C7DDD5',
|
||||
'Surface/Brand/Primary 1/Default': '#181E34',
|
||||
'Surface/Brand/Primary 2/Default': '#181E34',
|
||||
'Surface/Brand/Primary 3/Default': '#004337',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#EC615B',
|
||||
'Surface/Accent/2': '#284EA0',
|
||||
'Surface/Accent/3': '#004337',
|
||||
'Surface/Accent/4': '#858F97',
|
||||
'Surface/Accent/5': '#404655',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#EC615B',
|
||||
'Icon/Interactive/Default': '#181E34',
|
||||
'Icon/Interactive/Secondary': '#26544A',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#181E34',
|
||||
'Component/Button/Brand/Primary/Hover': '#2c3146',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#004337',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#181E34',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#404655',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#181E34',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#404655',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e6e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#004337',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#215448',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#004337',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#181E34',
|
||||
'Component/Button/Inverted/On fill/Hover': '#2c3146',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#404655',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
38
packages/design-system/lib/styles/impl.css
Normal file
38
packages/design-system/lib/styles/impl.css
Normal file
@@ -0,0 +1,38 @@
|
||||
:root {
|
||||
--Impl-Text-size-5xs: var(--Size-200-12);
|
||||
--Impl-Text-size-4xs: var(--Size-250-14);
|
||||
--Impl-Text-size-3xs: var(--Size-300-16);
|
||||
--Impl-Text-size-2xs: var(--Size-300-16);
|
||||
--Impl-Text-size-xs: var(--Size-350-18);
|
||||
--Impl-Text-size-sm: var(--Size-400-20);
|
||||
--Impl-Text-size-md: var(--Size-400-20);
|
||||
--Impl-Text-size-lg: var(--Size-500-24);
|
||||
--Impl-Text-size-xl: var(--Size-500-24);
|
||||
--Impl-Text-size-2xl: 30px;
|
||||
--Impl-Text-size-4xl: var(--Size-800-36);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
/* Tablet */
|
||||
:root {
|
||||
--Impl-Text-size-xs: 19px;
|
||||
--Impl-Text-size-sm: 22px;
|
||||
--Impl-Text-size-lg: var(--Size-550-26);
|
||||
--Impl-Text-size-xl: 29px;
|
||||
--Impl-Text-size-2xl: 34px;
|
||||
--Impl-Text-size-4xl: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
/* Desktop */
|
||||
:root {
|
||||
--Impl-Text-size-2xs: var(--Size-350-18);
|
||||
--Impl-Text-size-xs: var(--Size-400-20);
|
||||
--Impl-Text-size-sm: var(--Size-500-24);
|
||||
--Impl-Text-size-lg: var(--Size-600-28);
|
||||
--Impl-Text-size-xl: var(--Size-700-32);
|
||||
--Impl-Text-size-2xl: var(--Size-800-36);
|
||||
--Impl-Text-size-4xl: var(--Size-1100-48);
|
||||
}
|
||||
}
|
||||
374
packages/design-system/lib/styles/marski.css
Normal file
374
packages/design-system/lib/styles/marski.css
Normal file
@@ -0,0 +1,374 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.marski {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #283b48;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e7e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #1a54e7;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #283b48;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Marski-Body: 'Fira sans';
|
||||
--Font-family-Marski-Decorative: 'Helvetica Neue';
|
||||
--Font-family-Marski-Title: 'Helvetica Neue';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Marski-Aubergine-00: #f9f6f4;
|
||||
--Signature-Marski-Aubergine-100: #3e1118;
|
||||
--Signature-Marski-Aubergine-10: #ebe8e6;
|
||||
--Signature-Marski-Aubergine-20: #cfc4c5;
|
||||
--Signature-Marski-Aubergine-30: #baa9ac;
|
||||
--Signature-Marski-Aubergine-40: #a28d90;
|
||||
--Signature-Marski-Aubergine-50: #8b7074;
|
||||
--Signature-Marski-Aubergine-60: #806267;
|
||||
--Signature-Marski-Aubergine-70: #6a484d;
|
||||
--Signature-Marski-Aubergine-80: #5b353b;
|
||||
--Signature-Marski-Aubergine-90: #481d24;
|
||||
--Signature-Marski-Blue-ribbon-0: #eef7ff;
|
||||
--Signature-Marski-Blue-ribbon-100: #11265a;
|
||||
--Signature-Marski-Blue-ribbon-10: #d8ecff;
|
||||
--Signature-Marski-Blue-ribbon-20: #b9deff;
|
||||
--Signature-Marski-Blue-ribbon-30: #89cbff;
|
||||
--Signature-Marski-Blue-ribbon-40: #52aeff;
|
||||
--Signature-Marski-Blue-ribbon-50: #2a8bff;
|
||||
--Signature-Marski-Blue-ribbon-60: #136afd;
|
||||
--Signature-Marski-Blue-ribbon-70: #0d57f3;
|
||||
--Signature-Marski-Blue-ribbon-80: #1043bd;
|
||||
--Signature-Marski-Blue-ribbon-90: #143d94;
|
||||
--Signature-Marski-Elephant-0: #f6f6f7;
|
||||
--Signature-Marski-Elephant-100: #122937;
|
||||
--Signature-Marski-Elephant-10: #eceeef;
|
||||
--Signature-Marski-Elephant-20: #e0e3e5;
|
||||
--Signature-Marski-Elephant-30: #b6bdc1;
|
||||
--Signature-Marski-Elephant-40: #9ba5ab;
|
||||
--Signature-Marski-Elephant-50: #717f87;
|
||||
--Signature-Marski-Elephant-60: #576771;
|
||||
--Signature-Marski-Elephant-70: #495a65;
|
||||
--Signature-Marski-Elephant-80: #2c414d;
|
||||
--Signature-Marski-Elephant-90: #1e3441;
|
||||
--Signature-Marski-Torch-red-00: #fff0f1;
|
||||
--Signature-Marski-Torch-red-100: #4f0007;
|
||||
--Signature-Marski-Torch-red-10: #ffdde0;
|
||||
--Signature-Marski-Torch-red-20: #ffc1c7;
|
||||
--Signature-Marski-Torch-red-30: #ff96a0;
|
||||
--Signature-Marski-Torch-red-40: #ff5a6a;
|
||||
--Signature-Marski-Torch-red-50: #ff273b;
|
||||
--Signature-Marski-Torch-red-60: #fb1228;
|
||||
--Signature-Marski-Torch-red-70: #d40115;
|
||||
--Signature-Marski-Torch-red-80: #ae0616;
|
||||
--Signature-Marski-Torch-red-90: #900c18;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e0e2e3;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.18px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.1px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.48px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.14px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.14px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3e11181a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-0);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Marski-Blue-ribbon-70
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Marski-Blue-ribbon-80);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Marski-Elephant-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Marski-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Marski-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Marski-Torch-red-60);
|
||||
--Surface-Accent-2: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Surface-Accent-3: var(--Scandic-Green-70);
|
||||
--Surface-Accent-4: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Accent-5: var(--Signature-Marski-Blue-ribbon-90);
|
||||
--Surface-Brand-Accent-Default: var(--Neutral-60);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Marski-Aubergine-100);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Marski-Elephant-10);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Marski-Elephant-10);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Marski-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Neutral-50);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Signature-Marski-Blue-ribbon-40);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Signature-Marski-Torch-red-40);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Signature-Marski-Torch-red-40);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Signature-Marski-Blue-ribbon-90);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Marski-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Marski-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Marski-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
303
packages/design-system/lib/styles/marski.js
Normal file
303
packages/design-system/lib/styles/marski.js
Normal file
@@ -0,0 +1,303 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Marski/Elephant/0': '#F6F6F7',
|
||||
'Signature/Marski/Elephant/10': '#ECEEEF',
|
||||
'Signature/Marski/Elephant/20': '#E0E3E5',
|
||||
'Signature/Marski/Elephant/30': '#B6BDC1',
|
||||
'Signature/Marski/Elephant/40': '#9BA5AB',
|
||||
'Signature/Marski/Elephant/50': '#717F87',
|
||||
'Signature/Marski/Elephant/60': '#576771',
|
||||
'Signature/Marski/Elephant/70': '#495A65',
|
||||
'Signature/Marski/Elephant/80': '#2C414D',
|
||||
'Signature/Marski/Elephant/90': '#1E3441',
|
||||
'Signature/Marski/Elephant/100': '#122937',
|
||||
'Signature/Marski/Blue ribbon/0': '#EEF7FF',
|
||||
'Signature/Marski/Blue ribbon/10': '#D8ECFF',
|
||||
'Signature/Marski/Blue ribbon/20': '#B9DEFF',
|
||||
'Signature/Marski/Blue ribbon/30': '#89CBFF',
|
||||
'Signature/Marski/Blue ribbon/40': '#52AEFF',
|
||||
'Signature/Marski/Blue ribbon/50': '#2A8BFF',
|
||||
'Signature/Marski/Blue ribbon/60': '#136AFD',
|
||||
'Signature/Marski/Blue ribbon/70': '#0D57F3',
|
||||
'Signature/Marski/Blue ribbon/80': '#1043BD',
|
||||
'Signature/Marski/Blue ribbon/90': '#143D94',
|
||||
'Signature/Marski/Blue ribbon/100': '#11265A',
|
||||
'Signature/Marski/Torch red/00': '#FFF0F1',
|
||||
'Signature/Marski/Aubergine/00': '#F9F6F4',
|
||||
'Signature/Marski/Aubergine/10': '#EBE8E6',
|
||||
'Signature/Marski/Aubergine/20': '#CFC4C5',
|
||||
'Signature/Marski/Aubergine/30': '#BAA9AC',
|
||||
'Signature/Marski/Aubergine/40': '#A28D90',
|
||||
'Signature/Marski/Aubergine/50': '#8B7074',
|
||||
'Signature/Marski/Aubergine/60': '#806267',
|
||||
'Signature/Marski/Aubergine/70': '#6A484D',
|
||||
'Signature/Marski/Aubergine/80': '#5B353B',
|
||||
'Signature/Marski/Aubergine/90': '#481D24',
|
||||
'Signature/Marski/Aubergine/100': '#3E1118',
|
||||
'Signature/Marski/Torch red/10': '#FFDDE0',
|
||||
'Signature/Marski/Torch red/20': '#FFC1C7',
|
||||
'Signature/Marski/Torch red/30': '#FF96A0',
|
||||
'Signature/Marski/Torch red/40': '#FF5A6A',
|
||||
'Signature/Marski/Torch red/50': '#FF273B',
|
||||
'Signature/Marski/Torch red/60': '#FB1228',
|
||||
'Signature/Marski/Torch red/70': '#D40115',
|
||||
'Signature/Marski/Torch red/80': '#AE0616',
|
||||
'Signature/Marski/Torch red/90': '#900C18',
|
||||
'Signature/Marski/Torch red/100': '#4F0007',
|
||||
'Title/lg/Letter spacing': 0.48,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.14,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.1,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.32,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.14,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.18,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3E11181A',
|
||||
'Font family/Marski/Title': 'Helvetica Neue',
|
||||
'Font family/Marski/Body': 'Fira sans',
|
||||
'Font family/Marski/Decorative': 'Helvetica Neue',
|
||||
'Title/lg/Font weight': 500,
|
||||
'Title/lg/Font family': 'Helvetica Neue',
|
||||
'Title/md/Font weight': 500,
|
||||
'Title/md/Font family': 'Helvetica Neue',
|
||||
'Title/sm/Font weight': 500,
|
||||
'Title/sm/Font family': 'Helvetica Neue',
|
||||
'Title/sm/LowCase/Font weight': 500,
|
||||
'Title/sm/LowCase/Font family': 'Helvetica Neue',
|
||||
'Title/Decorative/lg/Font weight': 700,
|
||||
'Title/Decorative/lg/Font family': 'Helvetica Neue',
|
||||
'Title/Decorative/md/Font weight': 700,
|
||||
'Title/Decorative/md/Font family': 'Helvetica Neue',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 700,
|
||||
'Title/Overline/sm/Font family': 'Helvetica Neue',
|
||||
'Title/xs/Font weight': 500,
|
||||
'Title/xs/Font family': 'Helvetica Neue',
|
||||
'Title/md/LowCase/Font weight': 500,
|
||||
'Title/md/LowCase/Font family': 'Helvetica Neue',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Helvetica Neue',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#747474',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#122937',
|
||||
'Text/Interactive/Secondary': '#0D57F3',
|
||||
'Text/Interactive/Hover Secondary': '#143D94',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#52AEFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FF5A6A',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FF5A6A',
|
||||
'Background/Primary': '#FCFCFC',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F6F6F7',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#ECEEEF',
|
||||
'Surface/Secondary/Secondary': '#ECEEEF',
|
||||
'Surface/Secondary/Hover': '#e0e2e3',
|
||||
'Surface/Brand/Accent/Default': '#575757',
|
||||
'Surface/Brand/Primary 1/Default': '#122937',
|
||||
'Surface/Brand/Primary 2/Default': '#122937',
|
||||
'Surface/Brand/Primary 3/Default': '#3E1118',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#FB1228',
|
||||
'Surface/Accent/2': '#0D57F3',
|
||||
'Surface/Accent/3': '#256931',
|
||||
'Surface/Accent/4': '#122937',
|
||||
'Surface/Accent/5': '#143D94',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#1043BD',
|
||||
'Icon/Interactive/Default': '#1E3441',
|
||||
'Icon/Interactive/Secondary': '#0D57F3',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#122937',
|
||||
'Component/Button/Brand/Primary/Hover': '#283b48',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#122937',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#122937',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#2C414D',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#122937',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#2C414D',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e7e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#0D57F3',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#1a54e7',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#122937',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#122937',
|
||||
'Component/Button/Inverted/On fill/Hover': '#283b48',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#2C414D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
364
packages/design-system/lib/styles/scandic-go.css
Normal file
364
packages/design-system/lib/styles/scandic-go.css
Normal file
@@ -0,0 +1,364 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.scandic-go {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #c7c2e5;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e8e5e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #402a4b;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #402a4b;
|
||||
--Component-Button-Muted-Hover-inverted: #f2f2f2;
|
||||
--Font-family-Scandic-Go-Body: 'Fira sans';
|
||||
--Font-family-Scandic-Go-Decorative: 'ITC Garamond Std';
|
||||
--Font-family-Scandic-Go-Title: 'Neue Haas Grotesk Display Pro';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Scandic-Go-Beige-00: #fffefa;
|
||||
--Scandic-Go-Beige-0: #faf8f2;
|
||||
--Scandic-Go-Beige-100: #1f1e1d;
|
||||
--Scandic-Go-Beige-10: #f0ede4;
|
||||
--Scandic-Go-Beige-20: #e0dcce;
|
||||
--Scandic-Go-Beige-30: #c8c4b6;
|
||||
--Scandic-Go-Beige-40: #b0aca0;
|
||||
--Scandic-Go-Beige-50: #918f83;
|
||||
--Scandic-Go-Beige-60: #78766d;
|
||||
--Scandic-Go-Beige-70: #63615a;
|
||||
--Scandic-Go-Beige-80: #4f4d49;
|
||||
--Scandic-Go-Beige-90: #373633;
|
||||
--Scandic-Go-Coral-50: #fa3737;
|
||||
--Scandic-Go-Cyan-20: #73fcee;
|
||||
--Scandic-Go-Green-00: #edffe5;
|
||||
--Scandic-Go-Green-100: #162115;
|
||||
--Scandic-Go-Green-10: #cdffb8;
|
||||
--Scandic-Go-Green-20: #a7ff82;
|
||||
--Scandic-Go-Green-30: #85ff52;
|
||||
--Scandic-Go-Green-40: #66e03a;
|
||||
--Scandic-Go-Green-50: #45b222;
|
||||
--Scandic-Go-Green-60: #2e7f18;
|
||||
--Scandic-Go-Green-70: #2a601e;
|
||||
--Scandic-Go-Green-80: #26461f;
|
||||
--Scandic-Go-Green-90: #21331f;
|
||||
--Scandic-Go-Powder-Rose-50: #ecc8c9;
|
||||
--Scandic-Go-Purple-00: #f4f2ff;
|
||||
--Scandic-Go-Purple-100: #2d163a;
|
||||
--Scandic-Go-Purple-10: #dcd7ff;
|
||||
--Scandic-Go-Purple-20: #cabffc;
|
||||
--Scandic-Go-Purple-30: #baa7f7;
|
||||
--Scandic-Go-Purple-40: #ab8ef0;
|
||||
--Scandic-Go-Purple-50: #9c75e6;
|
||||
--Scandic-Go-Purple-60: #8c5bd5;
|
||||
--Scandic-Go-Purple-70: #733cb2;
|
||||
--Scandic-Go-Purple-80: #5e2a8c;
|
||||
--Scandic-Go-Purple-90: #451f61;
|
||||
--Scandic-Go-Yellow-00: #fdffe8;
|
||||
--Scandic-Go-Yellow-100: #3b1300;
|
||||
--Scandic-Go-Yellow-10: #faffc4;
|
||||
--Scandic-Go-Yellow-20: #f8ff9c;
|
||||
--Scandic-Go-Yellow-30: #f5ff73;
|
||||
--Scandic-Go-Yellow-40: #edea39;
|
||||
--Scandic-Go-Yellow-50: #dec614;
|
||||
--Scandic-Go-Yellow-60: #ba8d07;
|
||||
--Scandic-Go-Yellow-70: #966400;
|
||||
--Scandic-Go-Yellow-80: #754403;
|
||||
--Scandic-Go-Yellow-90: #572701;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e4e1d9;
|
||||
--Surface-UI-Fill-Active-Hover: #e6e5e5;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-lg-Text-Transform: unset;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.48px;
|
||||
--Title-Decorative-md-Text-Transform: unset;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: unset;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.48px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.42px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.42px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.36px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #2d163a1a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Scandic-Go-Beige-00);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Scandic-Go-Purple-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(--Scandic-Go-Purple-100);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Scandic-Go-Green-30);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Scandic-Go-Purple-10);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-40);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Scandic-Go-Purple-10);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(--Scandic-Go-Purple-100);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(--Scandic-Go-Purple-10);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Go-Purple-100);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Scandic-Go-Coral-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Scandic-Go-Purple-100);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Scandic-Go-Coral-50);
|
||||
--Surface-Accent-2: var(--Scandic-Go-Cyan-20);
|
||||
--Surface-Accent-3: var(--Scandic-Go-Green-30);
|
||||
--Surface-Accent-4: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Accent-5: var(--Scandic-Go-Powder-Rose-50);
|
||||
--Surface-Brand-Accent-Default: var(--Scandic-Go-Yellow-30);
|
||||
--Surface-Brand-Primary-1-Default: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: var(
|
||||
--Scandic-Go-Yellow-30
|
||||
);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: var(--Scandic-Go-Coral-50);
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: var(--Scandic-Go-Purple-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Scandic-Go-Green-90);
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: var(--Scandic-Go-Green-30);
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Scandic-Go-Purple-100);
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: var(--Scandic-Go-Cyan-20);
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0);
|
||||
--Surface-Secondary-Default: var(--Scandic-Go-Beige-10);
|
||||
--Surface-Secondary-Secondary: var(--Scandic-Go-Beige-10);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Scandic-Go-Purple-100);
|
||||
--Text-Accent-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Text-Brand-OnAccent-Accent: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Scandic-Go-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Scandic-Go-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-2xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
307
packages/design-system/lib/styles/scandic-go.js
Normal file
307
packages/design-system/lib/styles/scandic-go.js
Normal file
@@ -0,0 +1,307 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Scandic Go/Beige/00': '#FFFEFA',
|
||||
'Scandic Go/Beige/0': '#FAF8F2',
|
||||
'Scandic Go/Beige/10': '#F0EDE4',
|
||||
'Scandic Go/Beige/20': '#E0DCCE',
|
||||
'Scandic Go/Beige/30': '#C8C4B6',
|
||||
'Scandic Go/Beige/40': '#B0ACA0',
|
||||
'Scandic Go/Beige/50': '#918F83',
|
||||
'Scandic Go/Beige/60': '#78766D',
|
||||
'Scandic Go/Beige/70': '#63615A',
|
||||
'Scandic Go/Beige/80': '#4F4D49',
|
||||
'Scandic Go/Beige/90': '#373633',
|
||||
'Scandic Go/Beige/100': '#1F1E1D',
|
||||
'Scandic Go/Purple/00': '#F4F2FF',
|
||||
'Scandic Go/Purple/10': '#DCD7FF',
|
||||
'Scandic Go/Purple/20': '#CABFFC',
|
||||
'Scandic Go/Purple/30': '#BAA7F7',
|
||||
'Scandic Go/Purple/40': '#AB8EF0',
|
||||
'Scandic Go/Purple/50': '#9C75E6',
|
||||
'Scandic Go/Purple/60': '#8C5BD5',
|
||||
'Scandic Go/Purple/70': '#733CB2',
|
||||
'Scandic Go/Purple/80': '#5E2A8C',
|
||||
'Scandic Go/Purple/90': '#451F61',
|
||||
'Scandic Go/Purple/100': '#2D163A',
|
||||
'Scandic Go/Yellow/00': '#FDFFE8',
|
||||
'Scandic Go/Yellow/10': '#FAFFC4',
|
||||
'Scandic Go/Yellow/20': '#F8FF9C',
|
||||
'Scandic Go/Yellow/30': '#F5FF73',
|
||||
'Scandic Go/Yellow/40': '#EDEA39',
|
||||
'Scandic Go/Yellow/50': '#DEC614',
|
||||
'Scandic Go/Yellow/60': '#BA8D07',
|
||||
'Scandic Go/Yellow/70': '#966400',
|
||||
'Scandic Go/Yellow/80': '#754403',
|
||||
'Scandic Go/Yellow/90': '#572701',
|
||||
'Scandic Go/Yellow/100': '#3B1300',
|
||||
'Scandic Go/Green/00': '#EDFFE5',
|
||||
'Scandic Go/Green/10': '#CDFFB8',
|
||||
'Scandic Go/Green/20': '#A7FF82',
|
||||
'Scandic Go/Green/30': '#85FF52',
|
||||
'Scandic Go/Green/40': '#66E03A',
|
||||
'Scandic Go/Green/50': '#45B222',
|
||||
'Scandic Go/Green/60': '#2E7F18',
|
||||
'Scandic Go/Green/70': '#2A601E',
|
||||
'Scandic Go/Green/80': '#26461F',
|
||||
'Scandic Go/Green/90': '#21331F',
|
||||
'Scandic Go/Green/100': '#162115',
|
||||
'Scandic Go/Cyan/20': '#73FCEE',
|
||||
'Scandic Go/Coral/50': '#FA3737',
|
||||
'Scandic Go/Powder Rose/50': '#ECC8C9',
|
||||
'Title/lg/Letter spacing': 0.48,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.42,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.32,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'unset',
|
||||
'Title/Decorative/md/Letter spacing': 0.48,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'unset',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'unset',
|
||||
'Title/sm/LowCase/Letter spacing': 0.42,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.36,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Utilities/Gradients/10': '#2D163A1A',
|
||||
'Font family/Scandic Go/Title': 'Neue Haas Grotesk Display Pro',
|
||||
'Font family/Scandic Go/Body': 'Fira sans',
|
||||
'Font family/Scandic Go/Decorative': 'ITC Garamond Std',
|
||||
'Title/lg/Font weight': 500,
|
||||
'Title/lg/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/md/Font weight': 500,
|
||||
'Title/md/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/sm/Font weight': 500,
|
||||
'Title/sm/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/sm/LowCase/Font weight': 500,
|
||||
'Title/sm/LowCase/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/Decorative/lg/Font weight': 500,
|
||||
'Title/Decorative/lg/Font family': 'ITC Garamond Std',
|
||||
'Title/Decorative/md/Font weight': 500,
|
||||
'Title/Decorative/md/Font family': 'ITC Garamond Std',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/xs/Font weight': 500,
|
||||
'Title/xs/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/md/LowCase/Font weight': 500,
|
||||
'Title/md/LowCase/Font family': 'Brandon Text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#2D163A',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#2D163A',
|
||||
'Text/Accent Secondary': '#5E2A8C',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#2D163A',
|
||||
'Text/Interactive/Secondary': '#5E2A8C',
|
||||
'Text/Interactive/Hover Secondary': '#2D163A',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#2D163A',
|
||||
'Text/Brand/OnAccent/Default': '#2D163A',
|
||||
'Text/Brand/OnAccent/Accent': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Default': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#2D163A',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#DCD7FF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#DCD7FF',
|
||||
'Background/Primary': '#FFFEFA',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#DCD7FF',
|
||||
'Surface/Primary/OnSurface/Default': '#FAF8F2',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F0EDE4',
|
||||
'Surface/Secondary/Secondary': '#F0EDE4',
|
||||
'Surface/Secondary/Hover': '#e4e1d9',
|
||||
'Surface/Brand/Accent/Default': '#F5FF73',
|
||||
'Surface/Brand/Primary 1/Default': '#DCD7FF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#2D163A',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FA3737',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#F5FF73',
|
||||
'Surface/Brand/Primary 2/Default': '#21331F',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#85FF52',
|
||||
'Surface/Brand/Primary 3/Default': '#2D163A',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#DCD7FF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#73FCEE',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#e6e5e5',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#FA3737',
|
||||
'Surface/Accent/2': '#73FCEE',
|
||||
'Surface/Accent/3': '#85FF52',
|
||||
'Surface/Accent/4': '#DCD7FF',
|
||||
'Surface/Accent/5': '#ECC8C9',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#FA3737',
|
||||
'Icon/Interactive/Default': '#2D163A',
|
||||
'Icon/Interactive/Secondary': '#5E2A8C',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#57514E',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#DCD7FF',
|
||||
'Component/Button/Brand/Primary/Hover': '#c7c2e5',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#2D163A',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#5E2A8C',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#5E2A8C',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e8e5e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#2D163A',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#402a4b',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#DCD7FF',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#2D163A',
|
||||
'Component/Button/Inverted/On fill/Hover': '#402a4b',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#2D163A',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#2D163A',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#85FF52',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#DCD7FF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#8C8C8C',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#f2f2f2',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#5E2A8C',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF00',
|
||||
}
|
||||
382
packages/design-system/lib/styles/scandic.css
Normal file
382
packages/design-system/lib/styles/scandic.css
Normal file
@@ -0,0 +1,382 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.scandic {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #ba1721;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #eee4e5;
|
||||
--Component-Button-Brand-Tertiary-Hover: #601e2d;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #601e2d;
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Scandic-Beige-00: #faf6f2;
|
||||
--Scandic-Beige-100: #291710;
|
||||
--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-Blue-00: #e8f6ff;
|
||||
--Scandic-Blue-100: #0d1440;
|
||||
--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-Green-00: #f3fce8;
|
||||
--Scandic-Green-100: #091f16;
|
||||
--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-Grey-00: #f9f6f4;
|
||||
--Scandic-Grey-100: #26201e;
|
||||
--Scandic-Grey-10: #ebe8e6;
|
||||
--Scandic-Grey-20: #d6d2d0;
|
||||
--Scandic-Grey-30: #c2bdba;
|
||||
--Scandic-Grey-40: #a8a4a2;
|
||||
--Scandic-Grey-50: #8c8987;
|
||||
--Scandic-Grey-60: #787472;
|
||||
--Scandic-Grey-70: #635f5d;
|
||||
--Scandic-Grey-80: #57514e;
|
||||
--Scandic-Grey-90: #403937;
|
||||
--Scandic-Peach-00: #fff3ed;
|
||||
--Scandic-Peach-100: #4d0f25;
|
||||
--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-Red-00: #ffebeb;
|
||||
--Scandic-Red-100: #4d001b;
|
||||
--Scandic-Red-10: #f7c1c2;
|
||||
--Scandic-Red-20: #f79499;
|
||||
--Scandic-Red-30: #f26b74;
|
||||
--Scandic-Red-40: #ed4251;
|
||||
--Scandic-Red-50: #e32034;
|
||||
--Scandic-Red-70: #ad0015;
|
||||
--Scandic-Red-80: #8d0011;
|
||||
--Scandic-Red-90: #6d000d;
|
||||
--Scandic-Red-Default: #cd0921;
|
||||
--Scandic-Yellow-00: #fff8e3;
|
||||
--Scandic-Yellow-100: #301508;
|
||||
--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;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #dad4cf;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.2px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.64px;
|
||||
--Title-Decorative-lg-Text-Transform: unset;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.48px;
|
||||
--Title-Decorative-md-Text-Transform: unset;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.64px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: uppercase;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: uppercase;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: uppercase;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.06px;
|
||||
--Title-xs-Text-Transform: uppercase;
|
||||
--Utilities-Gradients-10: #f2ece61a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Scandic-Beige-00);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Scandic-Beige-20);
|
||||
--Border-Divider-Accent: var(--Scandic-Peach-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Scandic-Peach-40);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(--Scandic-Peach-90);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Scandic-Red-70);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Scandic-Peach-80);
|
||||
--Border-Divider-Default: var(--Scandic-Beige-20);
|
||||
--Border-Divider-Subtle: var(--Scandic-Beige-10);
|
||||
--Border-Intense: var(--Scandic-Beige-40);
|
||||
--Border-Interactive-Default: var(--Scandic-Beige-50);
|
||||
--Border-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Scandic-Grey-100);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Scandic-Beige-70);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Scandic-Red-Default);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(--Scandic-Red-100);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Scandic-Grey-100);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Red-90);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Scandic-Peach-70);
|
||||
--Icon-Default: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Scandic-Grey-100);
|
||||
--Icon-Interactive-Default: var(--Scandic-Red-100);
|
||||
--Icon-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
|
||||
--Icon-Interactive-Secondary: var(--Scandic-Peach-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Scandic-Red-80);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-60);
|
||||
--Surface-Accent-3: var(--Scandic-Green-70);
|
||||
--Surface-Accent-4: var(--Scandic-Yellow-50);
|
||||
--Surface-Accent-5: var(--Scandic-Blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Scandic-Peach-30);
|
||||
--Surface-Brand-Primary-1-Default: var(--Scandic-Peach-10);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: var(--Scandic-Peach-80);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: var(--Scandic-Peach-10);
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: var(--Scandic-Peach-10);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Scandic-Grey-60);
|
||||
--Surface-Feedback-Neutral: var(--Scandic-Grey-10);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Scandic-Grey-10);
|
||||
--Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
|
||||
--Surface-Primary-OnSurface-Default: var(--Scandic-Beige-00);
|
||||
--Surface-Secondary-Default: var(--Scandic-Beige-10);
|
||||
--Surface-Secondary-Secondary: var(--Scandic-Beige-20);
|
||||
--Surface-UI-Fill-Active: var(--Scandic-Peach-100);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Scandic-Grey-10);
|
||||
--Surface-UI-Fill-Intense: var(--Scandic-Grey-100);
|
||||
--Tag-Font-family: var(--Font-family-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Scandic-Red-Default);
|
||||
--Text-Accent-Secondary: var(--Scandic-Peach-80);
|
||||
--Text-Brand-OnAccent-Accent: var(--Scandic-Peach-80);
|
||||
--Text-Brand-OnAccent-Default: var(--Scandic-Grey-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Scandic-Red-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Scandic-Red-Default);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Scandic-Grey-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Scandic-Red-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Scandic-Peach-10);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Scandic-Peach-50);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Scandic-Peach-10);
|
||||
--Text-Default: var(--Scandic-Grey-100);
|
||||
--Text-Heading: var(--Scandic-Red-100);
|
||||
--Text-Interactive-Default: var(--Scandic-Peach-100);
|
||||
--Text-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Scandic-Grey-100);
|
||||
--Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100);
|
||||
--Text-Interactive-Placeholder: var(--Scandic-Grey-60);
|
||||
--Text-Interactive-Secondary: var(--Scandic-Peach-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Scandic-Grey-80);
|
||||
--Text-Tertiary: var(--Scandic-Grey-60);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Black);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Black);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Black);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Black);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
333
packages/design-system/lib/styles/scandic.js
Normal file
333
packages/design-system/lib/styles/scandic.js
Normal file
@@ -0,0 +1,333 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Scandic/Grey/00': '#F9F6F4',
|
||||
'Scandic/Grey/10': '#EBE8E6',
|
||||
'Scandic/Grey/20': '#D6D2D0',
|
||||
'Scandic/Grey/30': '#C2BDBA',
|
||||
'Scandic/Grey/40': '#A8A4A2',
|
||||
'Scandic/Grey/50': '#8C8987',
|
||||
'Scandic/Grey/60': '#787472',
|
||||
'Scandic/Grey/70': '#635F5D',
|
||||
'Scandic/Grey/80': '#57514E',
|
||||
'Scandic/Grey/90': '#403937',
|
||||
'Scandic/Grey/100': '#26201E',
|
||||
'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/Default': '#CD0921',
|
||||
'Scandic/Red/70': '#AD0015',
|
||||
'Scandic/Red/80': '#8D0011',
|
||||
'Scandic/Red/90': '#6D000D',
|
||||
'Scandic/Red/100': '#4D001B',
|
||||
'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/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/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',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'uppercase',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.07,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/lg/Letter spacing': 0.64,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'unset',
|
||||
'Title/Decorative/md/Letter spacing': 0.48,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'unset',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.64,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.07,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.06,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'uppercase',
|
||||
'Title/md/Text-Transform': 'uppercase',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.2,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Utilities/Gradients/10': '#F2ECE61A',
|
||||
'Title/lg/Font weight': 900,
|
||||
'Title/lg/Font family': 'Brandon Text',
|
||||
'Title/md/Font weight': 900,
|
||||
'Title/md/Font family': 'Brandon Text',
|
||||
'Title/sm/Font weight': 900,
|
||||
'Title/sm/Font family': 'Brandon Text',
|
||||
'Title/sm/LowCase/Font weight': 450,
|
||||
'Title/sm/LowCase/Font family': 'Brandon Text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Biro Script Plus',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Biro Script Plus',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 450,
|
||||
'Title/Overline/sm/Font family': 'Brandon Text',
|
||||
'Title/xs/Font weight': 900,
|
||||
'Title/xs/Font family': 'Brandon Text',
|
||||
'Title/md/LowCase/Font weight': 450,
|
||||
'Title/md/LowCase/Font family': 'Brandon Text',
|
||||
'Tag/Font weight': 450,
|
||||
'Tag/Font family': 'Brandon Text',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#4D001B',
|
||||
'Text/Default': '#26201E',
|
||||
'Text/Secondary': '#57514E',
|
||||
'Text/Tertiary': '#787472',
|
||||
'Text/Accent Primary': '#CD0921',
|
||||
'Text/Accent Secondary': '#8F4350',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#4D0F25',
|
||||
'Text/Interactive/Secondary': '#8F4350',
|
||||
'Text/Interactive/Hover Secondary': '#4D0F25',
|
||||
'Text/Interactive/Disabled': '#A8A4A2',
|
||||
'Text/Interactive/Focus': '#26201E',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#787472',
|
||||
'Text/Brand/OnAccent/Heading': '#4D001B',
|
||||
'Text/Brand/OnAccent/Default': '#26201E',
|
||||
'Text/Brand/OnAccent/Accent': '#8F4350',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#4D001B',
|
||||
'Text/Brand/OnPrimary 1/Default': '#26201E',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#CD0921',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#F7E1D5',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#F7E1D5',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#DE9490',
|
||||
'Background/Primary': '#FAF6F2',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#F7E1D5',
|
||||
'Surface/Primary/OnSurface/Default': '#FAF6F2',
|
||||
'Surface/Primary/Disabled': '#EBE8E6',
|
||||
'Surface/Secondary/Default': '#F2ECE6',
|
||||
'Surface/Secondary/Secondary': '#E3D9D1',
|
||||
'Surface/Secondary/Hover': '#dad4cf',
|
||||
'Surface/Brand/Accent/Default': '#F0C1B6',
|
||||
'Surface/Brand/Primary 1/Default': '#F7E1D5',
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#CD0921',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#8F4350',
|
||||
'Surface/Brand/Primary 2/Default': '#CD0921',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#F7E1D5',
|
||||
'Surface/Brand/Primary 3/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#F7E1D5',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#CD0921',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#26201E',
|
||||
'Surface/UI Fill/Active': '#4D0F25',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#EBE8E6',
|
||||
'Surface/Accent/1': '#8D0011',
|
||||
'Surface/Accent/2': '#3F6DBD',
|
||||
'Surface/Accent/3': '#256931',
|
||||
'Surface/Accent/4': '#E59515',
|
||||
'Surface/Accent/5': '#18347F',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#787472',
|
||||
'Surface/Feedback/Neutral': '#EBE8E6',
|
||||
'Border/Default': '#E3D9D1',
|
||||
'Border/Intense': '#B8A79A',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#57514E',
|
||||
'Icon/Intense': '#26201E',
|
||||
'Icon/Accent': '#B05B65',
|
||||
'Icon/Interactive/Default': '#4D001B',
|
||||
'Icon/Interactive/Secondary': '#8F4350',
|
||||
'Icon/Interactive/Disabled': '#A8A4A2',
|
||||
'Icon/Interactive/Placeholder': '#787472',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#57514E',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#CD0921',
|
||||
'Component/Button/Brand/Primary/Hover': '#ba1721',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#8F4350',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#8F4350',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#eee4e5',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#4D001B',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#601e2d',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#4D001B',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#4D001B',
|
||||
'Component/Button/Inverted/On fill/Hover': '#601e2d',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#9C8A7E',
|
||||
'Border/Divider/Default': '#E3D9D1',
|
||||
'Border/Divider/Subtle': '#F2ECE6',
|
||||
'Border/Divider/Accent': '#F0C1B6',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#E9ABA3',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#642636',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#AD0015',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#8F4350',
|
||||
'Border/Interactive/Selected': '#6B584D',
|
||||
'Border/Interactive/Focus': '#26201E',
|
||||
'Border/Interactive/Disabled': '#A8A4A2',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#1F1C1B1A',
|
||||
'Component/Button/Muted/On fill/Default': '#26201E',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#6D000D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF00',
|
||||
}
|
||||
@@ -1,318 +0,0 @@
|
||||
/* 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);
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
/* 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