@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.11

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

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [data-brand="sparebank1"] {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+        --jkl-color-background-page: #FDF7F3;
+        --jkl-color-background-page: light-dark(#FDF7F3, #131313);
+        --jkl-color-background-container: #FFFFFF;
+        --jkl-color-background-container: light-dark(#FFFFFF, #222222);
+        --jkl-color-background-container-accent: #E1EEF3;
+        --jkl-color-background-container-accent: light-dark(#E1EEF3, #0F1F2C);
+        --jkl-color-background-contrast: #0C4686;
+        --jkl-color-background-contrast: light-dark(#0C4686, #00509A);
+        --jkl-color-text-default: #191919;
+        --jkl-color-text-default: light-dark(#191919, #FFFFFF);
+        --jkl-color-text-subdued: #484848;
+        --jkl-color-text-subdued: light-dark(#484848, #BABABA);
+        --jkl-color-text-accent: #0C2053;
+        --jkl-color-text-accent: light-dark(#0C2053, #D1E3F2);
+        --jkl-color-text-on-contrast: #FFFFFF;
+        --jkl-color-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-border-default: #CDCFCF;
+        --jkl-color-border-default: light-dark(#CDCFCF, #383D3D);
+        --jkl-color-border-subdued: #ECEDED;
+        --jkl-color-border-subdued: light-dark(#ECEDED, #191F1F);
+        --jkl-color-border-strong: #0C4686;
+        --jkl-color-border-strong: light-dark(#0C4686, #94BAE1);
+        --jkl-color-warning-background-page: #FFFFFF;
+        --jkl-color-warning-background-page: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-warning-background-container: #FDEBCD;
+        --jkl-color-warning-background-container: light-dark(#FDEBCD, #401A00);
+        --jkl-color-warning-background-container-accent: #FDEBCD;
+        --jkl-color-warning-background-container-accent: light-dark(#FDEBCD, #401A00);
+        --jkl-color-warning-background-contrast: #0C4686;
+        --jkl-color-warning-background-contrast: light-dark(#0C4686, #00509A);
+        --jkl-color-warning-text-default: #5D2700;
+        --jkl-color-warning-text-default: light-dark(#5D2700, #FFBF6A);
+        --jkl-color-warning-text-subdued: #484848;
+        --jkl-color-warning-text-subdued: light-dark(#484848, #BABABA);
+        --jkl-color-warning-text-accent: #5D2700;
+        --jkl-color-warning-text-accent: light-dark(#5D2700, #FFBF6A);
+        --jkl-color-warning-text-on-contrast: #FFFFFF;
+        --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-warning-border-default: #C56709;
+        --jkl-color-warning-border-default: light-dark(#C56709, #C56709);
+        --jkl-color-warning-border-subdued: #ECEDED;
+        --jkl-color-warning-border-subdued: light-dark(#ECEDED, #191F1F);
+        --jkl-color-warning-border-strong: #0C4686;
+        --jkl-color-warning-border-strong: light-dark(#0C4686, #94BAE1);
+        --jkl-color-success-background-page: #FFFFFF;
+        --jkl-color-success-background-page: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-success-background-container: #DAF5E8;
+        --jkl-color-success-background-container: light-dark(#DAF5E8, #0D3B2A);
+        --jkl-color-success-background-container-accent: #DAF5E8;
+        --jkl-color-success-background-container-accent: light-dark(#DAF5E8, #0D3B2A);
+        --jkl-color-success-background-contrast: #0C4686;
+        --jkl-color-success-background-contrast: light-dark(#0C4686, #00509A);
+        --jkl-color-success-text-default: #0D4430;
+        --jkl-color-success-text-default: light-dark(#0D4430, #A9E2C6);
+        --jkl-color-success-text-subdued: #484848;
+        --jkl-color-success-text-subdued: light-dark(#484848, #BABABA);
+        --jkl-color-success-text-accent: #0D4430;
+        --jkl-color-success-text-accent: light-dark(#0D4430, #A9E2C6);
+        --jkl-color-success-text-on-contrast: #FFFFFF;
+        --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-success-border-default: #3F9D76;
+        --jkl-color-success-border-default: light-dark(#3F9D76, #3F9D76);
+        --jkl-color-success-border-subdued: #ECEDED;
+        --jkl-color-success-border-subdued: light-dark(#ECEDED, #191F1F);
+        --jkl-color-success-border-strong: #0C4686;
+        --jkl-color-success-border-strong: light-dark(#0C4686, #94BAE1);
+        --jkl-color-info-background-page: #FFFFFF;
+        --jkl-color-info-background-page: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-info-background-container: #E1EEF3;
+        --jkl-color-info-background-container: light-dark(#E1EEF3, #163149);
+        --jkl-color-info-background-container-accent: #C4DEE8;
+        --jkl-color-info-background-container-accent: light-dark(#C4DEE8, #204666);
+        --jkl-color-info-background-contrast: #0C4686;
+        --jkl-color-info-background-contrast: light-dark(#0C4686, #00509A);
+        --jkl-color-info-text-default: #204666;
+        --jkl-color-info-text-default: light-dark(#204666, #BBDAE7);
+        --jkl-color-info-text-subdued: #484848;
+        --jkl-color-info-text-subdued: light-dark(#484848, #BABABA);
+        --jkl-color-info-text-accent: #204666;
+        --jkl-color-info-text-accent: light-dark(#204666, #BBDAE7);
+        --jkl-color-info-text-on-contrast: #FFFFFF;
+        --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-info-border-default: #558BB5;
+        --jkl-color-info-border-default: light-dark(#558BB5, #558BB5);
+        --jkl-color-info-border-subdued: #ECEDED;
+        --jkl-color-info-border-subdued: light-dark(#ECEDED, #191F1F);
+        --jkl-color-info-border-strong: #0C4686;
+        --jkl-color-info-border-strong: light-dark(#0C4686, #94BAE1);
+        --jkl-color-error-background-page: #FFFFFF;
+        --jkl-color-error-background-page: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-error-background-container: #FFDFDB;
+        --jkl-color-error-background-container: light-dark(#FFDFDB, #591011);
+        --jkl-color-error-background-container-accent: #FFB6AF;
+        --jkl-color-error-background-container-accent: light-dark(#FFB6AF, #711314);
+        --jkl-color-error-background-contrast: #0C4686;
+        --jkl-color-error-background-contrast: light-dark(#0C4686, #00509A);
+        --jkl-color-error-text-default: #711314;
+        --jkl-color-error-text-default: light-dark(#711314, #FFA49E);
+        --jkl-color-error-text-subdued: #484848;
+        --jkl-color-error-text-subdued: light-dark(#484848, #BABABA);
+        --jkl-color-error-text-accent: #711314;
+        --jkl-color-error-text-accent: light-dark(#711314, #FFA49E);
+        --jkl-color-error-text-on-contrast: #FFFFFF;
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+        --jkl-color-error-border-default: #E03A3C;
+        --jkl-color-error-border-default: light-dark(#E03A3C, #E03A3C);
+        --jkl-color-error-border-subdued: #ECEDED;
+        --jkl-color-error-border-subdued: light-dark(#ECEDED, #191F1F);
+        --jkl-color-error-border-strong: #0C4686;
+        --jkl-color-error-border-strong: light-dark(#0C4686, #94BAE1);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+$webfonts-dir-sparebank1: "/fonts/brands/sparebank1" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "SpareBank1 Sans";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-sparebank1}/SpareBank1-Regular-Web.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "SpareBank1 Sans";
+        font-display: fallback;
+        font-weight: 500;
+        font-style: normal;
+        src: url("#{$webfonts-dir-sparebank1}/SpareBank1-Medium-Web.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "SpareBank1 Title";
+        font-display: fallback;
+        font-weight: 500;
+        font-style: normal;
+        src: url("#{$webfonts-dir-sparebank1}/SpareBank1-Title-Medium-Web.woff2") format("woff2");
+    }
+
+    [data-brand="sparebank1"] {
+        --jkl-font-family-regular: 'SpareBank1 Sans', 'Adjusted Arial Fallback', arial, sans-serif;
+        --jkl-font-family-display: 'SpareBank1 Title', 'Adjusted Arial Display Fallback', arial, sans-serif;
+        --jkl-font-family-mono: 'Adjusted Courier New Fallback', -apple-system, blinkmacsystemfont, monospace;
+    }
+}

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

@@ -0,0 +1,2 @@
+@forward "color-scheme";
+@forward "fonts";

package/styles/utility/_headings.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.utility {
     .jkl-title {

package/styles/utility/_paragraphs.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
-@use "jkl";
-@use "jkl/typography";
+@use "../jkl";
+@use "../jkl/typography";
 
 @layer jokul.utility {
     .jkl-body {

package/styles/utility/_screen-reader.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.utility {
     .jkl-sr-only {

package/styles/utility/_spacing.scss

@@ -1,8 +1,8 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
-@use "jkl";
-@use "jkl/spacing";
+@use "../jkl";
+@use "../jkl/spacing";
 
 @function get-class-name($spacing-combination) {
     $class-name: "jkl-spacing";