@workday/canvas-tokens-web 3.0.0-alpha.10 → 3.0.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -213,11 +213,11 @@
213
213
  --cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
214
214
  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
215
215
  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-100); /* Surface hover, Secondary surfaces */
216
- --cnvs-sys-color-bg-overlay-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); /* Inverse overlay background */
217
- --cnvs-sys-color-bg-translucent-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250));
218
216
  --cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
219
217
  --cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); /* Overlay background */
220
- --cnvs-sys-color-bg-transparent: transparent; /* Transparent background */
218
+ --cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); /* Inverse Button Active state */
219
+ --cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); /* Inverse Button Hover state */
220
+ --cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
221
221
  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Main background color */
222
222
  --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
223
223
  --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const amber25: "--cnvs-base-palette-amber-25";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const primary: {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
@@ -530,14 +530,32 @@ export declare const color: {
530
530
  * Main background color
531
531
  */
532
532
  "default": "--cnvs-sys-color-bg-default",
533
- /**
534
- * oklch(oklch(1 0 0 / 1) / 0)
535
- *
536
- * token: oklch({base.neutral.0} / {base.opacity.0})
537
- *
538
- * Transparent background
539
- */
540
- "transparent": "--cnvs-sys-color-bg-transparent",
533
+ "transparent": {
534
+ /**
535
+ * oklch(oklch(0 0 0 / 1) / 0)
536
+ *
537
+ * token: oklch({base.neutral.1000} / {base.opacity.0})
538
+ *
539
+ * Transparent background
540
+ */
541
+ "default": "--cnvs-sys-color-bg-transparent-default",
542
+ /**
543
+ * oklch(oklch(0 0 0 / 1) / 0.12)
544
+ *
545
+ * token: oklch({base.neutral.1000} / {base.opacity.200})
546
+ *
547
+ * Inverse Button Hover state
548
+ */
549
+ "strong": "--cnvs-sys-color-bg-transparent-strong",
550
+ /**
551
+ * oklch(oklch(0 0 0 / 1) / 0.2)
552
+ *
553
+ * token: oklch({base.neutral.1000} / {base.opacity.250})
554
+ *
555
+ * Inverse Button Active state
556
+ */
557
+ "stronger": "--cnvs-sys-color-bg-transparent-stronger",
558
+ },
541
559
  /**
542
560
  * oklch(oklch(0 0 0 / 1) / 0.64)
543
561
  *
@@ -554,16 +572,6 @@ export declare const color: {
554
572
  * Tooltip, Status Indicator
555
573
  */
556
574
  "translucent": "--cnvs-sys-color-bg-translucent",
557
- /** oklch(oklch(0 0 0 / 1) / 0.2) */
558
- "translucentInverse": "--cnvs-sys-color-bg-translucent-inverse",
559
- /**
560
- * oklch(oklch(0 0 0 / 1) / 0.12)
561
- *
562
- * token: oklch({base.neutral.1000} / {base.opacity.200})
563
- *
564
- * Inverse overlay background
565
- */
566
- "overlayInverse": "--cnvs-sys-color-bg-overlay-inverse",
567
575
  "alt": {
568
576
  /**
569
577
  * oklch(0.9447 0.0053 248.12 / 1)
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -196,11 +196,13 @@ exports.type = {
196
196
  exports.color = {
197
197
  "bg": {
198
198
  "default": "--cnvs-sys-color-bg-default",
199
- "transparent": "--cnvs-sys-color-bg-transparent",
199
+ "transparent": {
200
+ "default": "--cnvs-sys-color-bg-transparent-default",
201
+ "strong": "--cnvs-sys-color-bg-transparent-strong",
202
+ "stronger": "--cnvs-sys-color-bg-transparent-stronger"
203
+ },
200
204
  "overlay": "--cnvs-sys-color-bg-overlay",
201
205
  "translucent": "--cnvs-sys-color-bg-translucent",
202
- "translucentInverse": "--cnvs-sys-color-bg-translucent-inverse",
203
- "overlayInverse": "--cnvs-sys-color-bg-overlay-inverse",
204
206
  "alt": {
205
207
  "default": "--cnvs-sys-color-bg-alt-default",
206
208
  "soft": "--cnvs-sys-color-bg-alt-soft",
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const amber25: "--cnvs-base-palette-amber-25";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export const amber25 = "--cnvs-base-palette-amber-25";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const primary: {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export const primary = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/es6/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
@@ -530,14 +530,32 @@ export declare const color: {
530
530
  * Main background color
531
531
  */
532
532
  "default": "--cnvs-sys-color-bg-default",
533
- /**
534
- * oklch(oklch(1 0 0 / 1) / 0)
535
- *
536
- * token: oklch({base.neutral.0} / {base.opacity.0})
537
- *
538
- * Transparent background
539
- */
540
- "transparent": "--cnvs-sys-color-bg-transparent",
533
+ "transparent": {
534
+ /**
535
+ * oklch(oklch(0 0 0 / 1) / 0)
536
+ *
537
+ * token: oklch({base.neutral.1000} / {base.opacity.0})
538
+ *
539
+ * Transparent background
540
+ */
541
+ "default": "--cnvs-sys-color-bg-transparent-default",
542
+ /**
543
+ * oklch(oklch(0 0 0 / 1) / 0.12)
544
+ *
545
+ * token: oklch({base.neutral.1000} / {base.opacity.200})
546
+ *
547
+ * Inverse Button Hover state
548
+ */
549
+ "strong": "--cnvs-sys-color-bg-transparent-strong",
550
+ /**
551
+ * oklch(oklch(0 0 0 / 1) / 0.2)
552
+ *
553
+ * token: oklch({base.neutral.1000} / {base.opacity.250})
554
+ *
555
+ * Inverse Button Active state
556
+ */
557
+ "stronger": "--cnvs-sys-color-bg-transparent-stronger",
558
+ },
541
559
  /**
542
560
  * oklch(oklch(0 0 0 / 1) / 0.64)
543
561
  *
@@ -554,16 +572,6 @@ export declare const color: {
554
572
  * Tooltip, Status Indicator
555
573
  */
556
574
  "translucent": "--cnvs-sys-color-bg-translucent",
557
- /** oklch(oklch(0 0 0 / 1) / 0.2) */
558
- "translucentInverse": "--cnvs-sys-color-bg-translucent-inverse",
559
- /**
560
- * oklch(oklch(0 0 0 / 1) / 0.12)
561
- *
562
- * token: oklch({base.neutral.1000} / {base.opacity.200})
563
- *
564
- * Inverse overlay background
565
- */
566
- "overlayInverse": "--cnvs-sys-color-bg-overlay-inverse",
567
575
  "alt": {
568
576
  /**
569
577
  * oklch(0.9447 0.0053 248.12 / 1)
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ * Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
  */
5
5
 
6
6
  export const breakpoints = {
@@ -193,11 +193,13 @@ export const type = {
193
193
  export const color = {
194
194
  "bg": {
195
195
  "default": "--cnvs-sys-color-bg-default",
196
- "transparent": "--cnvs-sys-color-bg-transparent",
196
+ "transparent": {
197
+ "default": "--cnvs-sys-color-bg-transparent-default",
198
+ "strong": "--cnvs-sys-color-bg-transparent-strong",
199
+ "stronger": "--cnvs-sys-color-bg-transparent-stronger"
200
+ },
197
201
  "overlay": "--cnvs-sys-color-bg-overlay",
198
202
  "translucent": "--cnvs-sys-color-bg-translucent",
199
- "translucentInverse": "--cnvs-sys-color-bg-translucent-inverse",
200
- "overlayInverse": "--cnvs-sys-color-bg-overlay-inverse",
201
203
  "alt": {
202
204
  "default": "--cnvs-sys-color-bg-alt-default",
203
205
  "soft": "--cnvs-sys-color-bg-alt-soft",
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  @cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
6
6
  @cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  @cnvs-brand-common-alert-outer: @cnvs-base-palette-amber-500;
6
6
  @cnvs-brand-common-alert-inner: @cnvs-base-palette-amber-400;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  @cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  @cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -205,11 +205,11 @@
205
205
  @cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
206
206
  @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
207
207
  @cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
208
- @cnvs-sys-color-bg-overlay-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse overlay background
209
- @cnvs-sys-color-bg-translucent-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250));
210
208
  @cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
211
209
  @cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
212
- @cnvs-sys-color-bg-transparent: transparent; // Transparent background
210
+ @cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Button Active state
211
+ @cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Button Hover state
212
+ @cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  @cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Main background color
214
214
  @cnvs-sys-font-weight-bold: @cnvs-base-font-weight-700;
215
215
  @cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "3.0.0-alpha.10",
3
+ "version": "3.0.0-alpha.12",
4
4
  "description": "Canvas design tokens for web",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "CC-BY-ND-4.0",
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
6
6
  $cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
6
6
  $cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -205,11 +205,11 @@ $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state f
205
205
  $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
206
206
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
207
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
208
- $cnvs-sys-color-bg-overlay-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse overlay background
209
- $cnvs-sys-color-bg-translucent-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250));
210
208
  $cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
211
209
  $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
212
- $cnvs-sys-color-bg-transparent: transparent; // Transparent background
210
+ $cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Button Active state
211
+ $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Button Hover state
212
+ $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
214
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
215
215
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 28 Jul 2025 17:55:05 GMT
3
+ // Generated on Wed, 06 Aug 2025 00:24:24 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -205,11 +205,11 @@ $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state f
205
205
  $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
206
206
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
207
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
208
- $cnvs-sys-color-bg-overlay-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse overlay background
209
- $cnvs-sys-color-bg-translucent-inverse: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250));
210
208
  $cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
211
209
  $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
212
- $cnvs-sys-color-bg-transparent: transparent; // Transparent background
210
+ $cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Button Active state
211
+ $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Button Hover state
212
+ $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
214
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
215
215
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;