@bi-digital/tokens 0.0.27 → 0.2.0

package/dist/tokens.css

@@ -115,6 +115,7 @@
   --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;
@@ -128,4 +129,37 @@
   --bi-scale-64x: 16rem;
   --bi-scale-80x: 20rem;
   --bi-scale-max: 624.9375rem;
+  --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-default: 0.09375rem;
+  --bi-elevation-25: rgba(38, 51, 63, 0.15);
+  --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-stroke-none: var(--bi-scale-0);
+  --bi-stroke-thin: var(--bi-scale-0-25x);
+  --bi-stroke-thick: var(--bi-scale-0-50x);
+  --bi-stroke-color-1: var(--bi-neutral-15);
+  --bi-stroke-color-2: var(--bi-neutral-25);
+  --bi-stroke-color-3: var(--bi-neutral-50);
+  --bi-radius-none: var(--bi-scale-0);
+  --bi-radius-small: var(--bi-scale-0-50x);
+  --bi-radius-medium: var(--bi-scale-1x);
+  --bi-radius-large: var(--bi-scale-2x);
+  --bi-radius-xl: var(--bi-scale-3x);
+  --bi-radius-brand: var(--bi-scale-12x);
+  --bi-radius-full: var(--bi-scale-max);
+  --bi-icon-xs: var(--bi-scale-5x);
+  --bi-icon-small: var(--bi-scale-6x);
+  --bi-icon-medium: var(--bi-scale-8x);
+  --bi-icon-large: var(--bi-scale-10x);
+  --bi-icon-2xl: var(--bi-scale-12x);
+  --bi-icon-primary: var(--bi-neutral-95);
+  --bi-icon-secondary: var(--bi-neutral-50);
+  --bi-icon-disabled: var(--bi-neutral-50);
+  --bi-icon-link: var(--bi-primary-50);
 }

package/dist/tokens.d.ts

@@ -144,6 +144,7 @@ declare const tokens: {
     "8x": DesignToken;
     "9x": DesignToken;
     "10x": DesignToken;
+    "11x": DesignToken;
     "12x": DesignToken;
     "14x": DesignToken;
     "16x": DesignToken;
@@ -158,4 +159,49 @@ declare const tokens: {
     "80x": DesignToken;
     max: DesignToken;
   };
+  opacity: {
+    dark_80: DesignToken;
+    dark_50: DesignToken;
+    light_100: DesignToken;
+    light_80: DesignToken;
+    light_50: DesignToken;
+  };
+  stroke: {
+    none: DesignToken;
+    thin: DesignToken;
+    default: DesignToken;
+    thick: DesignToken;
+    "color-1": DesignToken;
+    "color-2": DesignToken;
+    "color-3": DesignToken;
+  };
+  radius: {
+    none: DesignToken;
+    small: DesignToken;
+    medium: DesignToken;
+    large: DesignToken;
+    xl: DesignToken;
+    brand: DesignToken;
+    full: DesignToken;
+  };
+  icon: {
+    xs: DesignToken;
+    small: DesignToken;
+    medium: DesignToken;
+    large: DesignToken;
+    "2xl": DesignToken;
+    Primary: DesignToken;
+    Secondary: DesignToken;
+    Disabled: DesignToken;
+    Link: DesignToken;
+  };
+  elevation: {
+    "25": DesignToken;
+  };
+  states: {
+    "hover-dark": DesignToken;
+    "hover-light": DesignToken;
+    "press-dark": DesignToken;
+    "press-light": DesignToken;
+  };
 };

package/dist/tokens.js

@@ -1812,6 +1812,22 @@ export default {
       },
       path: ["scale", "10x"],
     },
+    "11x": {
+      $type: "dimension",
+      $value: "2.75rem",
+      filePath: "tokens/Reference.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "44px",
+      },
+      name: "bi-scale-11x",
+      attributes: {
+        category: "scale",
+        type: "11x",
+      },
+      path: ["scale", "11x"],
+    },
     "12x": {
       $type: "dimension",
       $value: "3rem",
@@ -2021,4 +2037,544 @@ export default {
       path: ["scale", "max"],
     },
   },
+  opacity: {
+    dark_80: {
+      $type: "color",
+      $value: "#26333f33",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#26333f33",
+      },
+      name: "bi-opacity-dark-80",
+      attributes: {
+        category: "opacity",
+        type: "dark_80",
+      },
+      path: ["opacity", "dark_80"],
+    },
+    dark_50: {
+      $type: "color",
+      $value: "#26333f80",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#26333f80",
+      },
+      name: "bi-opacity-dark-50",
+      attributes: {
+        category: "opacity",
+        type: "dark_50",
+      },
+      path: ["opacity", "dark_50"],
+    },
+    light_100: {
+      $type: "color",
+      $value: "#ffffff00",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#ffffff00",
+      },
+      name: "bi-opacity-light-100",
+      attributes: {
+        category: "opacity",
+        type: "light_100",
+      },
+      path: ["opacity", "light_100"],
+    },
+    light_80: {
+      $type: "color",
+      $value: "#ffffff33",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#ffffff33",
+      },
+      name: "bi-opacity-light-80",
+      attributes: {
+        category: "opacity",
+        type: "light_80",
+      },
+      path: ["opacity", "light_80"],
+    },
+    light_50: {
+      $type: "color",
+      $value: "#ffffff80",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#ffffff80",
+      },
+      name: "bi-opacity-light-50",
+      attributes: {
+        category: "opacity",
+        type: "light_50",
+      },
+      path: ["opacity", "light_50"],
+    },
+  },
+  stroke: {
+    none: {
+      $type: "dimension",
+      $value: "0",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.0}",
+      },
+      name: "bi-stroke-none",
+      attributes: {
+        category: "stroke",
+        type: "none",
+      },
+      path: ["stroke", "none"],
+    },
+    thin: {
+      $type: "dimension",
+      $value: "0.0625rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.0,25x}",
+      },
+      name: "bi-stroke-thin",
+      attributes: {
+        category: "stroke",
+        type: "thin",
+      },
+      path: ["stroke", "thin"],
+    },
+    default: {
+      $type: "dimension",
+      $value: "0.09375rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "1.5px",
+      },
+      name: "bi-stroke-default",
+      attributes: {
+        category: "stroke",
+        type: "default",
+      },
+      path: ["stroke", "default"],
+    },
+    thick: {
+      $type: "dimension",
+      $value: "0.125rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.0,50x}",
+      },
+      name: "bi-stroke-thick",
+      attributes: {
+        category: "stroke",
+        type: "thick",
+      },
+      path: ["stroke", "thick"],
+    },
+    "color-1": {
+      $type: "color",
+      $value: "#d5dde4",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.15}",
+      },
+      name: "bi-stroke-color-1",
+      attributes: {
+        category: "stroke",
+        type: "color-1",
+      },
+      path: ["stroke", "color-1"],
+    },
+    "color-2": {
+      $type: "color",
+      $value: "#bac6d2",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.25}",
+      },
+      name: "bi-stroke-color-2",
+      attributes: {
+        category: "stroke",
+        type: "color-2",
+      },
+      path: ["stroke", "color-2"],
+    },
+    "color-3": {
+      $type: "color",
+      $value: "#597694",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.50}",
+      },
+      name: "bi-stroke-color-3",
+      attributes: {
+        category: "stroke",
+        type: "color-3",
+      },
+      path: ["stroke", "color-3"],
+    },
+  },
+  radius: {
+    none: {
+      $type: "dimension",
+      $value: "0",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.0}",
+      },
+      name: "bi-radius-none",
+      attributes: {
+        category: "radius",
+        type: "none",
+      },
+      path: ["radius", "none"],
+    },
+    small: {
+      $type: "dimension",
+      $value: "0.125rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.0,50x}",
+      },
+      name: "bi-radius-small",
+      attributes: {
+        category: "radius",
+        type: "small",
+      },
+      path: ["radius", "small"],
+    },
+    medium: {
+      $type: "dimension",
+      $value: "0.25rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.1x}",
+      },
+      name: "bi-radius-medium",
+      attributes: {
+        category: "radius",
+        type: "medium",
+      },
+      path: ["radius", "medium"],
+    },
+    large: {
+      $type: "dimension",
+      $value: "0.5rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.2x}",
+      },
+      name: "bi-radius-large",
+      attributes: {
+        category: "radius",
+        type: "large",
+      },
+      path: ["radius", "large"],
+    },
+    xl: {
+      $type: "dimension",
+      $value: "0.75rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.3x}",
+      },
+      name: "bi-radius-xl",
+      attributes: {
+        category: "radius",
+        type: "xl",
+      },
+      path: ["radius", "xl"],
+    },
+    brand: {
+      $type: "dimension",
+      $value: "3rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.12x}",
+      },
+      name: "bi-radius-brand",
+      attributes: {
+        category: "radius",
+        type: "brand",
+      },
+      path: ["radius", "brand"],
+    },
+    full: {
+      $type: "dimension",
+      $value: "624.9375rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.max}",
+      },
+      name: "bi-radius-full",
+      attributes: {
+        category: "radius",
+        type: "full",
+      },
+      path: ["radius", "full"],
+    },
+  },
+  icon: {
+    xs: {
+      $type: "dimension",
+      $value: "1.25rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.5x}",
+      },
+      name: "bi-icon-xs",
+      attributes: {
+        category: "icon",
+        type: "xs",
+      },
+      path: ["icon", "xs"],
+    },
+    small: {
+      $type: "dimension",
+      $value: "1.5rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.6x}",
+      },
+      name: "bi-icon-small",
+      attributes: {
+        category: "icon",
+        type: "small",
+      },
+      path: ["icon", "small"],
+    },
+    medium: {
+      $type: "dimension",
+      $value: "2rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.8x}",
+      },
+      name: "bi-icon-medium",
+      attributes: {
+        category: "icon",
+        type: "medium",
+      },
+      path: ["icon", "medium"],
+    },
+    large: {
+      $type: "dimension",
+      $value: "2.5rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.10x}",
+      },
+      name: "bi-icon-large",
+      attributes: {
+        category: "icon",
+        type: "large",
+      },
+      path: ["icon", "large"],
+    },
+    "2xl": {
+      $type: "dimension",
+      $value: "3rem",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "dimension",
+        $value: "{scale.12x}",
+      },
+      name: "bi-icon-2xl",
+      attributes: {
+        category: "icon",
+        type: "2xl",
+      },
+      path: ["icon", "2xl"],
+    },
+    Primary: {
+      $type: "color",
+      $value: "#26333f",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.95}",
+      },
+      name: "bi-icon-primary",
+      attributes: {
+        category: "icon",
+        type: "Primary",
+      },
+      path: ["icon", "Primary"],
+    },
+    Secondary: {
+      $type: "color",
+      $value: "#597694",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.50}",
+      },
+      name: "bi-icon-secondary",
+      attributes: {
+        category: "icon",
+        type: "Secondary",
+      },
+      path: ["icon", "Secondary"],
+    },
+    Disabled: {
+      $type: "color",
+      $value: "#597694",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{neutral.50}",
+      },
+      name: "bi-icon-disabled",
+      attributes: {
+        category: "icon",
+        type: "Disabled",
+      },
+      path: ["icon", "Disabled"],
+    },
+    Link: {
+      $type: "color",
+      $value: "#0a64ff",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "{primary.50}",
+      },
+      name: "bi-icon-link",
+      attributes: {
+        category: "icon",
+        type: "Link",
+      },
+      path: ["icon", "Link"],
+    },
+  },
+  elevation: {
+    25: {
+      $type: "color",
+      $value: "#26333f26",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#26333f26",
+      },
+      name: "bi-elevation-25",
+      attributes: {
+        category: "elevation",
+        type: "25",
+      },
+      path: ["elevation", "25"],
+    },
+  },
+  states: {
+    "hover-dark": {
+      $type: "color",
+      $value: "#26333f1a",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#26333f1a",
+      },
+      name: "bi-states-hover-dark",
+      attributes: {
+        category: "states",
+        type: "hover-dark",
+      },
+      path: ["states", "hover-dark"],
+    },
+    "hover-light": {
+      $type: "color",
+      $value: "#ffffff1a",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#ffffff1a",
+      },
+      name: "bi-states-hover-light",
+      attributes: {
+        category: "states",
+        type: "hover-light",
+      },
+      path: ["states", "hover-light"],
+    },
+    "press-dark": {
+      $type: "color",
+      $value: "#26333f26",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#26333f26",
+      },
+      name: "bi-states-press-dark",
+      attributes: {
+        category: "states",
+        type: "press-dark",
+      },
+      path: ["states", "press-dark"],
+    },
+    "press-light": {
+      $type: "color",
+      $value: "#ffffff26",
+      filePath: "tokens/System.Mode 1.tokens.json",
+      isSource: true,
+      original: {
+        $type: "color",
+        $value: "#ffffff26",
+      },
+      name: "bi-states-press-light",
+      attributes: {
+        category: "states",
+        type: "press-light",
+      },
+      path: ["states", "press-light"],
+    },
+  },
 };

package/dist/tokens.scss

@@ -113,6 +113,7 @@ $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;
@@ -126,3 +127,36 @@ $bi-scale-56x: 14rem;
 $bi-scale-64x: 16rem;
 $bi-scale-80x: 20rem;
 $bi-scale-max: 624.9375rem;
+$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-default: 0.09375rem;
+$bi-stroke-thick: 0.125rem;
+$bi-stroke-color-1: #d5dde4;
+$bi-stroke-color-2: #bac6d2;
+$bi-stroke-color-3: #597694;
+$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-xs: 1.25rem;
+$bi-icon-small: 1.5rem;
+$bi-icon-medium: 2rem;
+$bi-icon-large: 2.5rem;
+$bi-icon-2xl: 3rem;
+$bi-icon-primary: #26333f;
+$bi-icon-secondary: #597694;
+$bi-icon-disabled: #597694;
+$bi-icon-link: #0a64ff;
+$bi-elevation-25: rgba(38, 51, 63, 0.15);
+$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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bi-digital/tokens",
-  "version": "0.0.27",
+  "version": "0.2.0",
   "description": "CSS and SASS variables for the BI Design System",
   "author": "BI Digital",
   "license": "ISC",