@bi-digital/tokens 0.12.0 → 0.12.1

package/dist/tokens.css

@@ -157,15 +157,15 @@
   --bi-scale-84x: 21rem;
   --bi-scale-128x: 32rem;
   --bi-scale-max: 624.9375rem;
+  --bi-color-stroke-basic-subtle: rgba(0, 0, 0, 0.1);
+  --bi-color-stroke-basic: rgba(0, 0, 0, 0.2);
+  --bi-color-stroke-basic-strong: rgba(0, 0, 0, 0.3);
+  --bi-color-stroke-basic-contrast: rgba(0, 0, 0, 0.5);
   --bi-color-primary-text-secondary: rgba(4, 47, 91, 0.7);
   --bi-color-info-text-secondary: rgba(46, 11, 97, 0.7);
   --bi-color-warning-text-secondary: rgba(74, 60, 1, 0.7);
   --bi-color-success-text-secondary: rgba(20, 58, 22, 0.7);
   --bi-color-alert-text-secondary: rgba(106, 27, 22, 0.7);
-  --bi-color-stroke-basic-subtle: rgba(0, 0, 0, 0.1);
-  --bi-color-stroke-basic: rgba(0, 0, 0, 0.2);
-  --bi-color-stroke-basic-strong: rgba(0, 0, 0, 0.3);
-  --bi-color-stroke-basic-contrast: rgba(0, 0, 0, 0.5);
   --bi-states-hover: rgba(38, 51, 63, 0.1);
   --bi-states-press: rgba(38, 51, 63, 0.15);
   --bi-states-hover-dark: rgba(38, 51, 63, 0.1);
@@ -480,6 +480,10 @@
 }
 
 [data-color-scheme="dark"] {
+  --bi-color-stroke-basic-subtle: #ffffff1a;
+  --bi-color-stroke-basic: #ffffff33;
+  --bi-color-stroke-basic-strong: #ffffff4d;
+  --bi-color-stroke-basic-contrast: #ffffff66;
   --bi-color-neutral-background: var(--bi-neutral-100);
   --bi-color-neutral-surface-subtle: var(--bi-neutral-95);
   --bi-color-neutral-surface: var(--bi-neutral-90);
@@ -512,8 +516,8 @@
   --bi-color-primary-text-secondary: #ffffffb2;
   --bi-color-primary-text-subtle: var(--bi-primary-10);
   --bi-color-primary-text-accent: var(--bi-primary-30);
-  --bi-color-primary-contrast: var(--bi-primary-20);
-  --bi-color-primary-contrast-hover: var(--bi-primary-30);
+  --bi-color-primary-contrast: var(--bi-primary-30);
+  --bi-color-primary-contrast-hover: var(--bi-primary-20);
   --bi-color-primary-fill: var(--bi-primary-50);
   --bi-color-primary-on-fill: var(--bi-basic-white);
   --bi-color-info-background: var(--bi-info-100);
@@ -588,10 +592,6 @@
   --bi-color-alert-contrast-hover: var(--bi-alert-15);
   --bi-color-alert-fill: var(--bi-alert-60);
   --bi-color-alert-on-fill: var(--bi-basic-white);
-  --bi-color-stroke-basic-subtle: #ffffff1a;
-  --bi-color-stroke-basic: #ffffff33;
-  --bi-color-stroke-basic-strong: #ffffff4d;
-  --bi-color-stroke-basic-contrast: #ffffff66;
   --bi-states-hover: #ffffff1a;
   --bi-states-press: #ffffff26;
   --bi-states-focus: var(--bi-primary-30);

package/dist/tokens.d.ts

@@ -188,6 +188,10 @@ declare const tokens: {
     max: DesignToken;
   };
   color: {
+    "stroke-basic-subtle": DesignToken;
+    "stroke-basic": DesignToken;
+    "stroke-basic-strong": DesignToken;
+    "stroke-basic-contrast": DesignToken;
     neutral: {
       background: DesignToken;
       "surface-subtle": DesignToken;
@@ -308,10 +312,6 @@ declare const tokens: {
       fill: DesignToken;
       "on-fill": DesignToken;
     };
-    "stroke-basic-subtle": DesignToken;
-    "stroke-basic": DesignToken;
-    "stroke-basic-strong": DesignToken;
-    "stroke-basic-contrast": DesignToken;
   };
   states: {
     hover: DesignToken;

package/dist/tokens.js

@@ -2201,7 +2201,7 @@ export default {
     0: {
       key: "{scale.0}",
       $type: "dimension",
-      $value: 0,
+      $value: "0",
       filePath: "tokens/Reference.Mode 1.tokens.json",
       isSource: true,
       original: {
@@ -2794,6 +2794,78 @@ export default {
     },
   },
   color: {
+    "stroke-basic-subtle": {
+      key: "{color.stroke-basic-subtle}",
+      $type: "color",
+      $value: "rgba(0, 0, 0, 0.1)",
+      filePath: "tokens/Semantic.light.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#0000001a",
+        key: "{color.stroke-basic-subtle}",
+      },
+      name: "bi-color-stroke-basic-subtle",
+      attributes: {
+        category: "color",
+        type: "stroke-basic-subtle",
+      },
+      path: ["color", "stroke-basic-subtle"],
+    },
+    "stroke-basic": {
+      key: "{color.stroke-basic}",
+      $type: "color",
+      $value: "rgba(0, 0, 0, 0.2)",
+      filePath: "tokens/Semantic.light.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#00000033",
+        key: "{color.stroke-basic}",
+      },
+      name: "bi-color-stroke-basic",
+      attributes: {
+        category: "color",
+        type: "stroke-basic",
+      },
+      path: ["color", "stroke-basic"],
+    },
+    "stroke-basic-strong": {
+      key: "{color.stroke-basic-strong}",
+      $type: "color",
+      $value: "rgba(0, 0, 0, 0.3)",
+      filePath: "tokens/Semantic.light.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#0000004d",
+        key: "{color.stroke-basic-strong}",
+      },
+      name: "bi-color-stroke-basic-strong",
+      attributes: {
+        category: "color",
+        type: "stroke-basic-strong",
+      },
+      path: ["color", "stroke-basic-strong"],
+    },
+    "stroke-basic-contrast": {
+      key: "{color.stroke-basic-contrast}",
+      $type: "color",
+      $value: "rgba(0, 0, 0, 0.5)",
+      filePath: "tokens/Semantic.light.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#00000080",
+        key: "{color.stroke-basic-contrast}",
+      },
+      name: "bi-color-stroke-basic-contrast",
+      attributes: {
+        category: "color",
+        type: "stroke-basic-contrast",
+      },
+      path: ["color", "stroke-basic-contrast"],
+    },
     neutral: {
       background: {
         key: "{color.neutral.background}",
@@ -4858,78 +4930,6 @@ export default {
         path: ["color", "alert", "on-fill"],
       },
     },
-    "stroke-basic-subtle": {
-      key: "{color.stroke-basic-subtle}",
-      $type: "color",
-      $value: "rgba(0, 0, 0, 0.1)",
-      filePath: "tokens/Semantic.light.tokens.json",
-      isSource: true,
-      original: {
-        $type: "color",
-        $value: "#0000001a",
-        key: "{color.stroke-basic-subtle}",
-      },
-      name: "bi-color-stroke-basic-subtle",
-      attributes: {
-        category: "color",
-        type: "stroke-basic-subtle",
-      },
-      path: ["color", "stroke-basic-subtle"],
-    },
-    "stroke-basic": {
-      key: "{color.stroke-basic}",
-      $type: "color",
-      $value: "rgba(0, 0, 0, 0.2)",
-      filePath: "tokens/Semantic.light.tokens.json",
-      isSource: true,
-      original: {
-        $type: "color",
-        $value: "#00000033",
-        key: "{color.stroke-basic}",
-      },
-      name: "bi-color-stroke-basic",
-      attributes: {
-        category: "color",
-        type: "stroke-basic",
-      },
-      path: ["color", "stroke-basic"],
-    },
-    "stroke-basic-strong": {
-      key: "{color.stroke-basic-strong}",
-      $type: "color",
-      $value: "rgba(0, 0, 0, 0.3)",
-      filePath: "tokens/Semantic.light.tokens.json",
-      isSource: true,
-      original: {
-        $type: "color",
-        $value: "#0000004d",
-        key: "{color.stroke-basic-strong}",
-      },
-      name: "bi-color-stroke-basic-strong",
-      attributes: {
-        category: "color",
-        type: "stroke-basic-strong",
-      },
-      path: ["color", "stroke-basic-strong"],
-    },
-    "stroke-basic-contrast": {
-      key: "{color.stroke-basic-contrast}",
-      $type: "color",
-      $value: "rgba(0, 0, 0, 0.5)",
-      filePath: "tokens/Semantic.light.tokens.json",
-      isSource: true,
-      original: {
-        $type: "color",
-        $value: "#00000080",
-        key: "{color.stroke-basic-contrast}",
-      },
-      name: "bi-color-stroke-basic-contrast",
-      attributes: {
-        category: "color",
-        type: "stroke-basic-contrast",
-      },
-      path: ["color", "stroke-basic-contrast"],
-    },
   },
   states: {
     hover: {
@@ -5191,7 +5191,7 @@ export default {
     none: {
       key: "{stroke.none}",
       $type: "dimension",
-      $value: 0,
+      $value: "0",
       filePath: "tokens/System.Mode 1.tokens.json",
       isSource: true,
       original: {
@@ -5337,7 +5337,7 @@ export default {
     none: {
       key: "{radius.none}",
       $type: "dimension",
-      $value: 0,
+      $value: "0",
       filePath: "tokens/System.Mode 1.tokens.json",
       isSource: true,
       original: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bi-digital/tokens",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "CSS and SASS variables for the BI Design System",
   "author": "BI Digital",
   "homepage": "https://designsystem.bi.no/?path=/docs/styles-colors--docs",
@@ -29,7 +29,7 @@
     "/dist"
   ],
   "devDependencies": {
-    "style-dictionary": "^5.4.0",
+    "style-dictionary": "^5.5.0",
     "vitest": "^4.1.4"
   },
   "scripts": {

package/readme.md

@@ -21,16 +21,6 @@ In `.css`-files:
 }
 ```
 
-In `.scss`-files:
-
-```scss
-@use '@bi-digital/tokens/dist/tokens' as tokens;
-
-.example {
-  color: tokens.$bi-primary-80;
-}
-```
-
 CDN:
 
 ```html
@@ -41,17 +31,7 @@ We recommend replacing `latest` with a specific version to avoid errors when the
 
 ### Variables in media queries
 
-CSS custom properties do not support the use of variables in media queries, but for users of SCSS, this works. You must import the SCSS variables from `@bi-digital/tokens` directly:
-
-```scss
-@use '@bi-digital/tokens/dist/tokens' as tokens;
-
-@media (min-width: tokens.$bi-breakpoints-sm) {
-  .example {
-    color: tokens.$bi-primary-80;
-  }
-}
-```
+CSS custom properties can't be used inside media query conditions, so this library does not expose any breakpoint tokens.
 
 ### VSCode-extensions
 

package/dist/tokens.scss

@@ -1,357 +0,0 @@
-
-// Do not edit directly, this file was auto-generated.
-
-$bi-basic-key: #000000;
-$bi-basic-white: #ffffff;
-$bi-neutral-0: #fafbfc;
-$bi-neutral-5: #f5f7fa;
-$bi-neutral-10: #e4e8ed;
-$bi-neutral-15: #d5dde4;
-$bi-neutral-20: #c8d1db;
-$bi-neutral-25: #bac6d2;
-$bi-neutral-30: #acbbca;
-$bi-neutral-40: #90a3b7;
-$bi-neutral-50: #597694;
-$bi-neutral-60: #475e75;
-$bi-neutral-70: #3e5266;
-$bi-neutral-75: #344557;
-$bi-neutral-80: #303f4f;
-$bi-neutral-85: #2b3947;
-$bi-neutral-90: #26333f;
-$bi-neutral-95: #222d38;
-$bi-neutral-100: #171f26;
-$bi-primary-0: #ebf3ff;
-$bi-primary-5: #d9e6f9;
-$bi-primary-10: #c5d9f7;
-$bi-primary-15: #b2cdf4;
-$bi-primary-20: #9ec0f1;
-$bi-primary-25: #8bb3ee;
-$bi-primary-30: #75a5f1;
-$bi-primary-40: #6196f4;
-$bi-primary-50: #0a64ff;
-$bi-primary-60: #0b4db4;
-$bi-primary-70: #0b49a1;
-$bi-primary-75: #0c468f;
-$bi-primary-80: #093f82;
-$bi-primary-85: #083a76;
-$bi-primary-90: #042f5b;
-$bi-primary-95: #002341;
-$bi-primary-100: #001932;
-$bi-secondary-0: #fffbeb;
-$bi-secondary-5: #fff7d5;
-$bi-secondary-10: #fff2bf;
-$bi-secondary-15: #ffea95;
-$bi-secondary-20: #ffe680;
-$bi-secondary-25: #ffe26a;
-$bi-secondary-30: #ffde55;
-$bi-secondary-40: #ffd52b;
-$bi-secondary-50: #ffcd00;
-$bi-secondary-60: #deb300;
-$bi-secondary-70: #bd9800;
-$bi-secondary-75: #9d7e00;
-$bi-secondary-80: #7c6400;
-$bi-secondary-85: #5b4900;
-$bi-secondary-90: #4a3c01;
-$bi-secondary-95: #3a2f00;
-$bi-secondary-100: #262000;
-$bi-info-0: #f3ebff;
-$bi-info-5: #e6d5ff;
-$bi-info-10: #d9bfff;
-$bi-info-15: #cdaaff;
-$bi-info-20: #c094ff;
-$bi-info-25: #b480ff;
-$bi-info-30: #a76aff;
-$bi-info-40: #822bff;
-$bi-info-50: #6900ff;
-$bi-info-60: #5c03dc;
-$bi-info-70: #4f05b9;
-$bi-info-75: #420896;
-$bi-info-80: #3b0984;
-$bi-info-85: #350a73;
-$bi-info-90: #2e0b61;
-$bi-info-95: #280d50;
-$bi-info-100: #1a0833;
-$bi-warning-0: #fffbeb;
-$bi-warning-5: #fff7d5;
-$bi-warning-10: #fff2bf;
-$bi-warning-15: #ffea95;
-$bi-warning-20: #ffe680;
-$bi-warning-25: #ffe26a;
-$bi-warning-30: #ffde55;
-$bi-warning-40: #ffd52b;
-$bi-warning-50: #ffcd00;
-$bi-warning-60: #deb300;
-$bi-warning-70: #bd9800;
-$bi-warning-75: #9d7e00;
-$bi-warning-80: #7c6400;
-$bi-warning-85: #5b4900;
-$bi-warning-90: #4a3c01;
-$bi-warning-95: #3a2f00;
-$bi-warning-100: #262000;
-$bi-success-0: #ebffeb;
-$bi-success-5: #d5f4d6;
-$bi-success-10: #bfeec2;
-$bi-success-15: #aae8ae;
-$bi-success-20: #95e299;
-$bi-success-25: #80dd85;
-$bi-success-30: #55d15c;
-$bi-success-40: #2bc634;
-$bi-success-50: #00ab0b;
-$bi-success-60: #04a30d;
-$bi-success-70: #078b0f;
-$bi-success-75: #0b7411;
-$bi-success-80: #0f5d13;
-$bi-success-85: #124515;
-$bi-success-90: #143a16;
-$bi-success-95: #162e17;
-$bi-success-100: #0f1f0f;
-$bi-alert-0: #fff1f0;
-$bi-alert-5: #ffe1df;
-$bi-alert-10: #ffd7d5;
-$bi-alert-15: #ffc3bf;
-$bi-alert-20: #ffafaa;
-$bi-alert-25: #ff8780;
-$bi-alert-30: #ff5f55;
-$bi-alert-40: #ff372b;
-$bi-alert-50: #ff0f00;
-$bi-alert-60: #e41100;
-$bi-alert-70: #c91300;
-$bi-alert-75: #ae1601;
-$bi-alert-80: #931801;
-$bi-alert-85: #731a15;
-$bi-alert-90: #6a1b16;
-$bi-alert-95: #5d1c18;
-$bi-alert-100: #280c0a;
-$bi-scale-0: 0;
-$bi-scale-0-25x: 0.0625rem;
-$bi-scale-0-50x: 0.125rem;
-$bi-scale-0-75x: 0.1875rem;
-$bi-scale-1x: 0.25rem;
-$bi-scale-1-5x: 0.375rem;
-$bi-scale-2x: 0.5rem;
-$bi-scale-3x: 0.75rem;
-$bi-scale-4x: 1rem;
-$bi-scale-5x: 1.25rem;
-$bi-scale-6x: 1.5rem;
-$bi-scale-8x: 2rem;
-$bi-scale-9x: 2.25rem;
-$bi-scale-10x: 2.5rem;
-$bi-scale-11x: 2.75rem;
-$bi-scale-12x: 3rem;
-$bi-scale-14x: 3.5rem;
-$bi-scale-16x: 4rem;
-$bi-scale-18x: 4.5rem;
-$bi-scale-20x: 5rem;
-$bi-scale-21x: 5.25rem;
-$bi-scale-24x: 6rem;
-$bi-scale-32x: 8rem;
-$bi-scale-36x: 9rem;
-$bi-scale-38x: 9.5rem;
-$bi-scale-40x: 10rem;
-$bi-scale-48x: 12rem;
-$bi-scale-56x: 14rem;
-$bi-scale-64x: 16rem;
-$bi-scale-80x: 20rem;
-$bi-scale-84x: 21rem;
-$bi-scale-128x: 32rem;
-$bi-scale-max: 624.9375rem;
-$bi-color-neutral-background: #f5f7fa;
-$bi-color-neutral-surface-subtle: #ffffff;
-$bi-color-neutral-surface: #f5f7fa;
-$bi-color-neutral-surface-strong: #e4e8ed;
-$bi-color-neutral-surface-active: #c8d1db;
-$bi-color-neutral-stroke-subtle: #e4e8ed;
-$bi-color-neutral-stroke: #d5dde4;
-$bi-color-neutral-stroke-strong: #bac6d2;
-$bi-color-neutral-stroke-contrast: #597694;
-$bi-color-neutral-stroke-accent: #0a64ff;
-$bi-color-neutral-text: #222d38;
-$bi-color-neutral-text-secondary: #475e75;
-$bi-color-neutral-text-subtle: #26333f;
-$bi-color-neutral-text-accent: #0b4db4;
-$bi-color-neutral-contrast: #26333f;
-$bi-color-neutral-contrast-hover: #222d38;
-$bi-color-neutral-fill: #597694;
-$bi-color-neutral-on-fill: #ffffff;
-$bi-color-primary-background: #ebf3ff;
-$bi-color-primary-surface-subtle: #ffffff;
-$bi-color-primary-surface: #d9e6f9;
-$bi-color-primary-surface-strong: #c5d9f7;
-$bi-color-primary-surface-active: #9ec0f1;
-$bi-color-primary-stroke-subtle: #c5d9f7;
-$bi-color-primary-stroke: #b2cdf4;
-$bi-color-primary-stroke-strong: #8bb3ee;
-$bi-color-primary-stroke-contrast: #0b4db4;
-$bi-color-primary-stroke-accent: #0a64ff;
-$bi-color-primary-text: #002341;
-$bi-color-primary-text-secondary: rgba(4, 47, 91, 0.7);
-$bi-color-primary-text-subtle: #042f5b;
-$bi-color-primary-text-accent: #0c468f;
-$bi-color-primary-contrast: #0a64ff;
-$bi-color-primary-contrast-hover: #0b4db4;
-$bi-color-primary-fill: #0a64ff;
-$bi-color-primary-on-fill: #ffffff;
-$bi-color-info-background: #f3ebff;
-$bi-color-info-surface-subtle: #ffffff;
-$bi-color-info-surface: #e6d5ff;
-$bi-color-info-surface-strong: #d9bfff;
-$bi-color-info-surface-active: #c094ff;
-$bi-color-info-stroke-subtle: #d9bfff;
-$bi-color-info-stroke: #cdaaff;
-$bi-color-info-stroke-strong: #b480ff;
-$bi-color-info-stroke-contrast: #5c03dc;
-$bi-color-info-stroke-accent: #6900ff;
-$bi-color-info-text: #280d50;
-$bi-color-info-text-secondary: rgba(46, 11, 97, 0.7);
-$bi-color-info-text-subtle: #2e0b61;
-$bi-color-info-text-accent: #420896;
-$bi-color-info-contrast: #2e0b61;
-$bi-color-info-contrast-hover: #280d50;
-$bi-color-info-fill: #6900ff;
-$bi-color-info-on-fill: #ffffff;
-$bi-color-warning-background: #fffbeb;
-$bi-color-warning-surface-subtle: #ffffff;
-$bi-color-warning-surface: #fff2bf;
-$bi-color-warning-surface-strong: #ffea95;
-$bi-color-warning-surface-active: #ffe680;
-$bi-color-warning-stroke-subtle: #fff2bf;
-$bi-color-warning-stroke: #ffea95;
-$bi-color-warning-stroke-strong: #deb300;
-$bi-color-warning-stroke-contrast: #9d7e00;
-$bi-color-warning-stroke-accent: #ffcd00;
-$bi-color-warning-text: #3a2f00;
-$bi-color-warning-text-secondary: rgba(74, 60, 1, 0.7);
-$bi-color-warning-text-subtle: #4a3c01;
-$bi-color-warning-text-accent: #7c6400;
-$bi-color-warning-contrast: #4a3c01;
-$bi-color-warning-contrast-hover: #3a2f00;
-$bi-color-warning-fill: #9d7e00;
-$bi-color-warning-on-fill: #ffffff;
-$bi-color-success-background: #ebffeb;
-$bi-color-success-surface-subtle: #ffffff;
-$bi-color-success-surface: #d5f4d6;
-$bi-color-success-surface-strong: #bfeec2;
-$bi-color-success-surface-active: #95e299;
-$bi-color-success-stroke-subtle: #bfeec2;
-$bi-color-success-stroke: #aae8ae;
-$bi-color-success-stroke-strong: #80dd85;
-$bi-color-success-stroke-contrast: #04a30d;
-$bi-color-success-stroke-accent: #00ab0b;
-$bi-color-success-text: #162e17;
-$bi-color-success-text-secondary: rgba(20, 58, 22, 0.7);
-$bi-color-success-text-subtle: #143a16;
-$bi-color-success-text-accent: #0b7411;
-$bi-color-success-contrast: #143a16;
-$bi-color-success-contrast-hover: #162e17;
-$bi-color-success-fill: #078b0f;
-$bi-color-success-on-fill: #ffffff;
-$bi-color-alert-background: #fff1f0;
-$bi-color-alert-surface-subtle: #ffffff;
-$bi-color-alert-surface: #ffd7d5;
-$bi-color-alert-surface-strong: #ffc3bf;
-$bi-color-alert-surface-active: #ffafaa;
-$bi-color-alert-stroke-subtle: #ffd7d5;
-$bi-color-alert-stroke: #ffc3bf;
-$bi-color-alert-stroke-strong: #ff8780;
-$bi-color-alert-stroke-contrast: #e41100;
-$bi-color-alert-stroke-accent: #ff0f00;
-$bi-color-alert-text: #5d1c18;
-$bi-color-alert-text-secondary: rgba(106, 27, 22, 0.7);
-$bi-color-alert-text-subtle: #6a1b16;
-$bi-color-alert-text-accent: #ae1601;
-$bi-color-alert-contrast: #6a1b16;
-$bi-color-alert-contrast-hover: #5d1c18;
-$bi-color-alert-fill: #e41100;
-$bi-color-alert-on-fill: #ffffff;
-$bi-color-stroke-basic-subtle: rgba(0, 0, 0, 0.1);
-$bi-color-stroke-basic: rgba(0, 0, 0, 0.2);
-$bi-color-stroke-basic-strong: rgba(0, 0, 0, 0.3);
-$bi-color-stroke-basic-contrast: rgba(0, 0, 0, 0.5);
-$bi-states-hover: rgba(38, 51, 63, 0.1);
-$bi-states-press: rgba(38, 51, 63, 0.15);
-$bi-states-focus: #0a64ff;
-$bi-states-focus-background: #ffffff;
-$bi-states-required: #0a64ff;
-$bi-states-hover-dark: rgba(38, 51, 63, 0.1);
-$bi-states-hover-light: rgba(255, 255, 255, 0.1);
-$bi-states-press-dark: rgba(38, 51, 63, 0.15);
-$bi-states-press-light: rgba(255, 255, 255, 0.15);
-$bi-opacity-dark-80: rgba(38, 51, 63, 0.2);
-$bi-opacity-dark-50: rgba(38, 51, 63, 0.5);
-$bi-opacity-light-100: rgba(255, 255, 255, 0);
-$bi-opacity-light-80: rgba(255, 255, 255, 0.2);
-$bi-opacity-light-50: rgba(255, 255, 255, 0.5);
-$bi-stroke-none: 0;
-$bi-stroke-thin: 0.0625rem;
-$bi-stroke-medium: 0.09375rem;
-$bi-stroke-thick: 0.1875rem;
-$bi-stroke-focus: 0.1875rem;
-$bi-stroke-subtle: #e4e8ed;
-$bi-stroke-default: #d5dde4;
-$bi-stroke-strong: #bac6d2;
-$bi-radius-none: 0;
-$bi-radius-small: 0.125rem;
-$bi-radius-medium: 0.25rem;
-$bi-radius-large: 0.5rem;
-$bi-radius-xl: 0.75rem;
-$bi-radius-brand: 3rem;
-$bi-radius-full: 624.9375rem;
-$bi-icon-small: 1.25rem;
-$bi-icon-medium: 1.5rem;
-$bi-icon-large: 2rem;
-$bi-icon-xl: 2.5rem;
-$bi-icon-2xl: 2.75rem;
-$bi-icon-primary: #222d38;
-$bi-icon-secondary: #475e75;
-$bi-icon-disabled: #597694;
-$bi-icon-link: #0a64ff;
-$bi-elevation-25: rgba(38, 51, 63, 0.15);
-$bi-font-family-brand: 'museo-slab', serif;
-$bi-font-family-plain: 'museo-sans', Arial, sans-serif;
-$bi-font-weight-bold: 700;
-$bi-font-weight-regular: 500;
-$bi-font-color-primary: #222d38;
-$bi-font-color-secondary: #475e75;
-$bi-font-color-disabled: #597694;
-$bi-font-color-accent: #0b4db4;
-$bi-font-color-strong-accent: #0a64ff;
-$bi-font-color-primary-dark-background: #ffffff;
-$bi-font-color-secondary-dark-background: rgba(255, 255, 255, 0.7);
-$bi-font-color-disabled-dark-background: rgba(255, 255, 255, 0.7);
-$bi-font-color-accent-dark-background: #9ec0f1;
-$bi-font-color-strong-accent-dark-background: #75a5f1;
-$bi-font-color-primary-light-blue-background: #042f5b;
-$bi-font-color-secondary-light-blue-background: rgba(4, 47, 91, 0.7);
-$bi-font-color-disabled-light-blue-background: rgba(4, 47, 91, 0.7);
-$bi-font-color-accent-light-blue-background: #0c468f;
-$bi-font-color-strong-accent-light-blue-background: #0a64ff;
-$bi-layout-navbar-height: 4rem;
-$bi-font-display-large: 500 4rem/4.5rem 'museo-slab', serif;
-$bi-font-display-medium: 500 3rem/3.5rem 'museo-slab', serif;
-$bi-font-headline-large: 500 2.5rem/2.875rem 'museo-slab', serif;
-$bi-font-headline-medium: 500 2.25rem/2.5rem 'museo-slab', serif;
-$bi-font-headline-small: 500 1.75rem/2rem 'museo-slab', serif;
-$bi-font-title-bold-xxl: 700 2rem/2.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-xl: 700 1.75rem/2rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-large: 700 1.5rem/1.6875rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-medium: 700 1.25rem/1.4375rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-small: 700 1.125rem/1.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-xs: 700 1rem/1.125rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-bold-xxs: 700 0.875rem/1rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-xxl: 500 2rem/2.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-xl: 500 1.75rem/2rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-large: 500 1.5rem/1.6875rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-medium: 500 1.25rem/1.4375rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-small: 500 1.125rem/1.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-xs: 500 1rem/1.125rem 'museo-sans', Arial, sans-serif;
-$bi-font-title-regular-xxs: 500 0.875rem/1rem 'museo-sans', Arial, sans-serif;
-$bi-font-label-xl: 700 1.125rem/1.6875rem 'museo-sans', Arial, sans-serif;
-$bi-font-label-large: 700 1rem/1.5rem 'museo-sans', Arial, sans-serif;
-$bi-font-label-medium: 700 0.875rem/1.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-label-small: 700 0.8125rem/1.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-label-xs: 700 0.75rem/1.125rem 'museo-sans', Arial, sans-serif;
-$bi-font-body-xl: 500 1.125rem/1.6875rem 'museo-sans', Arial, sans-serif;
-$bi-font-body-large: 500 1rem/1.5rem 'museo-sans', Arial, sans-serif;
-$bi-font-body-medium: 500 0.875rem/1.3125rem 'museo-sans', Arial, sans-serif;
-$bi-font-body-small: 500 0.8125rem/1.25rem 'museo-sans', Arial, sans-serif;
-$bi-font-body-xs: 500 0.75rem/1.125rem 'museo-sans', Arial, sans-serif;