@workday/canvas-tokens-web 4.0.0-alpha.7 → 4.0.0-alpha.8

package/css/base/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:01 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:38 GMT
  */
 
 :root {

package/css/brand/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:01 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:38 GMT
  */
 
 :root {

package/css/system/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:01 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:38 GMT
  */
 
 :root {
@@ -119,8 +119,6 @@
   --cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h  /  var(--cnvs-base-opacity-100)); /* Second shadow color */
   --cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h  /  var(--cnvs-base-opacity-200)); /* First shadow color */
   --cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0);
-  --cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700);
-  --cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-white-a500);
   --cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400);
   --cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500);
   --cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300);
@@ -128,11 +126,15 @@
   --cnvs-sys-color-border-info: var(--cnvs-base-palette-blue-500);
   --cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Active state on AI borders */
   --cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-300); /* Cards, Toasts, Surfaces */
+  --cnvs-sys-color-border-primary-default: var(--cnvs-base-palette-blue-500); /* Brand, Focus */
   --cnvs-sys-color-border-divider: var(--cnvs-base-palette-slate-200); /* Dividers */
   --cnvs-sys-color-border-caution-strong: var(--cnvs-base-palette-amber-500); /* Warning outer (box shadow) */
   --cnvs-sys-color-border-caution-default: var(--cnvs-base-palette-amber-400); /* Warning inner */
   --cnvs-sys-color-border-critical-default: var(--cnvs-base-palette-red-500); /* Error */
-  --cnvs-sys-color-border-contrast: var(--cnvs-base-palette-neutral-a900);
+  --cnvs-sys-color-border-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Secondary Button Hover */
+  --cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900); /* Secondary Button */
+  --cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700);
+  --cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-white-a500); /* Borders on checkboxes and radios */
   --cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /* Input hover */
   --cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /* Inputs */
   --cnvs-sys-color-border-input-inverse: var(--cnvs-base-palette-neutral-0); /* Borders on checkboxes and radios */
@@ -274,50 +276,16 @@
   --cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
   --cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
   --cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
-  --cnvs-sys-color-bg-alt: var(--cnvs-base-palette-slate-50); /* The alternative page background */
+  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /* The alternative page background */
+  --cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
+  --cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
+  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
+  --cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-slate-25); /* Disabled inputs */
   --cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
   --cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-400)); /* Overlay background */
   --cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-250)); /* Inverse Secondary Button Active state */
   --cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-100)); /* Inverse Secondary Button Hover state */
   --cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
-  --cnvs-sys-color-bg-accent-muted-soft: var(--cnvs-base-palette-slate-400);
-  --cnvs-sys-color-bg-accent-muted-default: var(--cnvs-base-palette-slate-600);
-  --cnvs-sys-color-bg-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400);
-  --cnvs-sys-color-bg-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200);
-  --cnvs-sys-color-bg-accent-contrast: var(--cnvs-base-palette-neutral-a900);
-  --cnvs-sys-color-bg-accent-ai: var(--cnvs-base-palette-blue-950);
-  --cnvs-sys-color-bg-accent-positive: var(--cnvs-base-palette-green-600);
-  --cnvs-sys-color-bg-accent-info: var(--cnvs-base-palette-blue-600);
-  --cnvs-sys-color-bg-accent-caution: var(--cnvs-base-palette-amber-400);
-  --cnvs-sys-color-bg-accent-critical: var(--cnvs-base-palette-red-600);
-  --cnvs-sys-color-bg-surface-modal: var(--cnvs-base-palette-neutral-0);
-  --cnvs-sys-color-bg-surface-loading: var(--cnvs-base-palette-slate-a200);
-  --cnvs-sys-color-bg-surface-ai-pressed: var(--cnvs-base-palette-blue-a200);
-  --cnvs-sys-color-bg-surface-ai-hover: var(--cnvs-base-palette-blue-a200);
-  --cnvs-sys-color-bg-surface-ai-default: var(--cnvs-base-palette-blue-a100);
-  --cnvs-sys-color-bg-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950);
-  --cnvs-sys-color-bg-surface-contrast-default: var(--cnvs-base-palette-neutral-a900);
-  --cnvs-sys-color-bg-surface-inverse: var(--cnvs-base-palette-neutral-0);
-  --cnvs-sys-color-bg-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
-  --cnvs-sys-color-bg-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a500);
-  --cnvs-sys-color-bg-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a200);
-  --cnvs-sys-color-bg-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a300);
-  --cnvs-sys-color-bg-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a100);
-  --cnvs-sys-color-bg-surface-transparent: var(--cnvs-base-palette-white-a0);
-  --cnvs-sys-color-bg-surface-positive-strong: var(--cnvs-base-palette-green-a50);
-  --cnvs-sys-color-bg-surface-positive-default: var(--cnvs-base-palette-green-a25);
-  --cnvs-sys-color-bg-surface-info-strong: var(--cnvs-base-palette-blue-a50);
-  --cnvs-sys-color-bg-surface-info-default: var(--cnvs-base-palette-blue-a25);
-  --cnvs-sys-color-bg-surface-caution-strong: var(--cnvs-base-palette-amber-a50);
-  --cnvs-sys-color-bg-surface-caution-default: var(--cnvs-base-palette-amber-a25);
-  --cnvs-sys-color-bg-surface-critical-strong: var(--cnvs-base-palette-red-a50);
-  --cnvs-sys-color-bg-surface-critical-default: var(--cnvs-base-palette-red-a25);
-  --cnvs-sys-color-bg-surface-raised: var(--cnvs-base-palette-slate-a25);
-  --cnvs-sys-color-bg-surface-popover: var(--cnvs-base-palette-neutral-0);
-  --cnvs-sys-color-bg-surface-navigation: var(--cnvs-base-palette-neutral-a0); /* Surface color for navigation elements, like the SidePanel or Top Nav Bar */
-  --cnvs-sys-color-bg-surface-alt-strong: var(--cnvs-base-palette-slate-a100);
-  --cnvs-sys-color-bg-surface-alt-default: var(--cnvs-base-palette-slate-a50);
-  --cnvs-sys-color-bg-surface-default: var(--cnvs-base-palette-neutral-0); /* Default surface background */
   --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
   --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
   --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 export declare const fontSize: "--cnvs-base-fontSize";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 "use strict";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 /** {base.palette.blue.25} */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 "use strict";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 import * as base from "./base";

package/dist/common-js/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 "use strict";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Jan 2026 19:47:02 GMT
+ * Generated on Mon, 12 Jan 2026 22:56:39 GMT
  */
 
 export declare const breakpoints: {
@@ -742,122 +742,6 @@ export declare const color: {
        */
       "stronger": "--cnvs-sys-color-bg-primary-stronger",
     },
-    "surface": {
-      /**
-       * {base.palette.neutral.0}
-       * 
-       * Default surface background
-       * 
-       * @deprecated Use sys.color.surface.default instead
-       */
-      "default": "--cnvs-sys-color-bg-surface-default",
-      "alt": {
-        /** {base.palette.slate.A50} */
-        "default": "--cnvs-sys-color-bg-surface-alt-default",
-        /** {base.palette.slate.A100} */
-        "strong": "--cnvs-sys-color-bg-surface-alt-strong",
-      },
-      /**
-       * {base.palette.neutral.A0}
-       * 
-       * Surface color for navigation elements, like the SidePanel or Top Nav Bar
-       * 
-       * @deprecated Use sys.color.surface.navigation instead
-       */
-      "navigation": "--cnvs-sys-color-bg-surface-navigation",
-      /** {base.palette.neutral.0} */
-      "popover": "--cnvs-sys-color-bg-surface-popover",
-      /** {base.palette.slate.A25} */
-      "raised": "--cnvs-sys-color-bg-surface-raised",
-      "critical": {
-        /** {base.palette.red.A25} */
-        "default": "--cnvs-sys-color-bg-surface-critical-default",
-        /** {base.palette.red.A50} */
-        "strong": "--cnvs-sys-color-bg-surface-critical-strong",
-      },
-      "caution": {
-        /** {base.palette.amber.A25} */
-        "default": "--cnvs-sys-color-bg-surface-caution-default",
-        /** {base.palette.amber.A50} */
-        "strong": "--cnvs-sys-color-bg-surface-caution-strong",
-      },
-      "info": {
-        /** {base.palette.blue.A25} */
-        "default": "--cnvs-sys-color-bg-surface-info-default",
-        /** {base.palette.blue.A50} */
-        "strong": "--cnvs-sys-color-bg-surface-info-strong",
-      },
-      "positive": {
-        /** {base.palette.green.A25} */
-        "default": "--cnvs-sys-color-bg-surface-positive-default",
-        /** {base.palette.green.A50} */
-        "strong": "--cnvs-sys-color-bg-surface-positive-strong",
-      },
-      /** {base.palette.white.A0} */
-      "transparent": "--cnvs-sys-color-bg-surface-transparent",
-      "overlay": {
-        "hover": {
-          /** {base.palette.slate.A100} */
-          "default": "--cnvs-sys-color-bg-surface-overlay-hover-default",
-          /** {base.palette.white.A300} */
-          "inverse": "--cnvs-sys-color-bg-surface-overlay-hover-inverse",
-        },
-        "pressed": {
-          /** {base.palette.slate.A200} */
-          "default": "--cnvs-sys-color-bg-surface-overlay-pressed-default",
-          /** {base.palette.white.A500} */
-          "inverse": "--cnvs-sys-color-bg-surface-overlay-pressed-inverse",
-        },
-        /** {base.palette.neutral.A400} */
-        "scrim": "--cnvs-sys-color-bg-surface-overlay-scrim",
-      },
-      /** {base.palette.neutral.0} */
-      "inverse": "--cnvs-sys-color-bg-surface-inverse",
-      "contrast": {
-        /** {base.palette.neutral.A900} */
-        "default": "--cnvs-sys-color-bg-surface-contrast-default",
-        /** {base.palette.neutral.A950} */
-        "strong": "--cnvs-sys-color-bg-surface-contrast-strong",
-      },
-      "ai": {
-        /** {base.palette.blue.A100} */
-        "default": "--cnvs-sys-color-bg-surface-ai-default",
-        /** {base.palette.blue.A200} */
-        "hover": "--cnvs-sys-color-bg-surface-ai-hover",
-        /** {base.palette.blue.A200} */
-        "pressed": "--cnvs-sys-color-bg-surface-ai-pressed",
-      },
-      /** {base.palette.slate.A200} */
-      "loading": "--cnvs-sys-color-bg-surface-loading",
-      /** {base.palette.neutral.0} */
-      "modal": "--cnvs-sys-color-bg-surface-modal",
-    },
-    "accent": {
-      /** {base.palette.red.600} */
-      "critical": "--cnvs-sys-color-bg-accent-critical",
-      /** {base.palette.amber.400} */
-      "caution": "--cnvs-sys-color-bg-accent-caution",
-      /** {base.palette.blue.600} */
-      "info": "--cnvs-sys-color-bg-accent-info",
-      /** {base.palette.green.600} */
-      "positive": "--cnvs-sys-color-bg-accent-positive",
-      /** {base.palette.blue.950} */
-      "ai": "--cnvs-sys-color-bg-accent-ai",
-      /** {base.palette.neutral.A900} */
-      "contrast": "--cnvs-sys-color-bg-accent-contrast",
-      "overlay": {
-        /** {base.palette.neutral.A200} */
-        "hover": "--cnvs-sys-color-bg-accent-overlay-hover",
-        /** {base.palette.neutral.A400} */
-        "pressed": "--cnvs-sys-color-bg-accent-overlay-pressed",
-      },
-      "muted": {
-        /** {base.palette.slate.600} */
-        "default": "--cnvs-sys-color-bg-accent-muted-default",
-        /** {base.palette.slate.400} */
-        "soft": "--cnvs-sys-color-bg-accent-muted-soft",
-      },
-    },
     "transparent": {
       /**
        * oklch({base.palette.neutral.1000} / {base.opacity.0})
@@ -900,14 +784,48 @@ export declare const color: {
      * @deprecated Use sys.color.surface.contrast tokens instead
      */
     "translucent": "--cnvs-sys-color-bg-translucent",
-    /**
-     * {base.palette.slate.50}
-     * 
-     * The alternative page background
-     * 
-     * 
-     */
-    "alt": "--cnvs-sys-color-bg-alt",
+    "alt": {
+      /**
+       * {base.palette.slate.25}
+       * 
+       * Disabled inputs
+       * 
+       * @deprecated Use sys.color.surface.alt tokens instead
+       */
+      "softer": "--cnvs-sys-color-bg-alt-softer",
+      /**
+       * {base.palette.slate.50}
+       * 
+       * Alternative page background
+       * 
+       * @deprecated Use sys.color.bg.alt.default instead
+       */
+      "soft": "--cnvs-sys-color-bg-alt-soft",
+      /**
+       * {base.palette.slate.200}
+       * 
+       * Active states
+       * 
+       * @deprecated Use sys.color.surface.alt tokens instead
+       */
+      "strong": "--cnvs-sys-color-bg-alt-strong",
+      /**
+       * {base.palette.slate.300}
+       * 
+       * Active state for segmented control, Pill
+       * 
+       * @deprecated Use sys.color.surface.alt tokens instead
+       */
+      "stronger": "--cnvs-sys-color-bg-alt-stronger",
+      /**
+       * {base.palette.slate.50}
+       * 
+       * The alternative page background
+       * 
+       * 
+       */
+      "default": "--cnvs-sys-color-bg-alt-default",
+    },
     "muted": {
       /** {base.palette.slate.400} */
       "softer": "--cnvs-sys-color-bg-muted-softer",
@@ -2004,8 +1922,36 @@ export declare const color: {
        */
       "hover": "--cnvs-sys-color-border-input-hover",
     },
-    /** {base.palette.neutral.A900} */
-    "contrast": "--cnvs-sys-color-border-contrast",
+    "inverse": {
+      /**
+       * {base.palette.white.A500}
+       * 
+       * Borders on checkboxes and radios
+       * 
+       * @deprecated Use sys.color.border.inverse.default instead
+       */
+      "default": "--cnvs-sys-color-border-inverse-default",
+      /** {base.palette.white.A700} */
+      "strong": "--cnvs-sys-color-border-inverse-strong",
+    },
+    "contrast": {
+      /**
+       * {base.palette.neutral.A900}
+       * 
+       * Secondary Button
+       * 
+       * @deprecated Use sys.color.border.contrast instead
+       */
+      "default": "--cnvs-sys-color-border-contrast-default",
+      /**
+       * {base.palette.neutral.950}
+       * 
+       * Secondary Button Hover
+       * 
+       * @deprecated Use sys.color.border.contrast instead
+       */
+      "strong": "--cnvs-sys-color-border-contrast-strong",
+    },
     "critical": {
       /**
        * {base.palette.red.500}
@@ -2042,6 +1988,16 @@ export declare const color: {
      * @deprecated Use sys.color.border.default instead
      */
     "divider": "--cnvs-sys-color-border-divider",
+    "primary": {
+      /**
+       * {base.palette.blue.500}
+       * 
+       * Brand, Focus
+       * 
+       * @deprecated Use sys.color.brand.border.primary.default instead
+       */
+      "default": "--cnvs-sys-color-border-primary-default",
+    },
     /**
      * {base.palette.slate.300}
      * 
@@ -2068,32 +2024,26 @@ export declare const color: {
     "danger": "--cnvs-sys-color-border-danger",
     /** {base.palette.amber.400} */
     "warning": "--cnvs-sys-color-border-warning",
-    "inverse": {
-      /** {base.palette.white.A500} */
-      "default": "--cnvs-sys-color-border-inverse-default",
-      /** {base.palette.white.A700} */
-      "strong": "--cnvs-sys-color-border-inverse-strong",
-    },
     /** {base.palette.neutral.A0} */
     "transparent": "--cnvs-sys-color-border-transparent",
   },
-  /**
-   * oklch({base.palette.slate.900} / {base.opacity.200})
-   * 
-   * First shadow color
-   * 
-   * @deprecated Use sys.color.shadow.base instead
-   */
-  "shadow1": "--cnvs-sys-color-shadow-1",
-  /**
-   * oklch({base.palette.slate.900} / {base.opacity.100})
-   * 
-   * Second shadow color
-   * 
-   * @deprecated Use sys.color.shadow.ambient instead
-   */
-  "shadow2": "--cnvs-sys-color-shadow-2",
   "shadow": {
+    /**
+     * oklch({base.palette.slate.900} / {base.opacity.200})
+     * 
+     * First shadow color
+     * 
+     * @deprecated Use sys.color.shadow.base instead
+     */
+    "1": "--cnvs-sys-color-shadow-1",
+    /**
+     * oklch({base.palette.slate.900} / {base.opacity.100})
+     * 
+     * Second shadow color
+     * 
+     * @deprecated Use sys.color.shadow.ambient instead
+     */
+    "2": "--cnvs-sys-color-shadow-2",
     /**
      * {base.palette.slate.900}
      * 
@@ -2703,61 +2653,58 @@ export declare const color: {
   },
 };
 
-/**
- * [object Object],[object Object]
- * 
- * Standard card depth
- * 
- * 
- */
-export declare const depth1: "--cnvs-sys-depth-1";
-
-/**
- * [object Object],[object Object]
- * 
- * Top navigation, Bottom Navigation
- * 
- * 
- */
-export declare const depth2: "--cnvs-sys-depth-2";
-
-/**
- * [object Object],[object Object]
- * 
- * Floating Action Buttons (FAB), Menus
- * 
- * 
- */
-export declare const depth3: "--cnvs-sys-depth-3";
-
-/**
- * [object Object],[object Object]
- * 
- * Bottom Sheets
- * 
- * 
- */
-export declare const depth4: "--cnvs-sys-depth-4";
-
-/**
- * [object Object],[object Object]
- * 
- * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
- * Side Panels (when opacity overlay behaviour is not applied)
- * 
- * 
- */
-export declare const depth5: "--cnvs-sys-depth-5";
-
-/**
- * [object Object],[object Object]
- * 
- * Modal Dialogs, Side Panels (when opacity overlay behaviour
- * is applied)
- * 
- * 
- */
-export declare const depth6: "--cnvs-sys-depth-6";
+export declare const depth: {
+  /**
+   * [object Object],[object Object]
+   * 
+   * Standard card depth
+   * 
+   * 
+   */
+  "1": "--cnvs-sys-depth-1",
+  /**
+   * [object Object],[object Object]
+   * 
+   * Top navigation, Bottom Navigation
+   * 
+   * 
+   */
+  "2": "--cnvs-sys-depth-2",
+  /**
+   * [object Object],[object Object]
+   * 
+   * Floating Action Buttons (FAB), Menus
+   * 
+   * 
+   */
+  "3": "--cnvs-sys-depth-3",
+  /**
+   * [object Object],[object Object]
+   * 
+   * Bottom Sheets
+   * 
+   * 
+   */
+  "4": "--cnvs-sys-depth-4",
+  /**
+   * [object Object],[object Object]
+   * 
+   * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
+   * Side Panels (when opacity overlay behaviour is not applied)
+   * 
+   * 
+   */
+  "5": "--cnvs-sys-depth-5",
+  /**
+   * [object Object],[object Object]
+   * 
+   * Modal Dialogs, Side Panels (when opacity overlay behaviour
+   * is applied)
+   * 
+   * 
+   */
+  "6": "--cnvs-sys-depth-6",
+};
 
 export declare const opacity: {
   /**