@haiilo/catalyst-tokens 7.0.1 → 8.0.0

package/dist/css/variables.css

@@ -65,6 +65,13 @@
   --cat-color-base-brand-inverted-400: 147, 180, 242;
   --cat-color-base-brand-inverted-500: 147, 180, 242;
   --cat-color-base-brand-inverted-600: 147, 180, 242;
+  --cat-color-base-blue-100: 179, 213, 248;
+  --cat-color-base-blue-200: 128, 185, 243;
+  --cat-color-base-blue-300: 38, 136, 234;
+  --cat-color-base-blue-400: 0, 115, 230;
+  --cat-color-base-blue-500: 0, 107, 227;
+  --cat-color-base-blue-600: 0, 96, 223;
+  --cat-color-base-blue-700: 0, 67, 213;
   --cat-color-base-green-100: 212, 237, 228;
   --cat-color-base-green-200: 0, 187, 125;
   --cat-color-base-green-300: 0, 170, 113;
@@ -122,6 +129,15 @@
   --cat-color-theme-secondary-inverted-text: 255, 255, 255;
   --cat-color-theme-secondary-inverted-text-hover: 255, 255, 255;
   --cat-color-theme-secondary-inverted-text-active: 255, 255, 255;
+  --cat-color-theme-info-bg: 0, 115, 230;
+  --cat-color-theme-info-bg-hover: 0, 107, 227;
+  --cat-color-theme-info-bg-active: 0, 96, 223;
+  --cat-color-theme-info-fill: 255, 255, 255;
+  --cat-color-theme-info-fill-hover: 255, 255, 255;
+  --cat-color-theme-info-fill-active: 255, 255, 255;
+  --cat-color-theme-info-text: 0, 115, 230;
+  --cat-color-theme-info-text-hover: 0, 107, 227;
+  --cat-color-theme-info-text-active: 0, 96, 223;
   --cat-color-theme-success-bg: 0, 132, 88;
   --cat-color-theme-success-bg-hover: 0, 117, 78;
   --cat-color-theme-success-bg-active: 0, 105, 70;
@@ -169,8 +185,7 @@
   --cat-color-ui-font-muted: 81, 92, 108;
   --cat-color-ui-font-quote: 81, 92, 108;
   --cat-color-ui-font-tooltip: 255, 255, 255;
-  --cat-font-family-head: Lato;
-  --cat-font-family-body: Lato;
+  --cat-font-family-base: Lato;
   --cat-font-family-mono: '';
   --cat-font-family-emoji: '';
   --cat-font-weight-head: 600;

package/dist/export/figma.json

@@ -89,6 +89,36 @@
           "$value": "#93b4f2"
         }
       },
+      "blue": {
+        "100": {
+          "$type": "color",
+          "$value": "#b3d5f8"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#80b9f3"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#2688ea"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#0060df"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0043d5"
+        }
+      },
       "green": {
         "100": {
           "$type": "color",
@@ -333,6 +363,44 @@
           "$value": "#ffffff"
         }
       },
+      "info": {
+        "bg": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "bgHover": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "bgActive": {
+          "$type": "color",
+          "$value": "#0060df"
+        },
+        "fill": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "fillHover": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "fillActive": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "textHover": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "textActive": {
+          "$type": "color",
+          "$value": "#0060df"
+        }
+      },
       "success": {
         "bg": {
           "$type": "color",
@@ -539,11 +607,7 @@
   },
   "font": {
     "family": {
-      "head": {
-        "$type": "fontFamily",
-        "$value": "Lato"
-      },
-      "body": {
+      "base": {
         "$type": "fontFamily",
         "$value": "Lato"
       },

package/dist/export/theme.json

@@ -223,11 +223,7 @@
     "$type": "color",
     "$value": "#ffffff"
   },
-  "font-family-head": {
-    "$type": "fontFamily",
-    "$value": "Lato"
-  },
-  "font-family-body": {
+  "font-family-base": {
     "$type": "fontFamily",
     "$value": "Lato"
   },

package/dist/export/zeroheight.json

@@ -267,6 +267,36 @@
           "$value": "#93b4f2"
         }
       },
+      "blue": {
+        "100": {
+          "$type": "color",
+          "$value": "#b3d5f8"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#80b9f3"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#2688ea"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#0060df"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0043d5"
+        }
+      },
       "green": {
         "100": {
           "$type": "color",
@@ -511,6 +541,44 @@
           "$value": "#ffffff"
         }
       },
+      "info": {
+        "bg": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "bgHover": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "bgActive": {
+          "$type": "color",
+          "$value": "#0060df"
+        },
+        "fill": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "fillHover": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "fillActive": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "#0073e6"
+        },
+        "textHover": {
+          "$type": "color",
+          "$value": "#006be3"
+        },
+        "textActive": {
+          "$type": "color",
+          "$value": "#0060df"
+        }
+      },
       "success": {
         "bg": {
           "$type": "color",
@@ -717,11 +785,7 @@
   },
   "font": {
     "family": {
-      "head": {
-        "$type": "fontFamily",
-        "$value": "Lato"
-      },
-      "body": {
+      "base": {
         "$type": "fontFamily",
         "$value": "Lato"
       },

package/dist/js/variables.d.ts

@@ -64,6 +64,13 @@ export const colorBaseBrand700 : string;
 export const colorBaseBrandInverted400 : string;
 export const colorBaseBrandInverted500 : string;
 export const colorBaseBrandInverted600 : string;
+export const colorBaseBlue100 : string;
+export const colorBaseBlue200 : string;
+export const colorBaseBlue300 : string;
+export const colorBaseBlue400 : string;
+export const colorBaseBlue500 : string;
+export const colorBaseBlue600 : string;
+export const colorBaseBlue700 : string;
 export const colorBaseGreen100 : string;
 export const colorBaseGreen200 : string;
 export const colorBaseGreen300 : string;
@@ -121,6 +128,15 @@ export const colorThemeSecondaryInvertedFillActive : string;
 export const colorThemeSecondaryInvertedText : string;
 export const colorThemeSecondaryInvertedTextHover : string;
 export const colorThemeSecondaryInvertedTextActive : string;
+export const colorThemeInfoBg : string;
+export const colorThemeInfoBgHover : string;
+export const colorThemeInfoBgActive : string;
+export const colorThemeInfoFill : string;
+export const colorThemeInfoFillHover : string;
+export const colorThemeInfoFillActive : string;
+export const colorThemeInfoText : string;
+export const colorThemeInfoTextHover : string;
+export const colorThemeInfoTextActive : string;
 export const colorThemeSuccessBg : string;
 export const colorThemeSuccessBgHover : string;
 export const colorThemeSuccessBgActive : string;
@@ -168,8 +184,7 @@ export const colorUiFontBaseInverted : string;
 export const colorUiFontMuted : string;
 export const colorUiFontQuote : string;
 export const colorUiFontTooltip : string;
-export const fontFamilyHead : string;
-export const fontFamilyBody : string;
+export const fontFamilyBase : string;
 export const fontFamilyMono : string;
 export const fontFamilyEmoji : string;
 export const fontWeightHead : number;

package/dist/js/variables.js

@@ -64,6 +64,13 @@ export const colorBaseBrand700 = "#175b63";
 export const colorBaseBrandInverted400 = "#93b4f2";
 export const colorBaseBrandInverted500 = "#93b4f2";
 export const colorBaseBrandInverted600 = "#93b4f2";
+export const colorBaseBlue100 = "#b3d5f8";
+export const colorBaseBlue200 = "#80b9f3";
+export const colorBaseBlue300 = "#2688ea";
+export const colorBaseBlue400 = "#0073e6";
+export const colorBaseBlue500 = "#006be3";
+export const colorBaseBlue600 = "#0060df";
+export const colorBaseBlue700 = "#0043d5";
 export const colorBaseGreen100 = "#d4ede4";
 export const colorBaseGreen200 = "#00bb7d";
 export const colorBaseGreen300 = "#00aa71";
@@ -121,6 +128,15 @@ export const colorThemeSecondaryInvertedFillActive = "#000000";
 export const colorThemeSecondaryInvertedText = "#ffffff";
 export const colorThemeSecondaryInvertedTextHover = "#ffffff";
 export const colorThemeSecondaryInvertedTextActive = "#ffffff";
+export const colorThemeInfoBg = "#0073e6";
+export const colorThemeInfoBgHover = "#006be3";
+export const colorThemeInfoBgActive = "#0060df";
+export const colorThemeInfoFill = "#ffffff";
+export const colorThemeInfoFillHover = "#ffffff";
+export const colorThemeInfoFillActive = "#ffffff";
+export const colorThemeInfoText = "#0073e6";
+export const colorThemeInfoTextHover = "#006be3";
+export const colorThemeInfoTextActive = "#0060df";
 export const colorThemeSuccessBg = "#008458";
 export const colorThemeSuccessBgHover = "#00754e";
 export const colorThemeSuccessBgActive = "#006946";
@@ -168,8 +184,7 @@ export const colorUiFontBaseInverted = "#ffffff";
 export const colorUiFontMuted = "#515c6c";
 export const colorUiFontQuote = "#515c6c";
 export const colorUiFontTooltip = "#ffffff";
-export const fontFamilyHead = "Lato";
-export const fontFamilyBody = "Lato";
+export const fontFamilyBase = "Lato";
 export const fontFamilyMono = "''";
 export const fontFamilyEmoji = "''";
 export const fontWeightHead = 600;

package/dist/json/variables.json

@@ -81,6 +81,15 @@
         "500": "#93b4f2",
         "600": "#93b4f2"
       },
+      "blue": {
+        "100": "#b3d5f8",
+        "200": "#80b9f3",
+        "300": "#2688ea",
+        "400": "#0073e6",
+        "500": "#006be3",
+        "600": "#0060df",
+        "700": "#0043d5"
+      },
       "green": {
         "100": "#d4ede4",
         "200": "#00bb7d",
@@ -154,6 +163,17 @@
         "textHover": "#ffffff",
         "textActive": "#ffffff"
       },
+      "info": {
+        "bg": "#0073e6",
+        "bgHover": "#006be3",
+        "bgActive": "#0060df",
+        "fill": "#ffffff",
+        "fillHover": "#ffffff",
+        "fillActive": "#ffffff",
+        "text": "#0073e6",
+        "textHover": "#006be3",
+        "textActive": "#0060df"
+      },
       "success": {
         "bg": "#008458",
         "bgHover": "#00754e",
@@ -219,8 +239,7 @@
   },
   "font": {
     "family": {
-      "head": "Lato",
-      "body": "Lato",
+      "base": "Lato",
       "mono": "''",
       "emoji": "''"
     },

package/dist/scss/_variables.scss

@@ -98,6 +98,13 @@ $cat-color-base-green-400: 0, 132, 88 !default;
 $cat-color-base-green-300: 0, 170, 113 !default;
 $cat-color-base-green-200: 0, 187, 125 !default;
 $cat-color-base-green-100: 212, 237, 228 !default;
+$cat-color-base-blue-700: 0, 67, 213 !default;
+$cat-color-base-blue-600: 0, 96, 223 !default;
+$cat-color-base-blue-500: 0, 107, 227 !default;
+$cat-color-base-blue-400: 0, 115, 230 !default;
+$cat-color-base-blue-300: 38, 136, 234 !default;
+$cat-color-base-blue-200: 128, 185, 243 !default;
+$cat-color-base-blue-100: 179, 213, 248 !default;
 $cat-color-base-brand-inverted-600: 147, 180, 242 !default;
 $cat-color-base-brand-inverted-500: 147, 180, 242 !default;
 $cat-color-base-brand-inverted-400: 147, 180, 242 !default;
@@ -160,8 +167,7 @@ $cat-asset-font-lato-woff-black-italic: "Lato-BlackItalic.woff" !default;
 $cat-asset-font-lato-woff2-black: "Lato-Black.woff2" !default;
 $cat-asset-font-lato-woff-black: "Lato-Black.woff" !default;
 $cat-asset-font-lato-name: "Lato" !default;
-$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
-$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !default;
+$cat-font-family-base: var(--cat-font-family-base, $cat-asset-font-lato-name) !default;
 $cat-color-ui-font-tooltip: var(--cat-font-color-tooltip, $cat-color-base-white) !default;
 $cat-color-ui-font-quote: var(--cat-font-color-quote, $cat-color-base-neutral-500) !default;
 $cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-500) !default;
@@ -207,6 +213,15 @@ $cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-white) !d
 $cat-color-theme-success-bg-active: var(--cat-success-bg-active, $cat-color-base-green-600) !default;
 $cat-color-theme-success-bg-hover: var(--cat-success-bg-hover, $cat-color-base-green-500) !default;
 $cat-color-theme-success-bg: var(--cat-success-bg, $cat-color-base-green-400) !default;
+$cat-color-theme-info-text-active: var(--cat-success-text-active, $cat-color-base-blue-600) !default;
+$cat-color-theme-info-text-hover: var(--cat-success-text-hover, $cat-color-base-blue-500) !default;
+$cat-color-theme-info-text: var(--cat-success-text, $cat-color-base-blue-400) !default;
+$cat-color-theme-info-fill-active: var(--cat-success-fill-active, $cat-color-base-white) !default;
+$cat-color-theme-info-fill-hover: var(--cat-success-fill-hover, $cat-color-base-white) !default;
+$cat-color-theme-info-fill: var(--cat-success-fill, $cat-color-base-white) !default;
+$cat-color-theme-info-bg-active: var(--cat-success-bg-active, $cat-color-base-blue-600) !default;
+$cat-color-theme-info-bg-hover: var(--cat-success-bg-hover, $cat-color-base-blue-500) !default;
+$cat-color-theme-info-bg: var(--cat-success-bg, $cat-color-base-blue-400) !default;
 $cat-color-theme-secondary-inverted-text-active: $cat-color-base-white !default;
 $cat-color-theme-secondary-inverted-text-hover: $cat-color-base-white !default;
 $cat-color-theme-secondary-inverted-text: $cat-color-base-white !default;
@@ -327,6 +342,15 @@ $tokens: (
         '500': $cat-color-base-brand-inverted-500,
         '600': $cat-color-base-brand-inverted-600
       ),
+      'blue': (
+        '100': $cat-color-base-blue-100,
+        '200': $cat-color-base-blue-200,
+        '300': $cat-color-base-blue-300,
+        '400': $cat-color-base-blue-400,
+        '500': $cat-color-base-blue-500,
+        '600': $cat-color-base-blue-600,
+        '700': $cat-color-base-blue-700
+      ),
       'green': (
         '100': $cat-color-base-green-100,
         '200': $cat-color-base-green-200,
@@ -400,6 +424,17 @@ $tokens: (
         'textHover': $cat-color-theme-secondary-inverted-text-hover,
         'textActive': $cat-color-theme-secondary-inverted-text-active
       ),
+      'info': (
+        'bg': $cat-color-theme-info-bg,
+        'bgHover': $cat-color-theme-info-bg-hover,
+        'bgActive': $cat-color-theme-info-bg-active,
+        'fill': $cat-color-theme-info-fill,
+        'fillHover': $cat-color-theme-info-fill-hover,
+        'fillActive': $cat-color-theme-info-fill-active,
+        'text': $cat-color-theme-info-text,
+        'textHover': $cat-color-theme-info-text-hover,
+        'textActive': $cat-color-theme-info-text-active
+      ),
       'success': (
         'bg': $cat-color-theme-success-bg,
         'bgHover': $cat-color-theme-success-bg-hover,
@@ -465,8 +500,7 @@ $tokens: (
   ),
   'font': (
     'family': (
-      'head': $cat-font-family-head,
-      'body': $cat-font-family-body,
+      'base': $cat-font-family-base,
       'mono': $cat-font-family-mono,
       'emoji': $cat-font-family-emoji
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst-tokens",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "Design tokens for Catalyst Design System",
   "license": "MIT",
   "repository": {