433 lines
22 KiB
CSS
433 lines
22 KiB
CSS
:root {
|
|
--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-textDecoration: "none";
|
|
--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-textDecoration: "none";
|
|
--typography-Body-Underline-fontFamily: "fira sans";
|
|
--typography-Body-Underline-fontSize: 16px;
|
|
--typography-Body-Underline-letterSpacing: 1.2000000476837158%;
|
|
--typography-Body-Underline-lineHeight: 150%;
|
|
--typography-Body-Underline-textDecoration: "underline";
|
|
--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-textDecoration: "none";
|
|
--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-textDecoration: "none";
|
|
--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-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-textDecoration: "underline";
|
|
--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-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-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-textDecoration: "none";
|
|
--typography-Preamble-Desktop-fontSize: 20px;
|
|
--typography-Preamble-fontFamily: "fira sans";
|
|
--typography-Preamble-fontWeight: "regular";
|
|
--typography-Preamble-letterSpacing: 1%;
|
|
--typography-Preamble-lineHeight: 139.9999976158142%;
|
|
--typography-Preamble-Mobile-fontSize: 18px;
|
|
--typography-Preamble-textDecoration: "none";
|
|
--typography-Script-1-Desktop-fontSize: 32px;
|
|
--typography-Script-1-fontFamily: "biro script plus";
|
|
--typography-Script-1-fontWeight: "regular";
|
|
--typography-Script-1-letterSpacing: 2%;
|
|
--typography-Script-1-lineHeight: 110.00000238418579%;
|
|
--typography-Script-1-Mobile-fontSize: 24px;
|
|
--typography-Script-2-Desktop-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-Subtitle-1-Desktop-fontSize: 24px;
|
|
--typography-Subtitle-1-fontFamily: "fira sans";
|
|
--typography-Subtitle-1-letterSpacing: 1%;
|
|
--typography-Subtitle-1-lineHeight: 120.00000476837158%;
|
|
--typography-Subtitle-1-Mobile-fontSize: 20px;
|
|
--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-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-textDecoration: "none";
|
|
--typography-Title-2-Desktop-fontSize: 48px;
|
|
--typography-Title-2-fontFamily: "brandon text";
|
|
--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-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-textDecoration: "none";
|
|
--typography-Title-4-Desktop-fontSize: 28px;
|
|
--typography-Title-4-fontFamily: "brandon text";
|
|
--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-textDecoration: "none";
|
|
--typography-Title-5-Desktop-fontSize: 24px;
|
|
--typography-Title-5-fontFamily: "brandon text";
|
|
--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-textDecoration: "none";
|
|
}
|
|
:root {
|
|
--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-Fill-Disabled: var(--UI-Grey-20);
|
|
--Base-Button-Inverted-Fill-Hover: var(--Scandic-Beige-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-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-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-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-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-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-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-Normal: var(--Scandic-Red-100);
|
|
--Primary-Dim-On-Surface-Accent: var(--Scandic-Peach-80);
|
|
--Primary-Dim-On-Surface-Text: var(--Scandic-Red-100);
|
|
--Primary-Dim-Surface-Normal: var(--Scandic-Peach-30);
|
|
--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-Normal: var(--Scandic-Peach-10);
|
|
--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-Text: var(--UI-Opacity-White-100);
|
|
--Primary-Strong-Surface-Normal: var(--Scandic-Red-60);
|
|
--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-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-Text: var(--Scandic-Green-90);
|
|
--Secondary-Light-Surface-Normal: var(--Scandic-Green-20);
|
|
--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-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-Text: var(--Scandic-Blue-100);
|
|
--Tertiary-Light-Surface-Normal: var(--Scandic-Yellow-10);
|
|
--UI-Input-Controls-Border-Disabled: var(--UI-Grey-40);
|
|
--UI-Input-Controls-Border-Focus: var(--Scandic-Blue-80);
|
|
--UI-Input-Controls-Border-Normal: var(--Scandic-Beige-50);
|
|
--UI-Input-Controls-Fill-Selected: var(--Scandic-Blue-80);
|
|
--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);
|
|
}
|
|
:root {
|
|
--Corner-Radius-Large: 12px;
|
|
--Corner-Radius-Medium: 8px;
|
|
--Corner-Radius-Rounded: 250px;
|
|
--Layout-Desktop-Margin-Margin-min: 40px;
|
|
--Layout-Mobile-Margin-Margin-min: 16px;
|
|
--Layout-Tablet-Margin-Margin-min: 24px;
|
|
}
|
|
:root {
|
|
--Scandic-Beige-00: #faf6f2;
|
|
--Scandic-Beige-10: #f2ece6;
|
|
--Scandic-Beige-20: #e3d9d1;
|
|
--Scandic-Beige-40: #b8a79a;
|
|
--Scandic-Beige-50: #9c8a7e;
|
|
--Scandic-Beige-70: #6b584d;
|
|
--Scandic-Blue-00: #e8f6ff;
|
|
--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-Pale-Peach: #f7e1d5;
|
|
--Scandic-Brand-Scandic-Red: #cd0921;
|
|
--Scandic-Brand-Warm-White: #faf6f2;
|
|
--Scandic-Green-00: #f3fce8;
|
|
--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-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-70: #b05b65;
|
|
--Scandic-Peach-80: #8f4350;
|
|
--Scandic-Peach-90: #642636;
|
|
--Scandic-Peach-100: #4d0f25;
|
|
--Scandic-Red-00: #ffebeb;
|
|
--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-50: #e59515;
|
|
--Scandic-Yellow-60: #d17308;
|
|
--UI-Grey-00: #f9f6f4;
|
|
--UI-Grey-10: #ebe8e6;
|
|
--UI-Grey-20: #d6d2d0;
|
|
--UI-Grey-30: #c2bdba;
|
|
--UI-Grey-40: #a8a4a2;
|
|
--UI-Grey-60: #787472;
|
|
--UI-Grey-80: #57514e;
|
|
--UI-Grey-100: #26201e;
|
|
--UI-Opacity-Almost-Black-10: #1f1c1b1a;
|
|
--UI-Opacity-Almost-Black-30: #1f1c1b4d;
|
|
--UI-Opacity-White-0: #ffffff00;
|
|
--UI-Opacity-White-10: #ffffff1a;
|
|
--UI-Opacity-White-20: #ffffff33;
|
|
--UI-Opacity-White-30: #ffffff4d;
|
|
--UI-Opacity-White-100: #ffffff;
|
|
}
|
|
:root {
|
|
--Main-Brand-Burgundy: #4d001b;
|
|
--Main-Brand-PalePeach: #f7e1d5;
|
|
--Main-Brand-WarmWhite: #faf6f2;
|
|
--Main-Grey-10: #ebe8e6;
|
|
--Main-Grey-40: #a8a4a2;
|
|
--Main-Grey-60: #787472;
|
|
--Main-Grey-100: #26201e;
|
|
--Main-Grey-White: #ffffff;
|
|
--Main-Yellow-100: #301508;
|
|
}
|