@helsenorge/designsystem-react 12.4.0 → 12.7.0

package/scss/supernova/styles/colors.css

@@ -8,93 +8,8 @@
  */
 
 :root {
-  --core-color-black: #000000;
-  --core-color-white: #ffffff;
-  --core-color-blueberry-50: #e4f7f9;
-  --core-color-neutral-500: #989693;
-  --core-color-neutral-700: #62625f;
-  --color-action-text-ondark: #ffffff;
-
-  /* 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-notification-background-info: #e4f7f9;
-  --color-notification-background-error: #fff2ea;
-  --color-destructive-graphics-normal: #c83521;
-  --color-base-text-onlight: #000000;
-  --color-action-background-ondark: #ffffff;
-  --color-action-border-ondark: #ffffff;
-  --color-action-border-ondark-focus: #ffffff;
-  --color-action-graphics-ondark: #ffffff;
-  --color-base-text-ondark: #ffffff;
-  --color-base-background-neutral: #f5f3f3;
-  --color-base-background-white: #ffffff;
-  --color-base-graphics-ondark: #ffffff;
-  --color-disabled-text-ondark: #ffffff;
-  --color-action-border-onlight: #188097;
-  --color-action-border-onlight-hover: #08667c;
-  --color-action-border-onlight-focus: #000000;
-  --color-action-text-onlight: #126f87;
-  --color-action-text-onlight-hover: #08667c;
   --color-action-graphics-onlight: #188097;
   --color-action-graphics-onlight-hover: #126f87;
-  --color-action-graphics-ondark-hover: #e4f7f9;
-  --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-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-warning: #ebc840;
-  --color-notification-status-success: #099150;
-  --color-destructive-graphics-hover: #b62e1c;
-  --color-destructive-text-normal: #b62e1c;
-  --color-destructive-text-hover: #a31f0e;
-  --color-disabled-background: #d6d4d3;
-  --color-disabled-text: #62625f;
-  --color-disabled-border: #7d7c79;
-  --color-disabled-graphics: #62625f;
-  --color-disabled-border-ondark: #d6d4d3;
-  --color-disabled-graphics-ondark: #d6d4d3;
-  --color-base-background-blueberry: #e4f7f9;
-  --color-base-background-cherry: #fff2ea;
-  --color-base-background-dark-blueberry: #188097;
-  --color-base-background-dark-cherry: #c83521;
-  --color-base-graphics-onlight: #000000;
-  --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #7d7c79;
-  --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background-normal: #f4ecfe;
-  --color-help-graphics-normal: #5b22a6;
-  --color-help-border-normal: #5b22a6;
-  --core-color-blueberry-100: #cae7ed;
-  --core-color-blueberry-200: #afdae3;
-  --core-color-blueberry-300: #7abecc;
-  --core-color-blueberry-400: #58aabb;
-  --core-color-blueberry-500: #188097;
-  --core-color-blueberry-600: #126f87;
-  --core-color-blueberry-700: #08667c;
-  --core-color-blueberry-800: #06596c;
-  --core-color-blueberry-900: #084350;
-  --core-color-neutral-50: #f5f3f3;
-  --core-color-neutral-100: #eae7e7;
-  --core-color-neutral-200: #d6d4d3;
-  --core-color-neutral-300: #bdbab9;
-  --core-color-neutral-400: #aaa8a6;
-  --core-color-neutral-600: #7d7c79;
-  --core-color-neutral-800: #474745;
-  --core-color-neutral-900: #2b2c2b;
   --core-color-banana-50: #fdf8df;
   --core-color-banana-100: #fcf2bf;
   --core-color-banana-200: #f9ea9f;
@@ -105,6 +20,16 @@
   --core-color-banana-700: #ab7c00;
   --core-color-banana-800: #916500;
   --core-color-banana-900: #764f00;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
   --core-color-cherry-50: #fff2ea;
   --core-color-cherry-100: #f7e1d2;
   --core-color-cherry-200: #eec0a5;
@@ -125,6 +50,16 @@
   --core-color-kiwi-700: #0ca161;
   --core-color-kiwi-800: #099150;
   --core-color-kiwi-900: #078141;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-700: #62625f;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
   --core-color-plum-50: #f4ecfe;
   --core-color-plum-100: #e5d5fb;
   --core-color-plum-200: #cfb1f6;
@@ -135,8 +70,84 @@
   --core-color-plum-700: #5c27a1;
   --core-color-plum-800: #4c1b8c;
   --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-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;
+
+  /* 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;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #000000bf;
+  --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;
@@ -156,17 +167,6 @@
   --brandcolor-cherry-medium: #c83521;
   --brandcolor-cherry-mediumdark: #b62e1c;
   --brandcolor-cherry-dark: #a31f0e;
-  --color-notification-status-info: #188097;
-  --color-notification-status-error: #c83521;
-  --color-destructive-border-normal: #c83521;
-  --color-action-border-ondark-hover: #e4f7f9;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
-  --color-action-background-transparent-ondark-hover: #00000026;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
-  --color-action-background-transparent-ondark-hoverselected: #000000bf;
-  --color-base-background-dark-neutral: #2b2c2b;
 
   /* Placeholdertext in input- and textarea-controls */
   --color-placeholder-text-onlight: #62625f;
@@ -177,10 +177,10 @@
 
   /* 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-text-warning: #916500;
 
   /* 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;
@@ -193,9 +193,47 @@
 
   /* Background outside of modal and bottomsheet to mask inactive screen-area */
   --color-shadow-pagemask: #2c2b2cb8;
-  --color-help-border-subtle-wcag: #9153e2;
+  --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-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;
+  --component-stickynote-background-normal-light: #fdf8df;
+  --component-stickynote-background-normal-medium: #fcf2bf;
+  --component-stickynote-background-normal-dark: #f9ea9f;
+  --component-stickynote-border-normal: #916500;
+  --component-stickynote-border-error: #d56147;
+  --component-stickynote-background-error-dark: #eec0a5;
+  --component-stickynote-background-error-medium: #f7e1d2;
+  --component-stickynote-background-error-light: #fff2ea;
+  --color-base-text-onlight-subdued: #000000;
+  --component-stickynote-background-fold-error-dark: #e39376;
+  --component-stickynote-background-fold-error-light: #f7e1d2;
+  --component-stickynote-background-fold-error-medium: #eec0a5;
+  --component-stickynote-background-fold-normal-light: #fcf2bf;
+  --component-stickynote-background-fold-normal-medium: #f9ea9f;
+  --component-stickynote-background-fold-normal-dark: #ebc840;
+  --component-stickynote-background-transparent-onlight-hover: #ebc84021;
+  --component-stickynote-background-transparent-onlight-active: #ebc8404d;
+  --component-stickynote-background-transparent-error-hover: #d5614721;
+  --component-stickynote-background-transparent-error-active: #d5614740;
+  --component-listelements-background-neutral-light: #f5f3f3;
+  --component-listelements-background-neutral-medium: #eae7e7;
+  --component-listelements-background-neutral-dark: #d6d4d3;
+  --component-listelements-border-neutral-light: #eae7e7;
+  --component-listelements-background-blueberry-light: #e4f7f9;
+  --component-listelements-background-blueberry-medium: #cae7ed;
+  --component-listelements-border-blueberry-light: #cae7ed;
+  --component-listelements-background-blueberry-dark: #afdae3;
+  --component-listelements-border-blueberry-normal: #188097;
+  --component-listelements-background-cherry-light: #fff2ea;
+  --component-listelements-background-cherry-medium: #f7e1d2;
+  --component-listelements-border-cherry-light: #f7e1d2;
+  --component-listelements-background-cherry-dark: #eec0a5;
+  --component-listelements-border-cherry-normal: #d56147;
+  --component-listelements-border-neutral-normal: #7d7c79;
 }

package/scss/supernova/styles/typography.css

@@ -68,11 +68,11 @@
   /* 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: 700 1.125rem/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: 700 1rem/140% "Source Sans Pro";
+  --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";
 

package/components/Tabs/TabsDocs.d.ts

@@ -1 +0,0 @@
-export declare const TabsDocs: () => React.JSX.Element;