@fremtind/jokul 5.3.1 → 5.4.1

package/styles/theme/_index.scss

@@ -3,3 +3,4 @@
 @forward "color-scheme";
 @forward "size";
 @forward "tokens";
+@forward "brands";

package/styles/theme/_tokens.scss

@@ -6,7 +6,8 @@
 @layer jokul.theme {
     :root,
     [data-size],
-    [data-theme] {
+    [data-theme],
+    [data-brand] {
         --jkl-unit-0: 0;
         --jkl-spacing-0: 0rem;
         --jkl-spacing-2: 0.125rem;

package/styles/theme/brands/_index.scss

@@ -0,0 +1,2 @@
+// Do not edit directly, this file was auto-generated.
+@forward "dnb";

package/styles/theme/brands/dnb/_color-scheme.scss

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [data-brand="dnb"] {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+        --jkl-color-background-page: #F8F8F8;
+        --jkl-color-background-page: light-dark(#F8F8F8, #2C2C2E);
+        --jkl-color-background-container: #FFFFFF;
+        --jkl-color-background-container: light-dark(#FFFFFF, #000000);
+        --jkl-color-background-container-accent: #D8F3EC;
+        --jkl-color-background-container-accent: light-dark(#D8F3EC, #023939);
+        --jkl-color-background-contrast: #007272;
+        --jkl-color-background-contrast: light-dark(#007272, #A5E1D2);
+        --jkl-color-text-default: #333333;
+        --jkl-color-text-default: light-dark(#333333, #ffffff);
+        --jkl-color-text-subdued: #6B6B6B;
+        --jkl-color-text-subdued: light-dark(#6B6B6B, #9A9AA0);
+        --jkl-color-text-accent: #14555A;
+        --jkl-color-text-accent: light-dark(#14555A, #A5E1D2);
+        --jkl-color-text-on-contrast: #ffffff;
+        --jkl-color-text-on-contrast: light-dark(#ffffff, #023939);
+        --jkl-color-border-default: #007272;
+        --jkl-color-border-default: light-dark(#007272, #A5E1D2);
+        --jkl-color-border-subdued: #CCCCCC;
+        --jkl-color-border-subdued: light-dark(#CCCCCC, #48484A);
+        --jkl-color-border-strong: #007272;
+        --jkl-color-border-strong: light-dark(#007272, #A5E1D2);
+        --jkl-color-warning-background-page: #F3F0ED;
+        --jkl-color-warning-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-warning-background-container: #EED9C3;
+        --jkl-color-warning-background-container: light-dark(#EED9C3, #48351E);
+        --jkl-color-warning-background-container-accent: #E4BC8A;
+        --jkl-color-warning-background-container-accent: light-dark(#E4BC8A, #61492D);
+        --jkl-color-warning-background-contrast: #D3770B;
+        --jkl-color-warning-background-contrast: light-dark(#D3770B, #EAA858);
+        --jkl-color-warning-text-default: #522E04;
+        --jkl-color-warning-text-default: light-dark(#522E04, #FDECD8);
+        --jkl-color-warning-text-subdued: #636060;
+        --jkl-color-warning-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-warning-text-accent: #D3770B;
+        --jkl-color-warning-text-accent: light-dark(#D3770B, #EAA858);
+        --jkl-color-warning-text-on-contrast: #FFFFFF;
+        --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-warning-border-default: #D3770B;
+        --jkl-color-warning-border-default: light-dark(#D3770B, #EAA858);
+        --jkl-color-warning-border-subdued: #E4BC8A;
+        --jkl-color-warning-border-subdued: light-dark(#E4BC8A, #61492D);
+        --jkl-color-warning-border-strong: #522E04;
+        --jkl-color-warning-border-strong: light-dark(#522E04, #FDECD8);
+        --jkl-color-success-background-page: #F3F0ED;
+        --jkl-color-success-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-success-background-container: #D2E9CB;
+        --jkl-color-success-background-container: light-dark(#D2E9CB, #334D34);
+        --jkl-color-success-background-container-accent: #B7CFAF;
+        --jkl-color-success-background-container-accent: light-dark(#B7CFAF, #3F5F41);
+        --jkl-color-success-background-contrast: #24753A;
+        --jkl-color-success-background-contrast: light-dark(#24753A, #81E49C);
+        --jkl-color-success-text-default: #0A430D;
+        --jkl-color-success-text-default: light-dark(#0A430D, #DCF9E0);
+        --jkl-color-success-text-subdued: #636060;
+        --jkl-color-success-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-success-text-accent: #24753A;
+        --jkl-color-success-text-accent: light-dark(#24753A, #81E49C);
+        --jkl-color-success-text-on-contrast: #FFFFFF;
+        --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-success-border-default: #24753A;
+        --jkl-color-success-border-default: light-dark(#24753A, #81E49C);
+        --jkl-color-success-border-subdued: #B7CFAF;
+        --jkl-color-success-border-subdued: light-dark(#B7CFAF, #3F5F41);
+        --jkl-color-success-border-strong: #0A430D;
+        --jkl-color-success-border-strong: light-dark(#0A430D, #DCF9E0);
+        --jkl-color-info-background-page: #F3F0ED;
+        --jkl-color-info-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-info-background-container: #D3D3F6;
+        --jkl-color-info-background-container: light-dark(#D3D3F6, #35355B);
+        --jkl-color-info-background-container-accent: #B5B5EB;
+        --jkl-color-info-background-container-accent: light-dark(#B5B5EB, #4B4B89);
+        --jkl-color-info-background-contrast: #4646D1;
+        --jkl-color-info-background-contrast: light-dark(#4646D1, #9A9AEB);
+        --jkl-color-info-text-default: #111145;
+        --jkl-color-info-text-default: light-dark(#111145, #D8D8FD);
+        --jkl-color-info-text-subdued: #636060;
+        --jkl-color-info-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-info-text-accent: #4646D1;
+        --jkl-color-info-text-accent: light-dark(#4646D1, #9A9AEB);
+        --jkl-color-info-text-on-contrast: #FFFFFF;
+        --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-info-border-default: #4646D1;
+        --jkl-color-info-border-default: light-dark(#4646D1, #9A9AEB);
+        --jkl-color-info-border-subdued: #B5B5EB;
+        --jkl-color-info-border-subdued: light-dark(#B5B5EB, #4B4B89);
+        --jkl-color-info-border-strong: #111145;
+        --jkl-color-info-border-strong: light-dark(#111145, #D8D8FD);
+        --jkl-color-error-background-page: #F3F0ED;
+        --jkl-color-error-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-error-background-container: #F0D6D6;
+        --jkl-color-error-background-container: light-dark(#F0D6D6, #4C2A28);
+        --jkl-color-error-background-container-accent: #E4B7B6;
+        --jkl-color-error-background-container-accent: light-dark(#E4B7B6, #6A3C39);
+        --jkl-color-error-background-contrast: #B32424;
+        --jkl-color-error-background-contrast: light-dark(#B32424, #F38C8C);
+        --jkl-color-error-text-default: #4A0D0D;
+        --jkl-color-error-text-default: light-dark(#4A0D0D, #FCD9D9);
+        --jkl-color-error-text-subdued: #636060;
+        --jkl-color-error-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-error-text-accent: #B32424;
+        --jkl-color-error-text-accent: light-dark(#B32424, #F38C8C);
+        --jkl-color-error-text-on-contrast: #FFFFFF;
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-error-border-default: #B32424;
+        --jkl-color-error-border-default: light-dark(#B32424, #F38C8C);
+        --jkl-color-error-border-subdued: #E4B7B6;
+        --jkl-color-error-border-subdued: light-dark(#E4B7B6, #6A3C39);
+        --jkl-color-error-border-strong: #4A0D0D;
+        --jkl-color-error-border-strong: light-dark(#4A0D0D, #FCD9D9);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+}

package/styles/theme/brands/dnb/_fonts.scss

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@use "../../fonts" as jokul-fonts;
+
+// Arver $webfonts-dir slik at konsumenter som flytter fontmappa bare trenger å
+// konfigurere den ene variabelen. Kan fortsatt overstyres alene ved behov.
+$webfonts-dir-dnb: "#{jokul-fonts.$webfonts-dir}/brands/dnb" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "DNB Sans";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNB-Regular.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "DNB Sans";
+        font-display: fallback;
+        font-weight: 500;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNB-Medium.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "DNB Mono";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNBMono-Regular.woff2") format("woff2");
+    }
+
+    [data-brand="dnb"] {
+        --jkl-font-family-regular: 'DNB Sans', sans-serif;
+        --jkl-font-family-display: 'DNB Sans', sans-serif;
+        --jkl-font-family-mono: 'DNB Mono', 'Adjusted Courier New Fallback', -apple-system, blinkmacsystemfont, monospace;
+        --jkl-font-family-icons: 'Jokul Icons', 'Jokul Icons Fallback', monospace;
+    }
+}

package/styles/theme/brands/dnb/_index.scss

@@ -0,0 +1,6 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@forward "color-scheme";
+@forward "fonts";