@haiilo/catalyst-tokens 2.5.0 → 3.0.1

package/dist/css/variables.css

@@ -58,7 +58,7 @@
   --cat-color-base-neutral-500: 81, 92, 108;
   --cat-color-base-neutral-600: 57, 66, 81;
   --cat-color-base-neutral-700: 27, 31, 38;
-  --cat-color-base-neutral-dark-400: 105, 118, 135;
+  --cat-color-base-neutral-inverted-400: 105, 118, 135;
   --cat-color-base-brand-100: 201, 229, 232;
   --cat-color-base-brand-200: 45, 179, 195;
   --cat-color-base-brand-300: 41, 163, 177;
@@ -66,9 +66,9 @@
   --cat-color-base-brand-500: 1, 115, 132;
   --cat-color-base-brand-600: 2, 99, 113;
   --cat-color-base-brand-700: 23, 91, 99;
-  --cat-color-base-brand-dark-400: 147, 180, 242;
-  --cat-color-base-brand-dark-500: 147, 180, 242;
-  --cat-color-base-brand-dark-600: 147, 180, 242;
+  --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-green-100: 212, 237, 228;
   --cat-color-base-green-200: 0, 187, 125;
   --cat-color-base-green-300: 0, 170, 113;
@@ -99,15 +99,15 @@
   --cat-color-theme-primary-text: 0, 129, 148;
   --cat-color-theme-primary-text-hover: 1, 115, 132;
   --cat-color-theme-primary-text-active: 2, 99, 113;
-  --cat-color-theme-primary-dark-bg: 147, 180, 242;
-  --cat-color-theme-primary-dark-bg-hover: 147, 180, 242;
-  --cat-color-theme-primary-dark-bg-active: 147, 180, 242;
-  --cat-color-theme-primary-dark-fill: 0, 0, 0;
-  --cat-color-theme-primary-dark-fill-hover: 0, 0, 0;
-  --cat-color-theme-primary-dark-fill-active: 0, 0, 0;
-  --cat-color-theme-primary-dark-text: 147, 180, 242;
-  --cat-color-theme-primary-dark-text-hover: 147, 180, 242;
-  --cat-color-theme-primary-dark-text-active: 147, 180, 242;
+  --cat-color-theme-primary-inverted-bg: 147, 180, 242;
+  --cat-color-theme-primary-inverted-bg-hover: 147, 180, 242;
+  --cat-color-theme-primary-inverted-bg-active: 147, 180, 242;
+  --cat-color-theme-primary-inverted-fill: 0, 0, 0;
+  --cat-color-theme-primary-inverted-fill-hover: 0, 0, 0;
+  --cat-color-theme-primary-inverted-fill-active: 0, 0, 0;
+  --cat-color-theme-primary-inverted-text: 147, 180, 242;
+  --cat-color-theme-primary-inverted-text-hover: 147, 180, 242;
+  --cat-color-theme-primary-inverted-text-active: 147, 180, 242;
   --cat-color-theme-secondary-bg: 105, 118, 135;
   --cat-color-theme-secondary-bg-hover: 105, 118, 135;
   --cat-color-theme-secondary-bg-active: 105, 118, 135;
@@ -117,15 +117,15 @@
   --cat-color-theme-secondary-text: 0, 0, 0;
   --cat-color-theme-secondary-text-hover: 0, 0, 0;
   --cat-color-theme-secondary-text-active: 0, 0, 0;
-  --cat-color-theme-secondary-dark-bg: 105, 118, 135;
-  --cat-color-theme-secondary-dark-bg-hover: 105, 118, 135;
-  --cat-color-theme-secondary-dark-bg-active: 105, 118, 135;
-  --cat-color-theme-secondary-dark-fill: 0, 0, 0;
-  --cat-color-theme-secondary-dark-fill-hover: 0, 0, 0;
-  --cat-color-theme-secondary-dark-fill-active: 0, 0, 0;
-  --cat-color-theme-secondary-dark-text: 255, 255, 255;
-  --cat-color-theme-secondary-dark-text-hover: 255, 255, 255;
-  --cat-color-theme-secondary-dark-text-active: 255, 255, 255;
+  --cat-color-theme-secondary-inverted-bg: 105, 118, 135;
+  --cat-color-theme-secondary-inverted-bg-hover: 105, 118, 135;
+  --cat-color-theme-secondary-inverted-bg-active: 105, 118, 135;
+  --cat-color-theme-secondary-inverted-fill: 0, 0, 0;
+  --cat-color-theme-secondary-inverted-fill-hover: 0, 0, 0;
+  --cat-color-theme-secondary-inverted-fill-active: 0, 0, 0;
+  --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-success-bg: 0, 132, 88;
   --cat-color-theme-success-bg-hover: 0, 117, 78;
   --cat-color-theme-success-bg-active: 0, 105, 70;
@@ -154,25 +154,26 @@
   --cat-color-theme-danger-text-hover: 194, 46, 11;
   --cat-color-theme-danger-text-active: 174, 42, 10;
   --cat-color-ui-background-canvas: 242, 244, 247;
-  --cat-color-ui-background-body: 255, 255, 255;
-  --cat-color-ui-background-body-dark: 27, 31, 38;
+  --cat-color-ui-background-surface: 255, 255, 255;
+  --cat-color-ui-background-surface-inverted: 27, 31, 38;
   --cat-color-ui-background-muted: 242, 244, 247;
   --cat-color-ui-background-input: 255, 255, 255;
+  --cat-color-ui-background-input-autofill: 232, 240, 254;
   --cat-color-ui-background-skeleton: 235, 236, 240;
   --cat-color-ui-background-skeleton-highlight: 215, 219, 224;
   --cat-color-ui-background-tooltip: 0, 0, 0;
-  --cat-color-ui-background-backdrop: 0, 0, 0;
+  --cat-color-ui-background-backdrop: 27, 31, 38;
   --cat-color-ui-border-light: 242, 244, 247;
   --cat-color-ui-border-default: 235, 236, 240;
   --cat-color-ui-border-dark: 215, 219, 224;
   --cat-color-ui-border-focus: 0, 113, 255;
   --cat-color-ui-border-quote: 105, 118, 135;
   --cat-color-ui-font-head: 0, 0, 0;
-  --cat-color-ui-font-head-dark: 255, 255, 255;
+  --cat-color-ui-font-head-inverted: 255, 255, 255;
   --cat-color-ui-font-body: 0, 0, 0;
-  --cat-color-ui-font-body-dark: 255, 255, 255;
+  --cat-color-ui-font-body-inverted: 255, 255, 255;
   --cat-color-ui-font-mono: 0, 0, 0;
-  --cat-color-ui-font-mono-dark: 255, 255, 255;
+  --cat-color-ui-font-mono-inverted: 255, 255, 255;
   --cat-color-ui-font-muted: 105, 118, 135;
   --cat-color-ui-font-quote: 105, 118, 135;
   --cat-color-ui-font-tooltip: 255, 255, 255;
@@ -188,7 +189,7 @@
   --cat-font-decoration-link-button: none;
   --cat-font-decoration-link-button-hover: none;
   --cat-opacity-disabled: 0.65;
-  --cat-opacity-backdrop: 0.6;
+  --cat-opacity-backdrop: 0.4;
   --cat-opacity-tooltip: 1;
   --cat-size-border-radius-l: 0.5rem;
   --cat-size-border-radius-m: 0.25rem;

package/dist/js/variables.d.ts

@@ -57,7 +57,7 @@ export const colorBaseNeutral400 : string;
 export const colorBaseNeutral500 : string;
 export const colorBaseNeutral600 : string;
 export const colorBaseNeutral700 : string;
-export const colorBaseNeutralDark400 : string;
+export const colorBaseNeutralInverted400 : string;
 export const colorBaseBrand100 : string;
 export const colorBaseBrand200 : string;
 export const colorBaseBrand300 : string;
@@ -65,9 +65,9 @@ export const colorBaseBrand400 : string;
 export const colorBaseBrand500 : string;
 export const colorBaseBrand600 : string;
 export const colorBaseBrand700 : string;
-export const colorBaseBrandDark400 : string;
-export const colorBaseBrandDark500 : string;
-export const colorBaseBrandDark600 : string;
+export const colorBaseBrandInverted400 : string;
+export const colorBaseBrandInverted500 : string;
+export const colorBaseBrandInverted600 : string;
 export const colorBaseGreen100 : string;
 export const colorBaseGreen200 : string;
 export const colorBaseGreen300 : string;
@@ -98,15 +98,15 @@ export const colorThemePrimaryFillActive : string;
 export const colorThemePrimaryText : string;
 export const colorThemePrimaryTextHover : string;
 export const colorThemePrimaryTextActive : string;
-export const colorThemePrimaryDarkBg : string;
-export const colorThemePrimaryDarkBgHover : string;
-export const colorThemePrimaryDarkBgActive : string;
-export const colorThemePrimaryDarkFill : string;
-export const colorThemePrimaryDarkFillHover : string;
-export const colorThemePrimaryDarkFillActive : string;
-export const colorThemePrimaryDarkText : string;
-export const colorThemePrimaryDarkTextHover : string;
-export const colorThemePrimaryDarkTextActive : string;
+export const colorThemePrimaryInvertedBg : string;
+export const colorThemePrimaryInvertedBgHover : string;
+export const colorThemePrimaryInvertedBgActive : string;
+export const colorThemePrimaryInvertedFill : string;
+export const colorThemePrimaryInvertedFillHover : string;
+export const colorThemePrimaryInvertedFillActive : string;
+export const colorThemePrimaryInvertedText : string;
+export const colorThemePrimaryInvertedTextHover : string;
+export const colorThemePrimaryInvertedTextActive : string;
 export const colorThemeSecondaryBg : string;
 export const colorThemeSecondaryBgHover : string;
 export const colorThemeSecondaryBgActive : string;
@@ -116,15 +116,15 @@ export const colorThemeSecondaryFillActive : string;
 export const colorThemeSecondaryText : string;
 export const colorThemeSecondaryTextHover : string;
 export const colorThemeSecondaryTextActive : string;
-export const colorThemeSecondaryDarkBg : string;
-export const colorThemeSecondaryDarkBgHover : string;
-export const colorThemeSecondaryDarkBgActive : string;
-export const colorThemeSecondaryDarkFill : string;
-export const colorThemeSecondaryDarkFillHover : string;
-export const colorThemeSecondaryDarkFillActive : string;
-export const colorThemeSecondaryDarkText : string;
-export const colorThemeSecondaryDarkTextHover : string;
-export const colorThemeSecondaryDarkTextActive : string;
+export const colorThemeSecondaryInvertedBg : string;
+export const colorThemeSecondaryInvertedBgHover : string;
+export const colorThemeSecondaryInvertedBgActive : string;
+export const colorThemeSecondaryInvertedFill : string;
+export const colorThemeSecondaryInvertedFillHover : string;
+export const colorThemeSecondaryInvertedFillActive : string;
+export const colorThemeSecondaryInvertedText : string;
+export const colorThemeSecondaryInvertedTextHover : string;
+export const colorThemeSecondaryInvertedTextActive : string;
 export const colorThemeSuccessBg : string;
 export const colorThemeSuccessBgHover : string;
 export const colorThemeSuccessBgActive : string;
@@ -153,10 +153,11 @@ export const colorThemeDangerText : string;
 export const colorThemeDangerTextHover : string;
 export const colorThemeDangerTextActive : string;
 export const colorUiBackgroundCanvas : string;
-export const colorUiBackgroundBody : string;
-export const colorUiBackgroundBodyDark : string;
+export const colorUiBackgroundSurface : string;
+export const colorUiBackgroundSurfaceInverted : string;
 export const colorUiBackgroundMuted : string;
 export const colorUiBackgroundInput : string;
+export const colorUiBackgroundInputAutofill : string;
 export const colorUiBackgroundSkeleton : string;
 export const colorUiBackgroundSkeletonHighlight : string;
 export const colorUiBackgroundTooltip : string;
@@ -167,11 +168,11 @@ export const colorUiBorderDark : string;
 export const colorUiBorderFocus : string;
 export const colorUiBorderQuote : string;
 export const colorUiFontHead : string;
-export const colorUiFontHeadDark : string;
+export const colorUiFontHeadInverted : string;
 export const colorUiFontBody : string;
-export const colorUiFontBodyDark : string;
+export const colorUiFontBodyInverted : string;
 export const colorUiFontMono : string;
-export const colorUiFontMonoDark : string;
+export const colorUiFontMonoInverted : string;
 export const colorUiFontMuted : string;
 export const colorUiFontQuote : string;
 export const colorUiFontTooltip : string;

package/dist/js/variables.js

@@ -57,7 +57,7 @@ export const colorBaseNeutral400 = "#697687";
 export const colorBaseNeutral500 = "#515c6c";
 export const colorBaseNeutral600 = "#394251";
 export const colorBaseNeutral700 = "#1b1f26";
-export const colorBaseNeutralDark400 = "#697687";
+export const colorBaseNeutralInverted400 = "#697687";
 export const colorBaseBrand100 = "#c9e5e8";
 export const colorBaseBrand200 = "#2db3c3";
 export const colorBaseBrand300 = "#29a3b1";
@@ -65,9 +65,9 @@ export const colorBaseBrand400 = "#008194";
 export const colorBaseBrand500 = "#017384";
 export const colorBaseBrand600 = "#026371";
 export const colorBaseBrand700 = "#175b63";
-export const colorBaseBrandDark400 = "#93b4f2";
-export const colorBaseBrandDark500 = "#93b4f2";
-export const colorBaseBrandDark600 = "#93b4f2";
+export const colorBaseBrandInverted400 = "#93b4f2";
+export const colorBaseBrandInverted500 = "#93b4f2";
+export const colorBaseBrandInverted600 = "#93b4f2";
 export const colorBaseGreen100 = "#d4ede4";
 export const colorBaseGreen200 = "#00bb7d";
 export const colorBaseGreen300 = "#00aa71";
@@ -98,15 +98,15 @@ export const colorThemePrimaryFillActive = "#ffffff";
 export const colorThemePrimaryText = "#008194";
 export const colorThemePrimaryTextHover = "#017384";
 export const colorThemePrimaryTextActive = "#026371";
-export const colorThemePrimaryDarkBg = "#93b4f2";
-export const colorThemePrimaryDarkBgHover = "#93b4f2";
-export const colorThemePrimaryDarkBgActive = "#93b4f2";
-export const colorThemePrimaryDarkFill = "#000000";
-export const colorThemePrimaryDarkFillHover = "#000000";
-export const colorThemePrimaryDarkFillActive = "#000000";
-export const colorThemePrimaryDarkText = "#93b4f2";
-export const colorThemePrimaryDarkTextHover = "#93b4f2";
-export const colorThemePrimaryDarkTextActive = "#93b4f2";
+export const colorThemePrimaryInvertedBg = "#93b4f2";
+export const colorThemePrimaryInvertedBgHover = "#93b4f2";
+export const colorThemePrimaryInvertedBgActive = "#93b4f2";
+export const colorThemePrimaryInvertedFill = "#000000";
+export const colorThemePrimaryInvertedFillHover = "#000000";
+export const colorThemePrimaryInvertedFillActive = "#000000";
+export const colorThemePrimaryInvertedText = "#93b4f2";
+export const colorThemePrimaryInvertedTextHover = "#93b4f2";
+export const colorThemePrimaryInvertedTextActive = "#93b4f2";
 export const colorThemeSecondaryBg = "#697687";
 export const colorThemeSecondaryBgHover = "#697687";
 export const colorThemeSecondaryBgActive = "#697687";
@@ -116,15 +116,15 @@ export const colorThemeSecondaryFillActive = "#ffffff";
 export const colorThemeSecondaryText = "#000000";
 export const colorThemeSecondaryTextHover = "#000000";
 export const colorThemeSecondaryTextActive = "#000000";
-export const colorThemeSecondaryDarkBg = "#697687";
-export const colorThemeSecondaryDarkBgHover = "#697687";
-export const colorThemeSecondaryDarkBgActive = "#697687";
-export const colorThemeSecondaryDarkFill = "#000000";
-export const colorThemeSecondaryDarkFillHover = "#000000";
-export const colorThemeSecondaryDarkFillActive = "#000000";
-export const colorThemeSecondaryDarkText = "#ffffff";
-export const colorThemeSecondaryDarkTextHover = "#ffffff";
-export const colorThemeSecondaryDarkTextActive = "#ffffff";
+export const colorThemeSecondaryInvertedBg = "#697687";
+export const colorThemeSecondaryInvertedBgHover = "#697687";
+export const colorThemeSecondaryInvertedBgActive = "#697687";
+export const colorThemeSecondaryInvertedFill = "#000000";
+export const colorThemeSecondaryInvertedFillHover = "#000000";
+export const colorThemeSecondaryInvertedFillActive = "#000000";
+export const colorThemeSecondaryInvertedText = "#ffffff";
+export const colorThemeSecondaryInvertedTextHover = "#ffffff";
+export const colorThemeSecondaryInvertedTextActive = "#ffffff";
 export const colorThemeSuccessBg = "#008458";
 export const colorThemeSuccessBgHover = "#00754e";
 export const colorThemeSuccessBgActive = "#006946";
@@ -153,25 +153,26 @@ export const colorThemeDangerText = "#d9340d";
 export const colorThemeDangerTextHover = "#c22e0b";
 export const colorThemeDangerTextActive = "#ae2a0a";
 export const colorUiBackgroundCanvas = "#f2f4f7";
-export const colorUiBackgroundBody = "#ffffff";
-export const colorUiBackgroundBodyDark = "#1b1f26";
+export const colorUiBackgroundSurface = "#ffffff";
+export const colorUiBackgroundSurfaceInverted = "#1b1f26";
 export const colorUiBackgroundMuted = "#f2f4f7";
 export const colorUiBackgroundInput = "#ffffff";
+export const colorUiBackgroundInputAutofill = "#e8f0fe";
 export const colorUiBackgroundSkeleton = "#ebecf0";
 export const colorUiBackgroundSkeletonHighlight = "#d7dbe0";
 export const colorUiBackgroundTooltip = "#000000";
-export const colorUiBackgroundBackdrop = "#000000";
+export const colorUiBackgroundBackdrop = "#1b1f26";
 export const colorUiBorderLight = "#f2f4f7";
 export const colorUiBorderDefault = "#ebecf0";
 export const colorUiBorderDark = "#d7dbe0";
 export const colorUiBorderFocus = "#0071ff";
 export const colorUiBorderQuote = "#697687";
 export const colorUiFontHead = "#000000";
-export const colorUiFontHeadDark = "#ffffff";
+export const colorUiFontHeadInverted = "#ffffff";
 export const colorUiFontBody = "#000000";
-export const colorUiFontBodyDark = "#ffffff";
+export const colorUiFontBodyInverted = "#ffffff";
 export const colorUiFontMono = "#000000";
-export const colorUiFontMonoDark = "#ffffff";
+export const colorUiFontMonoInverted = "#ffffff";
 export const colorUiFontMuted = "#697687";
 export const colorUiFontQuote = "#697687";
 export const colorUiFontTooltip = "#ffffff";
@@ -187,7 +188,7 @@ export const fontDecorationLinkHover = "underline";
 export const fontDecorationLinkButton = "none";
 export const fontDecorationLinkButtonHover = "none";
 export const opacityDisabled = 0.65;
-export const opacityBackdrop = 0.6;
+export const opacityBackdrop = 0.4;
 export const opacityTooltip = 1;
 export const sizeBorderRadiusL = "0.5rem";
 export const sizeBorderRadiusM = "0.25rem";

package/dist/json/variables.json

@@ -68,7 +68,7 @@
         "600": "#394251",
         "700": "#1b1f26"
       },
-      "neutralDark": {
+      "neutralInverted": {
         "400": "#697687"
       },
       "brand": {
@@ -80,7 +80,7 @@
         "600": "#026371",
         "700": "#175b63"
       },
-      "brandDark": {
+      "brandInverted": {
         "400": "#93b4f2",
         "500": "#93b4f2",
         "600": "#93b4f2"
@@ -125,7 +125,7 @@
         "textHover": "#017384",
         "textActive": "#026371"
       },
-      "primaryDark": {
+      "primaryInverted": {
         "bg": "#93b4f2",
         "bgHover": "#93b4f2",
         "bgActive": "#93b4f2",
@@ -147,7 +147,7 @@
         "textHover": "#000000",
         "textActive": "#000000"
       },
-      "secondaryDark": {
+      "secondaryInverted": {
         "bg": "#697687",
         "bgHover": "#697687",
         "bgActive": "#697687",
@@ -195,14 +195,15 @@
     "ui": {
       "background": {
         "canvas": "#f2f4f7",
-        "body": "#ffffff",
-        "bodyDark": "#1b1f26",
+        "surface": "#ffffff",
+        "surfaceInverted": "#1b1f26",
         "muted": "#f2f4f7",
         "input": "#ffffff",
+        "inputAutofill": "#e8f0fe",
         "skeleton": "#ebecf0",
         "skeletonHighlight": "#d7dbe0",
         "tooltip": "#000000",
-        "backdrop": "#000000"
+        "backdrop": "#1b1f26"
       },
       "border": {
         "light": "#f2f4f7",
@@ -213,11 +214,11 @@
       },
       "font": {
         "head": "#000000",
-        "headDark": "#ffffff",
+        "headInverted": "#ffffff",
         "body": "#000000",
-        "bodyDark": "#ffffff",
+        "bodyInverted": "#ffffff",
         "mono": "#000000",
-        "monoDark": "#ffffff",
+        "monoInverted": "#ffffff",
         "muted": "#697687",
         "quote": "#697687",
         "tooltip": "#ffffff"
@@ -245,7 +246,7 @@
   },
   "opacity": {
     "disabled": 0.65,
-    "backdrop": 0.6,
+    "backdrop": 0.4,
     "tooltip": 1
   },
   "size": {

package/dist/scss/_variables.scss

@@ -61,7 +61,7 @@ $cat-size-border-radius-s: var(--cat-border-radius-s, 0.125rem) !default;
 $cat-size-border-radius-m: var(--cat-border-radius-m, 0.25rem) !default;
 $cat-size-border-radius-l: var(--cat-border-radius-l, 0.5rem) !default;
 $cat-opacity-tooltip: var(--cat-opacity-tooltip, 1) !default;
-$cat-opacity-backdrop: var(--cat-opacity-backdrop, 0.6) !default;
+$cat-opacity-backdrop: var(--cat-opacity-backdrop, 0.4) !default;
 $cat-opacity-disabled: var(--cat-opacity-disabled, 0.65) !default;
 $cat-font-decoration-link-button-hover: var(--cat-link-button-decoration-hover, none) !default;
 $cat-font-decoration-link-button: var(--cat-link-button-decoration, none) !default;
@@ -72,6 +72,7 @@ $cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
 $cat-font-weight-head: var(--cat-font-weight-head, 500) !default;
 $cat-font-family-emoji: var(--cat-font-family-emoji, '') !default;
 $cat-color-ui-border-focus: var(--cat-border-color-focus, 0, 113, 255) !default;
+$cat-color-ui-background-input-autofill: 232, 240, 254 !default;
 $cat-color-base-red-700: 158, 38, 9 !default;
 $cat-color-base-red-600: 174, 42, 10 !default;
 $cat-color-base-red-500: 194, 46, 11 !default;
@@ -93,9 +94,9 @@ $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-brand-dark-600: 147, 180, 242 !default;
-$cat-color-base-brand-dark-500: 147, 180, 242 !default;
-$cat-color-base-brand-dark-400: 147, 180, 242 !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;
 $cat-color-base-brand-700: 23, 91, 99 !default;
 $cat-color-base-brand-600: 2, 99, 113 !default;
 $cat-color-base-brand-500: 1, 115, 132 !default;
@@ -103,7 +104,7 @@ $cat-color-base-brand-400: 0, 129, 148 !default;
 $cat-color-base-brand-300: 41, 163, 177 !default;
 $cat-color-base-brand-200: 45, 179, 195 !default;
 $cat-color-base-brand-100: 201, 229, 232 !default;
-$cat-color-base-neutral-dark-400: 105, 118, 135 !default;
+$cat-color-base-neutral-inverted-400: 105, 118, 135 !default;
 $cat-color-base-neutral-700: 27, 31, 38 !default;
 $cat-color-base-neutral-600: 57, 66, 81 !default;
 $cat-color-base-neutral-500: 81, 92, 108 !default;
@@ -165,24 +166,24 @@ $cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !d
 $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-400) !default;
 $cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
-$cat-color-ui-font-mono-dark: $cat-color-base-white !default;
+$cat-color-ui-font-mono-inverted: $cat-color-base-white !default;
 $cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-black) !default;
-$cat-color-ui-font-body-dark: $cat-color-base-white !default;
+$cat-color-ui-font-body-inverted: $cat-color-base-white !default;
 $cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-black) !default;
-$cat-color-ui-font-head-dark: $cat-color-base-white !default;
+$cat-color-ui-font-head-inverted: $cat-color-base-white !default;
 $cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-black) !default;
 $cat-color-ui-border-quote: $cat-color-base-neutral-400 !default;
 $cat-color-ui-border-dark: var(--cat-border-color-dark, $cat-color-base-neutral-300) !default;
 $cat-color-ui-border-default: var(--cat-border-color, $cat-color-base-neutral-200) !default;
 $cat-color-ui-border-light: var(--cat-border-color-light, $cat-color-base-neutral-100) !default;
-$cat-color-ui-background-backdrop: var(--cat-bg-backdrop, $cat-color-base-black) !default;
+$cat-color-ui-background-backdrop: var(--cat-bg-backdrop, $cat-color-base-neutral-700) !default;
 $cat-color-ui-background-tooltip: var(--cat-bg-tooltip, $cat-color-base-black) !default;
 $cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
 $cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
 $cat-color-ui-background-input: $cat-color-base-white !default;
 $cat-color-ui-background-muted: $cat-color-base-neutral-100 !default;
-$cat-color-ui-background-body-dark: $cat-color-base-neutral-700 !default;
-$cat-color-ui-background-body: $cat-color-base-white !default;
+$cat-color-ui-background-surface-inverted: $cat-color-base-neutral-700 !default;
+$cat-color-ui-background-surface: $cat-color-base-white !default;
 $cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
 $cat-color-theme-danger-text-active: var(--cat-danger-text-active, $cat-color-base-red-600) !default;
 $cat-color-theme-danger-text-hover: var(--cat-danger-text-hover, $cat-color-base-red-500) !default;
@@ -211,15 +212,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-secondary-dark-text-active: $cat-color-base-white !default;
-$cat-color-theme-secondary-dark-text-hover: $cat-color-base-white !default;
-$cat-color-theme-secondary-dark-text: $cat-color-base-white !default;
-$cat-color-theme-secondary-dark-fill-active: $cat-color-base-black !default;
-$cat-color-theme-secondary-dark-fill-hover: $cat-color-base-black !default;
-$cat-color-theme-secondary-dark-fill: $cat-color-base-black !default;
-$cat-color-theme-secondary-dark-bg-active: $cat-color-base-neutral-dark-400 !default;
-$cat-color-theme-secondary-dark-bg-hover: $cat-color-base-neutral-dark-400 !default;
-$cat-color-theme-secondary-dark-bg: $cat-color-base-neutral-dark-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;
+$cat-color-theme-secondary-inverted-fill-active: $cat-color-base-black !default;
+$cat-color-theme-secondary-inverted-fill-hover: $cat-color-base-black !default;
+$cat-color-theme-secondary-inverted-fill: $cat-color-base-black !default;
+$cat-color-theme-secondary-inverted-bg-active: $cat-color-base-neutral-inverted-400 !default;
+$cat-color-theme-secondary-inverted-bg-hover: $cat-color-base-neutral-inverted-400 !default;
+$cat-color-theme-secondary-inverted-bg: $cat-color-base-neutral-inverted-400 !default;
 $cat-color-theme-secondary-text-active: var(--cat-secondary-text-active, $cat-color-base-black) !default;
 $cat-color-theme-secondary-text-hover: var(--cat-secondary-text-hover, $cat-color-base-black) !default;
 $cat-color-theme-secondary-text: var(--cat-secondary-text, $cat-color-base-black) !default;
@@ -229,15 +230,15 @@ $cat-color-theme-secondary-fill: var(--cat-secondary-fill, $cat-color-base-white
 $cat-color-theme-secondary-bg-active: var(--cat-secondary-bg-active, $cat-color-base-neutral-400) !default;
 $cat-color-theme-secondary-bg-hover: var(--cat-secondary-bg-hover, $cat-color-base-neutral-400) !default;
 $cat-color-theme-secondary-bg: var(--cat-secondary-bg, $cat-color-base-neutral-400) !default;
-$cat-color-theme-primary-dark-text-active: $cat-color-base-brand-dark-600 !default;
-$cat-color-theme-primary-dark-text-hover: $cat-color-base-brand-dark-500 !default;
-$cat-color-theme-primary-dark-text: $cat-color-base-brand-dark-400 !default;
-$cat-color-theme-primary-dark-fill-active: $cat-color-base-black !default;
-$cat-color-theme-primary-dark-fill-hover: $cat-color-base-black !default;
-$cat-color-theme-primary-dark-fill: $cat-color-base-black !default;
-$cat-color-theme-primary-dark-bg-active: $cat-color-base-brand-dark-600 !default;
-$cat-color-theme-primary-dark-bg-hover: $cat-color-base-brand-dark-500 !default;
-$cat-color-theme-primary-dark-bg: $cat-color-base-brand-dark-400 !default;
+$cat-color-theme-primary-inverted-text-active: $cat-color-base-brand-inverted-600 !default;
+$cat-color-theme-primary-inverted-text-hover: $cat-color-base-brand-inverted-500 !default;
+$cat-color-theme-primary-inverted-text: $cat-color-base-brand-inverted-400 !default;
+$cat-color-theme-primary-inverted-fill-active: $cat-color-base-black !default;
+$cat-color-theme-primary-inverted-fill-hover: $cat-color-base-black !default;
+$cat-color-theme-primary-inverted-fill: $cat-color-base-black !default;
+$cat-color-theme-primary-inverted-bg-active: $cat-color-base-brand-inverted-600 !default;
+$cat-color-theme-primary-inverted-bg-hover: $cat-color-base-brand-inverted-500 !default;
+$cat-color-theme-primary-inverted-bg: $cat-color-base-brand-inverted-400 !default;
 $cat-color-theme-primary-text-active: var(--cat-primary-text-active, $cat-color-base-brand-600) !default;
 $cat-color-theme-primary-text-hover: var(--cat-primary-text-hover, $cat-color-base-brand-500) !default;
 $cat-color-theme-primary-text: var(--cat-primary-text, $cat-color-base-brand-400) !default;
@@ -318,8 +319,8 @@ $tokens: (
         '600': $cat-color-base-neutral-600,
         '700': $cat-color-base-neutral-700
       ),
-      'neutralDark': (
-        '400': $cat-color-base-neutral-dark-400
+      'neutralInverted': (
+        '400': $cat-color-base-neutral-inverted-400
       ),
       'brand': (
         '100': $cat-color-base-brand-100,
@@ -330,10 +331,10 @@ $tokens: (
         '600': $cat-color-base-brand-600,
         '700': $cat-color-base-brand-700
       ),
-      'brandDark': (
-        '400': $cat-color-base-brand-dark-400,
-        '500': $cat-color-base-brand-dark-500,
-        '600': $cat-color-base-brand-dark-600
+      'brandInverted': (
+        '400': $cat-color-base-brand-inverted-400,
+        '500': $cat-color-base-brand-inverted-500,
+        '600': $cat-color-base-brand-inverted-600
       ),
       'green': (
         '100': $cat-color-base-green-100,
@@ -375,16 +376,16 @@ $tokens: (
         'textHover': $cat-color-theme-primary-text-hover,
         'textActive': $cat-color-theme-primary-text-active
       ),
-      'primaryDark': (
-        'bg': $cat-color-theme-primary-dark-bg,
-        'bgHover': $cat-color-theme-primary-dark-bg-hover,
-        'bgActive': $cat-color-theme-primary-dark-bg-active,
-        'fill': $cat-color-theme-primary-dark-fill,
-        'fillHover': $cat-color-theme-primary-dark-fill-hover,
-        'fillActive': $cat-color-theme-primary-dark-fill-active,
-        'text': $cat-color-theme-primary-dark-text,
-        'textHover': $cat-color-theme-primary-dark-text-hover,
-        'textActive': $cat-color-theme-primary-dark-text-active
+      'primaryInverted': (
+        'bg': $cat-color-theme-primary-inverted-bg,
+        'bgHover': $cat-color-theme-primary-inverted-bg-hover,
+        'bgActive': $cat-color-theme-primary-inverted-bg-active,
+        'fill': $cat-color-theme-primary-inverted-fill,
+        'fillHover': $cat-color-theme-primary-inverted-fill-hover,
+        'fillActive': $cat-color-theme-primary-inverted-fill-active,
+        'text': $cat-color-theme-primary-inverted-text,
+        'textHover': $cat-color-theme-primary-inverted-text-hover,
+        'textActive': $cat-color-theme-primary-inverted-text-active
       ),
       'secondary': (
         'bg': $cat-color-theme-secondary-bg,
@@ -397,16 +398,16 @@ $tokens: (
         'textHover': $cat-color-theme-secondary-text-hover,
         'textActive': $cat-color-theme-secondary-text-active
       ),
-      'secondaryDark': (
-        'bg': $cat-color-theme-secondary-dark-bg,
-        'bgHover': $cat-color-theme-secondary-dark-bg-hover,
-        'bgActive': $cat-color-theme-secondary-dark-bg-active,
-        'fill': $cat-color-theme-secondary-dark-fill,
-        'fillHover': $cat-color-theme-secondary-dark-fill-hover,
-        'fillActive': $cat-color-theme-secondary-dark-fill-active,
-        'text': $cat-color-theme-secondary-dark-text,
-        'textHover': $cat-color-theme-secondary-dark-text-hover,
-        'textActive': $cat-color-theme-secondary-dark-text-active
+      'secondaryInverted': (
+        'bg': $cat-color-theme-secondary-inverted-bg,
+        'bgHover': $cat-color-theme-secondary-inverted-bg-hover,
+        'bgActive': $cat-color-theme-secondary-inverted-bg-active,
+        'fill': $cat-color-theme-secondary-inverted-fill,
+        'fillHover': $cat-color-theme-secondary-inverted-fill-hover,
+        'fillActive': $cat-color-theme-secondary-inverted-fill-active,
+        'text': $cat-color-theme-secondary-inverted-text,
+        'textHover': $cat-color-theme-secondary-inverted-text-hover,
+        'textActive': $cat-color-theme-secondary-inverted-text-active
       ),
       'success': (
         'bg': $cat-color-theme-success-bg,
@@ -445,10 +446,11 @@ $tokens: (
     'ui': (
       'background': (
         'canvas': $cat-color-ui-background-canvas,
-        'body': $cat-color-ui-background-body,
-        'bodyDark': $cat-color-ui-background-body-dark,
+        'surface': $cat-color-ui-background-surface,
+        'surfaceInverted': $cat-color-ui-background-surface-inverted,
         'muted': $cat-color-ui-background-muted,
         'input': $cat-color-ui-background-input,
+        'inputAutofill': $cat-color-ui-background-input-autofill,
         'skeleton': $cat-color-ui-background-skeleton,
         'skeletonHighlight': $cat-color-ui-background-skeleton-highlight,
         'tooltip': $cat-color-ui-background-tooltip,
@@ -463,11 +465,11 @@ $tokens: (
       ),
       'font': (
         'head': $cat-color-ui-font-head,
-        'headDark': $cat-color-ui-font-head-dark,
+        'headInverted': $cat-color-ui-font-head-inverted,
         'body': $cat-color-ui-font-body,
-        'bodyDark': $cat-color-ui-font-body-dark,
+        'bodyInverted': $cat-color-ui-font-body-inverted,
         'mono': $cat-color-ui-font-mono,
-        'monoDark': $cat-color-ui-font-mono-dark,
+        'monoInverted': $cat-color-ui-font-mono-inverted,
         'muted': $cat-color-ui-font-muted,
         'quote': $cat-color-ui-font-quote,
         'tooltip': $cat-color-ui-font-tooltip

package/package.json

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