@workday/canvas-tokens-web 4.0.6 → 4.1.0

package/css/base/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:50 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:06 GMT
  */
 
 :root {
@@ -36,9 +36,11 @@
   --cnvs-base-opacity-80: 0.08;
   --cnvs-base-opacity-100: 0.08;
   --cnvs-base-opacity-120: 0.12;
+  --cnvs-base-opacity-180: 0.18;
   --cnvs-base-opacity-200: 0.2;
   --cnvs-base-opacity-250: 0.2;
   --cnvs-base-opacity-300: 0.4;
+  --cnvs-base-opacity-360: 0.36;
   --cnvs-base-opacity-400: 0.4;
   --cnvs-base-opacity-500: 0.84;
   --cnvs-base-opacity-640: 0.64;

package/css/brand/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:50 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:06 GMT
  */
 
 :root {

package/css/system/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:50 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:06 GMT
  */
 
 :root {
@@ -26,6 +26,9 @@
   --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
   --cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
   --cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
+  --cnvs-sys-opacity-accent-pressed: var(--cnvs-base-opacity-360); /* Accent pressed opacity use with accent colors */
+  --cnvs-sys-opacity-accent-hover: var(--cnvs-base-opacity-180); /* Accent hover opacity use with accent colors */
+  --cnvs-sys-opacity-surface-pressed: var(--cnvs-base-opacity-180); /* Surface pressed opacity use with surface colors */
   --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-80); /* Alpha on second shadow */
   --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-120); /* Alpha on first shadow */
   --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-840); /* Tooltips, Status Indicator */
@@ -40,6 +43,7 @@
   --cnvs-sys-motion-easing-quick-standard: var(--cnvs-base-easing-a-100);
   --cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900);
   --cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0);
+  --cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-1000);
   --cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400);
   --cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200);
   --cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400);
@@ -53,6 +57,7 @@
   --cnvs-sys-color-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
   --cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300);
   --cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100);
+  --cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-slate-500);
   --cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200);
   --cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50);
   --cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950);
@@ -229,6 +234,7 @@
   --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
   --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
   --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
+  --cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100); /* Surface hover opacity */
   --cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-500);
   --cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500);
   --cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /* Brand, Focus */

package/dist/common-js/base/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export declare const fontSize: "--cnvs-base-font-size";
@@ -36,11 +36,13 @@ export declare const opacity80: "--cnvs-base-opacity-80";
 /** @deprecated Use 8 instead */
 export declare const opacity100: "--cnvs-base-opacity-100";
 export declare const opacity120: "--cnvs-base-opacity-120";
+export declare const opacity180: "--cnvs-base-opacity-180";
 export declare const opacity200: "--cnvs-base-opacity-200";
 /** @deprecated Use 20 instead */
 export declare const opacity250: "--cnvs-base-opacity-250";
 /** @deprecated Use 40 instead */
 export declare const opacity300: "--cnvs-base-opacity-300";
+export declare const opacity360: "--cnvs-base-opacity-360";
 export declare const opacity400: "--cnvs-base-opacity-400";
 /** @deprecated Use 84 instead */
 export declare const opacity500: "--cnvs-base-opacity-500";

package/dist/common-js/base/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 "use strict";
@@ -38,9 +38,11 @@ exports.opacity0 = "--cnvs-base-opacity-0";
 exports.opacity80 = "--cnvs-base-opacity-80";
 exports.opacity100 = "--cnvs-base-opacity-100";
 exports.opacity120 = "--cnvs-base-opacity-120";
+exports.opacity180 = "--cnvs-base-opacity-180";
 exports.opacity200 = "--cnvs-base-opacity-200";
 exports.opacity250 = "--cnvs-base-opacity-250";
 exports.opacity300 = "--cnvs-base-opacity-300";
+exports.opacity360 = "--cnvs-base-opacity-360";
 exports.opacity400 = "--cnvs-base-opacity-400";
 exports.opacity500 = "--cnvs-base-opacity-500";
 exports.opacity640 = "--cnvs-base-opacity-640";

package/dist/common-js/brand/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 /**

package/dist/common-js/brand/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 "use strict";

package/dist/common-js/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 import * as base from "./base";

package/dist/common-js/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 "use strict";

package/dist/common-js/system/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export declare const breakpoints: {
@@ -3827,6 +3827,12 @@ export declare const color: {
          */
         "inverse": "--cnvs-sys-color-surface-overlay-hover-inverse",
       },
+      /**
+       * **value**: `{base.palette.slate.500}`
+       * 
+       * **CSS Var**: `--cnvs-sys-color-surface-overlay-mixin`
+       */
+      "mixin": "--cnvs-sys-color-surface-overlay-mixin",
       "pressed": {
         /**
          * **value**: `{base.palette.slate.A100}`
@@ -3913,6 +3919,12 @@ export declare const color: {
        * **CSS Var**: `--cnvs-sys-color-accent-overlay-pressed`
        */
       "pressed": "--cnvs-sys-color-accent-overlay-pressed",
+      /**
+       * **value**: `{base.palette.neutral.1000}`
+       * 
+       * **CSS Var**: `--cnvs-sys-color-accent-overlay-mixin`
+       */
+      "mixin": "--cnvs-sys-color-accent-overlay-mixin",
     },
   },
   "brand": {
@@ -4302,6 +4314,42 @@ export declare const opacity: {
      */
     "second": "--cnvs-sys-opacity-shadow-second",
   },
+  "surface": {
+    /**
+     * **value**: `{base.opacity.100}` (8rem | 128px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-surface-hover`
+     * 
+     * Surface hover opacity
+     */
+    "hover": "--cnvs-sys-opacity-surface-hover",
+    /**
+     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-surface-pressed`
+     * 
+     * Surface pressed opacity use with surface colors
+     */
+    "pressed": "--cnvs-sys-opacity-surface-pressed",
+  },
+  "accent": {
+    /**
+     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-accent-hover`
+     * 
+     * Accent hover opacity use with accent colors
+     */
+    "hover": "--cnvs-sys-opacity-accent-hover",
+    /**
+     * **value**: `{base.opacity.360}` (36rem | 576px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-accent-pressed`
+     * 
+     * Accent pressed opacity use with accent colors
+     */
+    "pressed": "--cnvs-sys-opacity-accent-pressed",
+  },
 };
 
 export declare const size: {

package/dist/common-js/system/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 "use strict";
@@ -647,6 +647,7 @@ exports.color = {
         "default": "--cnvs-sys-color-surface-overlay-hover-default",
         "inverse": "--cnvs-sys-color-surface-overlay-hover-inverse"
       },
+      "mixin": "--cnvs-sys-color-surface-overlay-mixin",
       "pressed": {
         "default": "--cnvs-sys-color-surface-overlay-pressed-default",
         "inverse": "--cnvs-sys-color-surface-overlay-pressed-inverse"
@@ -667,7 +668,8 @@ exports.color = {
     },
     "overlay": {
       "hover": "--cnvs-sys-color-accent-overlay-hover",
-      "pressed": "--cnvs-sys-color-accent-overlay-pressed"
+      "pressed": "--cnvs-sys-color-accent-overlay-pressed",
+      "mixin": "--cnvs-sys-color-accent-overlay-mixin"
     }
   },
   "brand": {
@@ -766,6 +768,14 @@ exports.opacity = {
   "shadow": {
     "first": "--cnvs-sys-opacity-shadow-first",
     "second": "--cnvs-sys-opacity-shadow-second"
+  },
+  "surface": {
+    "hover": "--cnvs-sys-opacity-surface-hover",
+    "pressed": "--cnvs-sys-opacity-surface-pressed"
+  },
+  "accent": {
+    "hover": "--cnvs-sys-opacity-accent-hover",
+    "pressed": "--cnvs-sys-opacity-accent-pressed"
   }
 };
 exports.size = {

package/dist/es6/base/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export declare const fontSize: "--cnvs-base-font-size";
@@ -36,11 +36,13 @@ export declare const opacity80: "--cnvs-base-opacity-80";
 /** @deprecated Use 8 instead */
 export declare const opacity100: "--cnvs-base-opacity-100";
 export declare const opacity120: "--cnvs-base-opacity-120";
+export declare const opacity180: "--cnvs-base-opacity-180";
 export declare const opacity200: "--cnvs-base-opacity-200";
 /** @deprecated Use 20 instead */
 export declare const opacity250: "--cnvs-base-opacity-250";
 /** @deprecated Use 40 instead */
 export declare const opacity300: "--cnvs-base-opacity-300";
+export declare const opacity360: "--cnvs-base-opacity-360";
 export declare const opacity400: "--cnvs-base-opacity-400";
 /** @deprecated Use 84 instead */
 export declare const opacity500: "--cnvs-base-opacity-500";

package/dist/es6/base/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export const fontSize = "--cnvs-base-font-size";
@@ -35,9 +35,11 @@ export const opacity0 = "--cnvs-base-opacity-0";
 export const opacity80 = "--cnvs-base-opacity-80";
 export const opacity100 = "--cnvs-base-opacity-100";
 export const opacity120 = "--cnvs-base-opacity-120";
+export const opacity180 = "--cnvs-base-opacity-180";
 export const opacity200 = "--cnvs-base-opacity-200";
 export const opacity250 = "--cnvs-base-opacity-250";
 export const opacity300 = "--cnvs-base-opacity-300";
+export const opacity360 = "--cnvs-base-opacity-360";
 export const opacity400 = "--cnvs-base-opacity-400";
 export const opacity500 = "--cnvs-base-opacity-500";
 export const opacity640 = "--cnvs-base-opacity-640";

package/dist/es6/brand/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 /**

package/dist/es6/brand/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export const primary25 = "--cnvs-brand-primary-25";

package/dist/es6/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 import * as base from "./base";

package/dist/es6/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 import * as base from "./base";

package/dist/es6/system/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export declare const breakpoints: {
@@ -3827,6 +3827,12 @@ export declare const color: {
          */
         "inverse": "--cnvs-sys-color-surface-overlay-hover-inverse",
       },
+      /**
+       * **value**: `{base.palette.slate.500}`
+       * 
+       * **CSS Var**: `--cnvs-sys-color-surface-overlay-mixin`
+       */
+      "mixin": "--cnvs-sys-color-surface-overlay-mixin",
       "pressed": {
         /**
          * **value**: `{base.palette.slate.A100}`
@@ -3913,6 +3919,12 @@ export declare const color: {
        * **CSS Var**: `--cnvs-sys-color-accent-overlay-pressed`
        */
       "pressed": "--cnvs-sys-color-accent-overlay-pressed",
+      /**
+       * **value**: `{base.palette.neutral.1000}`
+       * 
+       * **CSS Var**: `--cnvs-sys-color-accent-overlay-mixin`
+       */
+      "mixin": "--cnvs-sys-color-accent-overlay-mixin",
     },
   },
   "brand": {
@@ -4302,6 +4314,42 @@ export declare const opacity: {
      */
     "second": "--cnvs-sys-opacity-shadow-second",
   },
+  "surface": {
+    /**
+     * **value**: `{base.opacity.100}` (8rem | 128px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-surface-hover`
+     * 
+     * Surface hover opacity
+     */
+    "hover": "--cnvs-sys-opacity-surface-hover",
+    /**
+     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-surface-pressed`
+     * 
+     * Surface pressed opacity use with surface colors
+     */
+    "pressed": "--cnvs-sys-opacity-surface-pressed",
+  },
+  "accent": {
+    /**
+     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-accent-hover`
+     * 
+     * Accent hover opacity use with accent colors
+     */
+    "hover": "--cnvs-sys-opacity-accent-hover",
+    /**
+     * **value**: `{base.opacity.360}` (36rem | 576px)
+     * 
+     * **CSS Var**: `--cnvs-sys-opacity-accent-pressed`
+     * 
+     * Accent pressed opacity use with accent colors
+     */
+    "pressed": "--cnvs-sys-opacity-accent-pressed",
+  },
 };
 
 export declare const size: {

package/dist/es6/system/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jan 2026 19:14:51 GMT
+ * Generated on Thu, 05 Feb 2026 23:39:07 GMT
  */
 
 export const breakpoints = {
@@ -644,6 +644,7 @@ export const color = {
         "default": "--cnvs-sys-color-surface-overlay-hover-default",
         "inverse": "--cnvs-sys-color-surface-overlay-hover-inverse"
       },
+      "mixin": "--cnvs-sys-color-surface-overlay-mixin",
       "pressed": {
         "default": "--cnvs-sys-color-surface-overlay-pressed-default",
         "inverse": "--cnvs-sys-color-surface-overlay-pressed-inverse"
@@ -664,7 +665,8 @@ export const color = {
     },
     "overlay": {
       "hover": "--cnvs-sys-color-accent-overlay-hover",
-      "pressed": "--cnvs-sys-color-accent-overlay-pressed"
+      "pressed": "--cnvs-sys-color-accent-overlay-pressed",
+      "mixin": "--cnvs-sys-color-accent-overlay-mixin"
     }
   },
   "brand": {
@@ -763,6 +765,14 @@ export const opacity = {
   "shadow": {
     "first": "--cnvs-sys-opacity-shadow-first",
     "second": "--cnvs-sys-opacity-shadow-second"
+  },
+  "surface": {
+    "hover": "--cnvs-sys-opacity-surface-hover",
+    "pressed": "--cnvs-sys-opacity-surface-pressed"
+  },
+  "accent": {
+    "hover": "--cnvs-sys-opacity-accent-hover",
+    "pressed": "--cnvs-sys-opacity-accent-pressed"
   }
 };
 export const size = {

package/less/base/_variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:51 GMT
+// Generated on Thu, 05 Feb 2026 23:39:07 GMT
 
 @cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
 @cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
@@ -34,9 +34,11 @@
 @cnvs-base-opacity-80: 0.08;
 @cnvs-base-opacity-100: 0.08;
 @cnvs-base-opacity-120: 0.12;
+@cnvs-base-opacity-180: 0.18;
 @cnvs-base-opacity-200: 0.2;
 @cnvs-base-opacity-250: 0.2;
 @cnvs-base-opacity-300: 0.4;
+@cnvs-base-opacity-360: 0.36;
 @cnvs-base-opacity-400: 0.4;
 @cnvs-base-opacity-500: 0.84;
 @cnvs-base-opacity-640: 0.64;

package/less/brand/_variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:51 GMT
+// Generated on Thu, 05 Feb 2026 23:39:07 GMT
 
 @cnvs-brand-positive-a200: @cnvs-base-palette-green-a200;
 @cnvs-brand-positive-a100: @cnvs-base-palette-green-a100;

package/less/system/_variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:51 GMT
+// Generated on Thu, 05 Feb 2026 23:39:07 GMT
 
 @cnvs-sys-opacity-full: 1; // Dev only
 @cnvs-sys-space-zero: 0; // Stacks, rows in tables
@@ -18,6 +18,9 @@
 @cnvs-sys-font-family-default: @cnvs-base-font-family-50;
 @cnvs-sys-gap-none: @cnvs-base-size-0; // Use when there is no space between elements
 @cnvs-sys-padding-none: @cnvs-base-size-0; // Use when there should be no space between content and element's edges.
+@cnvs-sys-opacity-accent-pressed: @cnvs-base-opacity-360; // Accent pressed opacity use with accent colors
+@cnvs-sys-opacity-accent-hover: @cnvs-base-opacity-180; // Accent hover opacity use with accent colors
+@cnvs-sys-opacity-surface-pressed: @cnvs-base-opacity-180; // Surface pressed opacity use with surface colors
 @cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-80; // Alpha on second shadow
 @cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-120; // Alpha on first shadow
 @cnvs-sys-opacity-contrast: @cnvs-base-opacity-840; // Tooltips, Status Indicator
@@ -32,6 +35,7 @@
 @cnvs-sys-motion-easing-quick-standard: @cnvs-base-easing-a-100;
 @cnvs-sys-color-focus-contrast: @cnvs-base-palette-neutral-a900;
 @cnvs-sys-color-focus-inverse: @cnvs-base-palette-neutral-0;
+@cnvs-sys-color-accent-overlay-mixin: @cnvs-base-palette-neutral-1000;
 @cnvs-sys-color-accent-overlay-pressed: @cnvs-base-palette-neutral-a400;
 @cnvs-sys-color-accent-overlay-hover: @cnvs-base-palette-neutral-a200;
 @cnvs-sys-color-accent-muted-soft: @cnvs-base-palette-slate-400;
@@ -45,6 +49,7 @@
 @cnvs-sys-color-surface-overlay-scrim: @cnvs-base-palette-neutral-a400;
 @cnvs-sys-color-surface-overlay-pressed-inverse: @cnvs-base-palette-white-a300;
 @cnvs-sys-color-surface-overlay-pressed-default: @cnvs-base-palette-slate-a100;
+@cnvs-sys-color-surface-overlay-mixin: @cnvs-base-palette-slate-500;
 @cnvs-sys-color-surface-overlay-hover-inverse: @cnvs-base-palette-white-a200;
 @cnvs-sys-color-surface-overlay-hover-default: @cnvs-base-palette-slate-a50;
 @cnvs-sys-color-surface-contrast-strong: @cnvs-base-palette-neutral-a950;
@@ -221,6 +226,7 @@
 @cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
 @cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
 @cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
+@cnvs-sys-opacity-surface-hover: @cnvs-base-opacity-100; // Surface hover opacity
 @cnvs-sys-color-brand-border-caution: @cnvs-brand-caution-500;
 @cnvs-sys-color-brand-border-critical: @cnvs-brand-critical-500;
 @cnvs-sys-color-brand-border-primary: @cnvs-brand-primary-500; // Brand, Focus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-tokens-web",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "description": "Canvas design tokens for web",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "CC-BY-ND-4.0",

package/scss/base/_variables.sass

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
 $cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
@@ -34,9 +34,11 @@ $cnvs-base-opacity-0: 0;
 $cnvs-base-opacity-80: 0.08;
 $cnvs-base-opacity-100: 0.08;
 $cnvs-base-opacity-120: 0.12;
+$cnvs-base-opacity-180: 0.18;
 $cnvs-base-opacity-200: 0.2;
 $cnvs-base-opacity-250: 0.2;
 $cnvs-base-opacity-300: 0.4;
+$cnvs-base-opacity-360: 0.36;
 $cnvs-base-opacity-400: 0.4;
 $cnvs-base-opacity-500: 0.84;
 $cnvs-base-opacity-640: 0.64;

package/scss/base/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
 $cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
@@ -34,9 +34,11 @@ $cnvs-base-opacity-0: 0;
 $cnvs-base-opacity-80: 0.08;
 $cnvs-base-opacity-100: 0.08;
 $cnvs-base-opacity-120: 0.12;
+$cnvs-base-opacity-180: 0.18;
 $cnvs-base-opacity-200: 0.2;
 $cnvs-base-opacity-250: 0.2;
 $cnvs-base-opacity-300: 0.4;
+$cnvs-base-opacity-360: 0.36;
 $cnvs-base-opacity-400: 0.4;
 $cnvs-base-opacity-500: 0.84;
 $cnvs-base-opacity-640: 0.64;

package/scss/brand/_variables.sass

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
 $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;

package/scss/brand/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
 $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;

package/scss/system/_variables.sass

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-sys-opacity-full: 1; // Dev only
 $cnvs-sys-space-zero: 0; // Stacks, rows in tables
@@ -18,6 +18,9 @@ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
 $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
 $cnvs-sys-gap-none: $cnvs-base-size-0; // Use when there is no space between elements
 $cnvs-sys-padding-none: $cnvs-base-size-0; // Use when there should be no space between content and element's edges.
+$cnvs-sys-opacity-accent-pressed: $cnvs-base-opacity-360; // Accent pressed opacity use with accent colors
+$cnvs-sys-opacity-accent-hover: $cnvs-base-opacity-180; // Accent hover opacity use with accent colors
+$cnvs-sys-opacity-surface-pressed: $cnvs-base-opacity-180; // Surface pressed opacity use with surface colors
 $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-80; // Alpha on second shadow
 $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-120; // Alpha on first shadow
 $cnvs-sys-opacity-contrast: $cnvs-base-opacity-840; // Tooltips, Status Indicator
@@ -32,6 +35,7 @@ $cnvs-sys-motion-easing-quick-acceleration: $cnvs-base-easing-a-200;
 $cnvs-sys-motion-easing-quick-standard: $cnvs-base-easing-a-100;
 $cnvs-sys-color-focus-contrast: $cnvs-base-palette-neutral-a900;
 $cnvs-sys-color-focus-inverse: $cnvs-base-palette-neutral-0;
+$cnvs-sys-color-accent-overlay-mixin: $cnvs-base-palette-neutral-1000;
 $cnvs-sys-color-accent-overlay-pressed: $cnvs-base-palette-neutral-a400;
 $cnvs-sys-color-accent-overlay-hover: $cnvs-base-palette-neutral-a200;
 $cnvs-sys-color-accent-muted-soft: $cnvs-base-palette-slate-400;
@@ -45,6 +49,7 @@ $cnvs-sys-color-accent-ai: $cnvs-base-palette-blue-950;
 $cnvs-sys-color-surface-overlay-scrim: $cnvs-base-palette-neutral-a400;
 $cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-a300;
 $cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-slate-a100;
+$cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-slate-500;
 $cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-a200;
 $cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-slate-a50;
 $cnvs-sys-color-surface-contrast-strong: $cnvs-base-palette-neutral-a950;
@@ -221,6 +226,7 @@ $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and sm
 $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
 $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
 $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
+$cnvs-sys-opacity-surface-hover: $cnvs-base-opacity-100; // Surface hover opacity
 $cnvs-sys-color-brand-border-caution: $cnvs-brand-caution-500;
 $cnvs-sys-color-brand-border-critical: $cnvs-brand-critical-500;
 $cnvs-sys-color-brand-border-primary: $cnvs-brand-primary-500; // Brand, Focus

package/scss/system/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jan 2026 19:14:50 GMT
+// Generated on Thu, 05 Feb 2026 23:39:06 GMT
 
 $cnvs-sys-opacity-full: 1; // Dev only
 $cnvs-sys-space-zero: 0; // Stacks, rows in tables
@@ -18,6 +18,9 @@ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
 $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
 $cnvs-sys-gap-none: $cnvs-base-size-0; // Use when there is no space between elements
 $cnvs-sys-padding-none: $cnvs-base-size-0; // Use when there should be no space between content and element's edges.
+$cnvs-sys-opacity-accent-pressed: $cnvs-base-opacity-360; // Accent pressed opacity use with accent colors
+$cnvs-sys-opacity-accent-hover: $cnvs-base-opacity-180; // Accent hover opacity use with accent colors
+$cnvs-sys-opacity-surface-pressed: $cnvs-base-opacity-180; // Surface pressed opacity use with surface colors
 $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-80; // Alpha on second shadow
 $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-120; // Alpha on first shadow
 $cnvs-sys-opacity-contrast: $cnvs-base-opacity-840; // Tooltips, Status Indicator
@@ -32,6 +35,7 @@ $cnvs-sys-motion-easing-quick-acceleration: $cnvs-base-easing-a-200;
 $cnvs-sys-motion-easing-quick-standard: $cnvs-base-easing-a-100;
 $cnvs-sys-color-focus-contrast: $cnvs-base-palette-neutral-a900;
 $cnvs-sys-color-focus-inverse: $cnvs-base-palette-neutral-0;
+$cnvs-sys-color-accent-overlay-mixin: $cnvs-base-palette-neutral-1000;
 $cnvs-sys-color-accent-overlay-pressed: $cnvs-base-palette-neutral-a400;
 $cnvs-sys-color-accent-overlay-hover: $cnvs-base-palette-neutral-a200;
 $cnvs-sys-color-accent-muted-soft: $cnvs-base-palette-slate-400;
@@ -45,6 +49,7 @@ $cnvs-sys-color-accent-ai: $cnvs-base-palette-blue-950;
 $cnvs-sys-color-surface-overlay-scrim: $cnvs-base-palette-neutral-a400;
 $cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-a300;
 $cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-slate-a100;
+$cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-slate-500;
 $cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-a200;
 $cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-slate-a50;
 $cnvs-sys-color-surface-contrast-strong: $cnvs-base-palette-neutral-a950;
@@ -221,6 +226,7 @@ $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and sm
 $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
 $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
 $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
+$cnvs-sys-opacity-surface-hover: $cnvs-base-opacity-100; // Surface hover opacity
 $cnvs-sys-color-brand-border-caution: $cnvs-brand-caution-500;
 $cnvs-sys-color-brand-border-critical: $cnvs-brand-critical-500;
 $cnvs-sys-color-brand-border-primary: $cnvs-brand-primary-500; // Brand, Focus