@helsenorge/designsystem-react 15.7.2 → 16.0.0

package/lib/scss/supernova/styles/colors.css

@@ -8,8 +8,8 @@
  */
 
 :root {
-  --color-action-graphics-onlight: #188097;
-  --color-action-graphics-onlight-hover: #126f87;
+  --color-action-graphics-dark-normal: #188097;
+  --color-action-graphics-dark-hover: #126f87;
   --core-color-banana-50: #fdf8df;
   --core-color-banana-100: #fcf2bf;
   --core-color-banana-200: #f9ea9f;
@@ -72,138 +72,135 @@
   --core-color-plum-900: #3c1471;
   --core-color-black: #000000;
   --core-color-white: #ffffff;
-  --color-action-border-ondark: #ffffff;
-  --color-action-text-ondark: #ffffff;
-  --color-action-graphics-ondark: #ffffff;
-  --color-notification-background-info: #e4f7f9;
-  --color-notification-background-error: #fff2ea;
-  --color-notification-background-warning: #fdf8df;
-  --color-notification-background-success: #e6f8ee;
-  --color-notification-border-info: #08667c;
-  --color-notification-border-error: #a31f0e;
-  --color-notification-border-warning: #ab7c00;
-  --color-notification-border-success: #078141;
-  --color-notification-graphics-info: #08667c;
-  --color-notification-graphics-error: #a31f0e;
-  --color-notification-graphics-warning: #ab7c00;
-  --color-notification-graphics-success: #078141;
-  --color-notification-status-info: #188097;
-  --color-notification-status-error: #c83521;
-  --color-notification-status-warning: #ebc840;
-  --color-notification-status-success: #099150;
-  --color-disabled-background: #d6d4d3;
+  --color-action-border-light-normal: #ffffff;
+  --color-action-text-light-normal: #ffffff;
+  --color-action-graphics-light-normal: #ffffff;
+  --color-notification-info-background: #e4f7f9;
+  --color-notification-error-background: #fff2ea;
+  --color-notification-warning-background: #fdf8df;
+  --color-notification-success-background: #e6f8ee;
+  --color-notification-info-border: #08667c;
+  --color-notification-error-border: #a31f0e;
+  --color-notification-warning-border: #ab7c00;
+  --color-notification-success-border: #078141;
+  --color-notification-info-graphics: #08667c;
+  --color-notification-error-graphics: #a31f0e;
+  --color-notification-warning-graphics: #ab7c00;
+  --color-notification-success-graphics: #078141;
+  --color-notification-info: #188097;
+  --color-notification-error: #c83521;
+  --color-notification-warning: #ebc840;
+  --color-notification-success: #099150;
+  --color-disabled-background-light: #d6d4d3;
   --color-disabled-text: #62625f;
-  --color-disabled-border: #7d7c79;
-  --color-destructive-background-emphasized: #f7e1d2;
-  --color-destructive-background-normal: #fff2ea;
-  --color-destructive-graphics-normal: #c83521;
-  --color-destructive-graphics-hover: #b62e1c;
-  --color-destructive-text-normal: #b62e1c;
-  --color-destructive-text-hover: #a31f0e;
-  --color-help-background-normal: #f4ecfe;
-  --color-help-graphics-normal: #5c27a1;
-  --color-help-border-normal: #5c27a1;
-  --color-disabled-graphics: #62625f;
-  --color-destructive-border-normal: #c83521;
-  --color-action-border-ondark-hover: #e4f7f9;
-  --color-action-graphics-ondark-hover: #e4f7f9;
+  --color-disabled-border-dark: #7d7c79;
+  --color-destructive-background-light-plus1-hover: #f7e1d2;
+  --color-destructive-background-light-plus1-normal: #fff2ea;
+  --color-destructive-graphics-dark-normal: #c83521;
+  --color-destructive-graphics-dark-hover: #b62e1c;
+  --color-destructive-text-dark-normal: #b62e1c;
+  --color-destructive-text-dark-hover: #a31f0e;
+  --color-help-background: #f4ecfe;
+  --color-help-graphics: #5c27a1;
+  --color-help-border: #5c27a1;
+  --color-disabled-graphics-dark: #62625f;
+  --color-destructive-border-dark-normal: #c83521;
+  --color-action-border-light-hover: #e4f7f9;
+  --color-action-graphics-light-hover: #e4f7f9;
 
   /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
   --color-action-background-transparent-onlight-hover: #126f8721;
 
   /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
-  --color-action-background-transparent-onlight-hoverselected: #126f872b;
-  --color-action-border-ondark-focus: #ffffff;
-  --color-disabled-border-ondark: #d6d4d3;
-  --color-disabled-graphics-ondark: #d6d4d3;
-  --color-disabled-text-ondark: #ffffff;
-  --color-action-text-onlight: #126f87;
-  --color-action-text-onlight-hover: #08667c;
-  --color-action-border-onlight: #188097;
-  --color-action-border-onlight-hover: #08667c;
-  --color-action-border-onlight-focus: #000000;
-  --color-action-background-ondark: #ffffff;
-  --color-action-background-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-selected: #cae7ed;
-  --color-action-background-ondark-hoverselected: #afdae3;
-  --color-action-background-onlight: #188097;
-  --color-action-background-onlight-hover: #08667c;
+  --color-action-background-transparent-onlight-plus1-hover: #126f872b;
+  --color-action-border-light-focus: #ffffff;
+  --color-disabled-border-light: #d6d4d3;
+  --color-disabled-graphics-light: #d6d4d3;
+  --color-action-text-dark-normal: #126f87;
+  --color-action-text-dark-hover: #08667c;
+  --color-action-border-dark-normal: #188097;
+  --color-action-border-dark-plus1-hover: #08667c;
+  --color-action-border-dark-focus: #000000;
+  --color-action-background-light-normal: #ffffff;
+  --color-action-background-light-hover: #e4f7f9;
+  --color-action-background-light-selected: #cae7ed;
+  --color-action-background-light-active: #cae7ed;
+  --color-action-background-dark-normal: #188097;
+  --color-action-background-dark-plus1-hover: #08667c;
 
   /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
-  --color-action-background-transparent-ondark-hover: #00000026;
-  --color-action-background-transparent-onmulticolor-hover: #00000013;
+  --color-action-background-transparent-multi-onlight-hover: #00000013;
 
   /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
-  --color-action-background-transparent-ondark-hoverselected: #000000bf;
-  --color-action-background-transparent-onmulticolor-active: #00000026;
-  --color-base-background-blueberry: #e4f7f9;
-  --color-base-background-cherry: #fff2ea;
-  --color-base-background-neutral: #f5f3f3;
-  --color-base-background-white: #ffffff;
-  --color-base-background-dark-blueberry: #188097;
-  --color-base-background-dark-cherry: #c83521;
-  --color-base-background-dark-neutral: #2b2c2b;
-  --color-base-text-onlight: #000000;
-  --color-base-text-ondark: #ffffff;
-  --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #7d7c79;
-  --color-base-border-onlight-emphasized: #62625f;
-  --color-base-graphics-onlight: #000000;
-  --color-base-graphics-ondark: #ffffff;
-  --brandcolor-white: #ffffff;
-  --brandcolor-black: #000000;
-  --brandcolor-neutral-verylight: #f5f3f3;
-  --brandcolor-neutral-light: #eae7e7;
-  --brandcolor-neutral-mediumlight: #d6d4d3;
-  --brandcolor-neutral-medium: #989693;
-  --brandcolor-neutral-dark: #62625f;
-  --brandcolor-neutral-verydark: #2b2c2b;
-  --brandcolor-blueberry-verylight: #e4f7f9;
-  --brandcolor-blueberry-light: #cae7ed;
-  --brandcolor-blueberry-mediumlight: #afdae3;
-  --brandcolor-blueberry-medium: #188097;
-  --brandcolor-blueberry-mediumdark: #126f87;
-  --brandcolor-blueberry-dark: #08667c;
-  --brandcolor-cherry-verylight: #fff2ea;
-  --brandcolor-cherry-light: #f7e1d2;
-  --brandcolor-cherry-medium: #c83521;
-  --brandcolor-cherry-mediumdark: #b62e1c;
-  --brandcolor-cherry-dark: #a31f0e;
+  --color-action-background-transparent-multi-ondark-hover: #00000026;
+  --color-base-blueberry-background-light: #e4f7f9;
+  --color-base-cherry-background-light: #fff2ea;
+  --color-base-neutral-background-light: #f5f3f3;
+  --color-base-background-light: #ffffff;
+  --color-base-blueberry-background-dark: #188097;
+  --color-base-cherry-background-dark: #c83521;
+  --color-base-neutral-background-dark: #2b2c2b;
+  --color-base-text-dark: #000000;
+  --color-base-text-light: #ffffff;
+  --color-base-border-light-ondark: #d6d4d3;
+  --color-base-border-dark: #7d7c79;
+  --color-base-emphasized-border-dark: #62625f;
+  --color-base-graphics-dark: #000000;
+  --color-base-graphics-light: #ffffff;
+  --brand-color-white: #ffffff;
+  --brand-color-black: #000000;
+  --brand-color-neutral-verylight: #f5f3f3;
+  --brand-color-neutral-light: #eae7e7;
+  --brand-color-neutral-mediumlight: #d6d4d3;
+  --brand-color-neutral-medium: #989693;
+  --brand-color-neutral-dark: #62625f;
+  --brand-color-neutral-verydark: #2b2c2b;
+  --brand-color-blueberry-verylight: #e4f7f9;
+  --brand-color-blueberry-light: #cae7ed;
+  --brand-color-blueberry-mediumlight: #afdae3;
+  --brand-color-blueberry-medium: #188097;
+  --brand-color-blueberry-mediumdark: #126f87;
+  --brand-color-blueberry-dark: #08667c;
+  --brand-color-cherry-verylight: #fff2ea;
+  --brand-color-cherry-light: #f7e1d2;
+  --brand-color-cherry-medium: #c83521;
+  --brand-color-cherry-mediumdark: #b62e1c;
+  --brand-color-cherry-dark: #a31f0e;
 
   /* Placeholdertext in input- and textarea-controls */
-  --color-placeholder-text-onlight: #62625f;
-  --color-base-border-onlight-subtle: #d6d4d3;
-  --color-base-border-neutral: #d6d4d3;
-  --color-base-border-blueberry: #afdae3;
-  --color-base-border-cherry: #eec0a5;
+  --color-placeholder-text-dark: #62625f;
+  --color-base-border-light: #d6d4d3;
+  --color-base-neutral-border-light: #d6d4d3;
+  --color-base-blueberry-border-light: #afdae3;
+  --color-base-cherry-border-light: #eec0a5;
 
   /* In a few cases where coloured text is required to stress the semantics of an information notification text */
-  --color-notification-text-info: #08667c;
+  --color-notification-info-text: #08667c;
 
   /* In a few cases where coloured text is required to stress the semantics of an error notification text */
-  --color-notification-text-error: #a31f0e;
-  --color-notification-text-warning: #916500;
-  --color-notification-text-success: #078141;
-  --color-base-border-neutral-emphasized: #bdbab9;
-  --color-notification-status-draft: #7d7c79;
+  --color-notification-error-text: #a31f0e;
+  --color-notification-warning-text: #916500;
+  --color-notification-success-text: #078141;
+  --color-base-neutral-border-light-plus1: #bdbab9;
+  --color-notification-draft: #7d7c79;
 
   /* hoverstate on help components on white background */
   --color-help-background-transparent-onlight-hover: #6c36b31a;
-  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-background-transparent-onlight-hoverselected: #6c38b333;
   --color-help-background-transparent-onlight-active: #6c38b34d;
   --color-action-background-transparent-onlight-active: #126f874d;
 
   /* Background outside of modal and bottomsheet to mask inactive screen-area */
   --color-shadow-pagemask: #2c2b2cb8;
   --color-help-border-subtle-wcag: #9862df;
-  --color-help-graphics-dark: #4c1b8c;
-  --color-help-border-dark: #4c1b8c;
-  --color-help-graphics-verydark: #3c1471;
-  --color-help-border-verydark: #3c1471;
-  --color-action-background-onlight-active: #06596c;
+  --color-help-graphics-plus1: #4c1b8c;
+  --color-help-border-plus1: #4c1b8c;
+  --color-help-graphics-plus2: #3c1471;
+  --color-help-border-plus2: #3c1471;
+  --color-action-background-dark-plus1-active: #06596c;
   --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
   --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
-  --color-action-background-stroke-onlight: #126f87;
+  --color-action-border-dark-hover: #126f87;
   --component-stickynote-background-normal-light: #fdf8df;
   --component-stickynote-background-normal-medium: #fcf2bf;
   --component-stickynote-background-normal-dark: #f9ea9f;
@@ -212,7 +209,7 @@
   --component-stickynote-background-error-dark: #eec0a5;
   --component-stickynote-background-error-medium: #f7e1d2;
   --component-stickynote-background-error-light: #fff2ea;
-  --color-base-text-onlight-subdued: #474745;
+  --color-base-subdued-text-dark: #474745;
   --component-stickynote-background-fold-error-dark: #e39376;
   --component-stickynote-background-fold-error-light: #f7e1d2;
   --component-stickynote-background-fold-error-medium: #eec0a5;
@@ -248,25 +245,83 @@
   --component-statusdot-graphics-kiwi-onlight: #078141;
   --component-statusdot-graphics-neutral-ondark: #f5f3f3;
   --component-statusdot-graphics-neutral-onlight: #7d7c79;
-  --color-action-graphics-emphasized-onlight: #08667c;
-  --color-base-background-stroke-dark-cherry: #b62e1c;
-  --color-base-background-stroke-dark-blueberry: #126f87;
-  --color-base-background-stroke-dark-neutral: #000000;
-  --color-destructive-graphics-emphasized-onlight: #a31f0e;
+  --color-action-graphics-dark-active: #08667c;
+  --color-destructive-graphics-dark-active: #a31f0e;
   --component-listelements-background-neutral-verydark: #bdbab9;
   --component-listelements-background-blueberry-verydark: #7abecc;
   --component-listelements-border-neutral-ondark: #ffffff;
   --component-listelements-background-cherry-verydark: #e39376;
-  --color-notification-background-info-hover: #cae7ed;
-  --color-notification-background-info-active: #afdae3;
-  --color-notification-background-error-hover: #f7e1d2;
-  --color-notification-background-error-active: #eec0a5;
-  --color-notification-background-warning-hover: #fcf2bf;
-  --color-notification-background-warning-active: #f9ea9f;
-  --color-notification-background-success-hover: #c2edd6;
-  --color-notification-background-success-active: #9de2bf;
+  --color-notification-info-background-hover: #cae7ed;
+  --color-notification-info-background-active: #afdae3;
+  --color-notification-error-background-hover: #f7e1d2;
+  --color-notification-error-background-active: #eec0a5;
+  --color-notification-warning-background-hover: #fcf2bf;
+  --color-notification-warning-background-active: #f9ea9f;
+  --color-notification-success-background-hover: #c2edd6;
+  --color-notification-success-background-active: #9de2bf;
   --color-lightbox-background-transparent-ondark-hover: #00000026;
   --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
   --component-lightbox-background-transparent-ondark-hover: #00000026;
   --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
-}
+
+  /* active-state for text */
+  --color-action-text-dark-active: #06596c;
+  --pink-flamingo-pale: #f8a4e6;
+  --color-action-border-dark-plus1-active: #06596c;
+  --color-action-graphics-light-max-hover: #ffffff;
+  --color-action-graphics-light-max-active: #ffffff;
+  --color-action-text-light-max-hover: #ffffff;
+  --color-action-text-light-max-active: #ffffff;
+  --core-color-transparent: #00000000;
+  --color-action-background-transparent-onlight-normal: #00000000;
+  --color-action-border-dark-active: #08667c;
+  --color-action-background-transparent-multi-onlight-normal: #00000000;
+  --color-action-background-transparent-multi-ondark-normal: #00000000;
+  --color-action-background-transparent-multi-ondark-active: #00000040;
+
+  /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
+  --color-action-background-transparent-multi-onlight-active: #00000026;
+  --color-action-border-light-max-hover: #ffffff;
+  --color-action-border-light-max-active: #ffffff;
+  --color-destructive-background-transparent-onlight-normal: #00000000;
+  --color-destructive-background-transparent-onlight-hover: #ff924f21;
+  --color-destructive-background-transparent-onlight-active: #d96f263b;
+  --color-destructive-border-dark-hover: #b62e1c;
+  --color-destructive-border-dark-active: #a31f0e;
+  --color-destructive-text-dark-active: #912112;
+  --color-destructive-background-dark-normal: #c83521;
+  --color-destructive-background-dark-hover: #b62e1c;
+  --color-destructive-background-dark-active: #a31f0e;
+  --color-destructive-text-light-normal: #ffffff;
+  --color-destructive-text-light-max-hover: #ffffff;
+  --color-destructive-text-light-max-active: #ffffff;
+  --color-destructive-graphics-light-normal: #ffffff;
+  --color-destructive-graphics-light-max-hover: #ffffff;
+  --color-destructive-graphics-light-max-active: #ffffff;
+  --color-destructive-background-light-normal: #ffffff;
+  --color-destructive-background-light-hover: #fff2ea;
+  --color-destructive-background-light-active: #f7e1d2;
+  --color-destructive-background-light-plus1-active: #eec0a5;
+  --color-destructive-border-light-normal: #ffffff;
+  --color-destructive-border-light-max-hover: #fff2ea;
+  --color-destructive-border-light-max-active: #f7e1d2;
+  --color-action-background-light-plus1-normal: #e4f7f9;
+  --color-action-background-light-plus1-hover: #cae7ed;
+  --color-action-background-light-plus1-active: #afdae3;
+  --color-base-neutral-border-normal: #7d7c79;
+  --color-action-background-transparent-onlight-plus1-normal: #126f8721;
+  --color-action-background-transparent-onlight-plus1-plus1: #126f872b;
+  --color-action-background-transparent-onlight-plus1-active: #126f874d;
+  --color-action-background-light-onlight-normal: #ffffff;
+  --brand-color-blueberry-verydark: #06596c;
+  --color-disabled-text-light: #d6d4d3;
+  --color-disabled-text-dark: #62625f;
+  --color-action-background-light-onlight-active: #cae7ed;
+  --color-action-background-light-onlight-hover: #e4f7f9;
+  --color-action-background-light-plus2-normal: #cae7ed;
+  --color-action-background-light-plus2-hover: #afdae3;
+  --color-action-background-light-plus2-active: #7abecc;
+  --color-action-background-dark-hover: #126f87;
+  --color-action-background-dark-active: #08667c;
+  --color-action-border-light-active: #cae7ed;
+}

package/lib/scss/supernova/styles/typography.css

@@ -8,103 +8,110 @@
  */
 
 :root {
+
   /* Hovedtittel H1 */
-  --desktop-h1-title1: 600 3rem/120% 'Source Sans Pro';
+  --desktop-h1-title1: 600 3rem/120% "Source Sans Pro";
 
   /* Sekundærtittel H2 */
-  --desktop-h2-title2: 600 2rem/120% 'Source Sans Pro';
+  --desktop-h2-title2: 600 2rem/120% "Source Sans Pro";
 
   /* Tertiærtittel H3 */
-  --desktop-h3-title3: 600 1.625rem/120% 'Source Sans Pro';
-  --desktop-h4-title4: 600 1.375rem/130% 'Source Sans Pro';
-  --desktop-h5-title5: 700 1.125rem/140% 'Source Sans Pro';
-  --desktop-preamble: 400 1.5rem/130% 'Source Sans Pro';
-  --desktop-legend: 600 1.5rem/130% 'Source Sans Pro';
-  --desktop-label: 600 1.25rem/130% 'Source Sans Pro';
-  --desktop-body: 400 1.25rem/150% 'Source Sans Pro';
+  --desktop-h3-title3: 600 1.625rem/120% "Source Sans Pro";
+  --desktop-h4-title4: 600 1.375rem/130% "Source Sans Pro";
+  --desktop-h5-title5: 700 1.125rem/140% "Source Sans Pro";
+  --desktop-preamble: 400 1.5rem/130% "Source Sans Pro";
+  --desktop-legend: 600 1.5rem/130% "Source Sans Pro";
+  --desktop-label: 600 1.25rem/130% "Source Sans Pro";
+  --desktop-body: 400 1.25rem/150% "Source Sans Pro";
 
   /* Display of condensed textual data, such as metadata or information that is useful, but perhaps not essential for the use of a service. */
-  --desktop-compact-data: 400 1.125rem/140% 'Source Sans Pro';
+  --desktop-compact-data: 400 1.125rem/140% "Source Sans Pro";
 
   /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
-  --desktop-tablecell: 400 1.125rem/130% 'Source Sans Pro';
-  --desktop-body-strong: 600 1.25rem/150% 'Source Sans Pro';
+  --desktop-tablecell: 400 1.125rem/130% "Source Sans Pro";
+  --desktop-body-strong: 600 1.25rem/150% "Source Sans Pro";
 
   /* Text inside input-fields, textarea fields and numeric steppers, etc. Not to be used as the Label for Radiogroup or Checkbox - use Label. */
-  --desktop-form-input: 400 1.25rem/140% 'Source Sans Pro';
+  --desktop-form-input: 400 1.25rem/140% "Source Sans Pro";
 
   /* Bildetekst - plasseres nedenfor bilde eller figur */
-  --desktop-image-caption: 400 1rem/150% 'Source Sans Pro';
+  --desktop-image-caption: 400 1rem/150% "Source Sans Pro";
 
   /* Supply copyright information for images */
-  --desktop-image-credit: 400 0.75rem/130% 'Source Sans Pro';
+  --desktop-image-credit: 400 0.75rem/130% "Source Sans Pro";
 
   /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
-  --desktop-status-time-stamp-time: 400 1.125rem/110% 'Source Sans Pro';
+  --desktop-status-time-stamp-time: 400 1.125rem/110% "Source Sans Pro";
 
   /* Hovedtittel H1 */
-  --mobile-h1-title1: 600 2rem/120% 'Source Sans Pro';
+  --mobile-h1-title1: 600 2rem/120% "Source Sans Pro";
 
   /* Sekundærtittel H2 */
-  --mobile-h2-title2: 600 1.625rem/120% 'Source Sans Pro';
+  --mobile-h2-title2: 600 1.625rem/120% "Source Sans Pro";
 
   /* Tertiærtittel H3 */
-  --mobile-h3-title3: 600 1.375rem/136% 'Source Sans Pro';
-  --mobile-h4-title4: 600 1.25rem/130% 'Source Sans Pro';
-  --mobile-preamble: 400 1.25rem/130% 'Source Sans Pro';
-  --mobile-legend: 600 1.125rem/130% 'Source Sans Pro';
-  --mobile-label: 600 1.125rem/120% 'Source Sans Pro';
-  --mobile-body: 400 1.125rem/150% 'Source Sans Pro';
+  --mobile-h3-title3: 600 1.375rem/136% "Source Sans Pro";
+  --mobile-h4-title4: 600 1.25rem/130% "Source Sans Pro";
+  --mobile-preamble: 400 1.25rem/130% "Source Sans Pro";
+  --mobile-legend: 600 1.125rem/130% "Source Sans Pro";
+  --mobile-label: 600 1.125rem/120% "Source Sans Pro";
+  --mobile-body: 400 1.125rem/150% "Source Sans Pro";
 
   /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
-  --mobile-tablecell: 400 1.125rem/128% 'Source Sans Pro';
+  --mobile-tablecell: 400 1.125rem/128% "Source Sans Pro";
 
   /* Text in Input and Textarea - widgets */
-  --mobile-form-input: 400 1.125rem/150% 'Source Sans Pro';
-  --mobile-image-caption: 400 1rem/150% 'Source Sans Pro';
-  --mobile-image-credit: 400 0.75rem/133% 'Source Sans Pro';
+  --mobile-form-input: 400 1.125rem/150% "Source Sans Pro";
+  --mobile-image-caption: 400 1rem/150% "Source Sans Pro";
+  --mobile-image-credit: 400 0.75rem/133% "Source Sans Pro";
 
   /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
-  --mobile-status-time-stamp-time: 400 1rem/110% 'Source Sans Pro';
-  --mobile-h5-title5: 700 1rem/140% 'Source Sans Pro';
-  --desktop-h6-title6: 600 1.125rem/140% 'Source Sans Pro';
-  --desktop-label-subdued: 400 1.25rem/130% 'Source Sans Pro';
-  --desktop-sublabel: 600 1.125rem/130% 'Source Sans 3';
-  --desktop-sublabel-subdued: 400 1.125rem/130% 'Source Sans 3';
-  --mobile-h6-title6: 600 1rem/140% 'Source Sans Pro';
-  --mobile-label-subdued: 400 1.125rem/120% 'Source Sans Pro';
-  --mobile-sublabel: 600 1rem/120% 'Source Sans 3';
+  --mobile-status-time-stamp-time: 400 1rem/110% "Source Sans Pro";
+  --mobile-h5-title5: 700 1rem/140% "Source Sans Pro";
+  --desktop-h6-title6: 600 1.125rem/140% "Source Sans Pro";
+  --desktop-label-subdued: 400 1.25rem/130% "Source Sans Pro";
+  --desktop-sublabel: 600 1.125rem/130% "Source Sans 3";
+  --desktop-sublabel-subdued: 400 1.125rem/130% "Source Sans 3";
+  --mobile-h6-title6: 600 1rem/140% "Source Sans Pro";
+  --mobile-label-subdued: 400 1.125rem/120% "Source Sans Pro";
+  --mobile-sublabel: 600 1rem/120% "Source Sans 3";
 
   /* <label> */
-  --mobile-sublabel-subdued: 400 1rem/120% 'Source Sans 3';
-  --mobile-body-strong: 600 1.125rem/150% 'Source Sans Pro';
-  --mobile-compact-data: 400 1rem/150% 'Source Sans Pro';
+  --mobile-sublabel-subdued: 400 1rem/120% "Source Sans 3";
+  --mobile-body-strong: 600 1.125rem/150% "Source Sans Pro";
+  --mobile-compact-data: 400 1rem/150% "Source Sans Pro";
 
   /* Name-value pairs as rendered by an HTML <DT>-tag */
-  --desktop-definitionlist-type: 600 1.25rem/130% 'Source Sans Pro';
+  --desktop-definitionlist-type: 600 1.25rem/130% "Source Sans Pro";
 
   /* Data-value in Name-Value-pairs as rendered by a <DD>-tag (definition-data) */
-  --desktop-definition-list-data: 400 1.25rem/130% 'Source Sans Pro';
+  --desktop-definition-list-data: 400 1.25rem/130% "Source Sans Pro";
 
   /* Use for inherent "chunking" of text in hmtl lists <LI>, ie. bullet-lists and ordered lists. */
-  --desktop-textlist: 400 1.25rem/130% 'Source Sans Pro';
+  --desktop-textlist: 400 1.25rem/130% "Source Sans Pro";
 
   /* Use for the Name part in name-value pairs, the equivalent of html <DT> */
-  --mobile-definitionlist-type: 600 1.125rem/120% 'Source Sans Pro';
-  --mobile-definitionlist-data: 400 1.125rem/120% 'Source Sans Pro';
+  --mobile-definitionlist-type: 600 1.125rem/120% "Source Sans Pro";
+  --mobile-definitionlist-data: 400 1.125rem/120% "Source Sans Pro";
 
   /* Renders clumping in ordinary clumps */
-  --mobile-textlist: 400 1.125rem/120% 'Source Sans Pro';
+  --mobile-textlist: 400 1.125rem/120% "Source Sans Pro";
 
   /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
-  --desktop-help-text: 400 1.125rem/140% 'Source Sans Pro';
+  --desktop-help-text: 400 1.125rem/140% "Source Sans Pro";
 
   /* For use in Help trigger components */
-  --desktop-help-trigger-text: 600 1.125rem/130% 'Source Sans 3';
+  --desktop-help-trigger-text: 600 1.125rem/130% "Source Sans 3";
 
   /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
-  --mobile-help-text: 400 1rem/150% 'Source Sans Pro';
+  --mobile-help-text: 400 1rem/150% "Source Sans Pro";
 
   /* For use in Help trigger components */
-  --mobile-help-trigger-text: 600 1rem/120% 'Source Sans 3';
-}
+  --mobile-help-trigger-text: 600 1rem/120% "Source Sans 3";
+
+  /* Eyebrow er en stikktittel som gir mulighet til å videreføre et tema eller område over flere sider – slik at man implisitt ser at siden man er på tilhører et gitt tema eller område. */
+  --desktop-eyebrow: 400 1.25rem/1.875rem "Source Sans Pro";
+
+  /* Eyebrow er en stikktittel som gir mulighet til å videreføre et tema eller område over flere sider – slik at man implisitt ser at siden man er på tilhører et gitt tema eller område. */
+  --mobile-eyebrow: 400 1.125rem/1.688rem "Source Sans Pro";
+}

package/lib/scss/supernova-legacy/index.css

@@ -0,0 +1,2 @@
+/* Base tokens */
+@import './styles/legacy-colors.css';

package/lib/scss/supernova-legacy/styles/legacy-colors.css

@@ -0,0 +1,111 @@
+/* stylelint-disable color-hex-length */
+
+/**
+ * Color variables retained for backwards compatibility.
+ * This file is maintained manually and is not generated by Supernova.io.
+ */
+
+:root {
+  --color-action-graphics-onlight: #188097;
+  --color-action-graphics-onlight-hover: #126f87;
+  --color-action-border-ondark: #ffffff;
+  --color-action-text-ondark: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-border: #7d7c79;
+  --color-destructive-background-emphasized: #f7e1d2;
+  --color-destructive-background-normal: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5c27a1;
+  --color-help-border-normal: #5c27a1;
+  --color-disabled-graphics: #62625f;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+  --color-action-background-transparent-ondark-hover: #00000026;
+  --color-action-background-transparent-onmulticolor-hover: #00000013;
+  --color-action-background-transparent-ondark-hoverselected: #000000bf;
+  --color-action-background-transparent-onmulticolor-active: #00000026;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-background-dark-neutral: #2b2c2b;
+  --color-base-text-onlight: #000000;
+  --color-base-text-ondark: #ffffff;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #7d7c79;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-base-graphics-onlight: #000000;
+  --color-base-graphics-ondark: #ffffff;
+  --color-placeholder-text-onlight: #62625f;
+  --color-base-border-onlight-subtle: #d6d4d3;
+  --color-base-border-neutral: #d6d4d3;
+  --color-base-border-blueberry: #afdae3;
+  --color-base-border-cherry: #eec0a5;
+  --color-notification-text-info: #08667c;
+  --color-notification-text-error: #a31f0e;
+  --color-notification-text-warning: #916500;
+  --color-notification-text-success: #078141;
+  --color-base-border-neutral-emphasized: #bdbab9;
+  --color-notification-status-draft: #7d7c79;
+  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-graphics-dark: #4c1b8c;
+  --color-help-border-dark: #4c1b8c;
+  --color-help-graphics-verydark: #3c1471;
+  --color-help-border-verydark: #3c1471;
+  --color-action-background-onlight-active: #06596c;
+  --color-action-background-stroke-onlight: #126f87;
+  --color-base-text-onlight-subdued: #474745;
+  --color-action-graphics-emphasized-onlight: #08667c;
+  --color-base-background-stroke-dark-cherry: #b62e1c;
+  --color-base-background-stroke-dark-blueberry: #126f87;
+  --color-base-background-stroke-dark-neutral: #000000;
+  --color-destructive-graphics-emphasized-onlight: #a31f0e;
+  --color-notification-background-info-hover: #cae7ed;
+  --color-notification-background-info-active: #afdae3;
+  --color-notification-background-error-hover: #f7e1d2;
+  --color-notification-background-error-active: #eec0a5;
+  --color-notification-background-warning-hover: #fcf2bf;
+  --color-notification-background-warning-active: #f9ea9f;
+  --color-notification-background-success-hover: #c2edd6;
+  --color-notification-background-success-active: #9de2bf;
+}