diff --git a/packages/design-system/lib/design-system-new-deprecated.css b/packages/design-system/lib/design-system-new-deprecated.css index 8b1cad41e..4b179e3a7 100644 --- a/packages/design-system/lib/design-system-new-deprecated.css +++ b/packages/design-system/lib/design-system-new-deprecated.css @@ -1,158 +1,86 @@ :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; @@ -160,9 +88,6 @@ --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; @@ -170,18 +95,13 @@ --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'; @@ -190,50 +110,33 @@ --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'; } :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); @@ -249,35 +152,20 @@ --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); @@ -286,9 +174,6 @@ --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); @@ -307,40 +192,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 ); @@ -368,11 +223,7 @@ --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); @@ -391,13 +242,8 @@ --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); @@ -415,14 +261,6 @@ ); --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 ); @@ -447,13 +285,8 @@ --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); @@ -469,16 +302,6 @@ --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 ); @@ -503,20 +326,12 @@ --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); @@ -535,28 +350,8 @@ --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; @@ -572,74 +367,13 @@ --Spacing-x-quarter: 2px; } :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; @@ -648,17 +382,10 @@ --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; @@ -667,24 +394,17 @@ --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; @@ -693,178 +413,32 @@ --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; } :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; }