@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.
- package/css/base/_variables.css +1 -1
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +4 -4
- package/dist/common-js/base/index.d.ts +1 -1
- package/dist/common-js/base/index.js +1 -1
- package/dist/common-js/brand/index.d.ts +1 -1
- package/dist/common-js/brand/index.js +1 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +27 -19
- package/dist/common-js/system/index.js +6 -4
- package/dist/es6/base/index.d.ts +1 -1
- package/dist/es6/base/index.js +1 -1
- package/dist/es6/brand/index.d.ts +1 -1
- package/dist/es6/brand/index.js +1 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +27 -19
- package/dist/es6/system/index.js +6 -4
- package/less/base/_variables.less +1 -1
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +4 -4
- package/package.json +1 -1
- package/scss/base/_variables.sass +1 -1
- package/scss/base/_variables.scss +1 -1
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +4 -4
- package/scss/system/_variables.scss +4 -4
package/css/base/_variables.css
CHANGED
package/css/brand/_variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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:
|
|
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);
|
package/dist/common-js/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
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
|
|
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":
|
|
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",
|
package/dist/es6/base/index.d.ts
CHANGED
package/dist/es6/base/index.js
CHANGED
package/dist/es6/brand/index.js
CHANGED
package/dist/es6/index.d.ts
CHANGED
package/dist/es6/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
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)
|
package/dist/es6/system/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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":
|
|
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
|
|
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:
|
|
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
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
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:
|
|
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
|
|
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:
|
|
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;
|