@workday/canvas-tokens-web 3.1.1 → 3.1.3

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.
Files changed (29) hide show
  1. package/css/base/_variables.css +157 -157
  2. package/css/brand/_variables.css +1 -1
  3. package/css/system/_variables.css +91 -87
  4. package/dist/common-js/base/index.d.ts +1 -1
  5. package/dist/common-js/base/index.js +1 -1
  6. package/dist/common-js/brand/index.d.ts +1 -1
  7. package/dist/common-js/brand/index.js +1 -1
  8. package/dist/common-js/index.d.ts +3 -3
  9. package/dist/common-js/index.js +3 -3
  10. package/dist/common-js/system/index.d.ts +993 -981
  11. package/dist/common-js/system/index.js +232 -224
  12. package/dist/es6/base/index.d.ts +1 -1
  13. package/dist/es6/base/index.js +1 -1
  14. package/dist/es6/brand/index.d.ts +1 -1
  15. package/dist/es6/brand/index.js +1 -1
  16. package/dist/es6/index.d.ts +3 -3
  17. package/dist/es6/index.js +3 -3
  18. package/dist/es6/system/index.d.ts +993 -981
  19. package/dist/es6/system/index.js +232 -224
  20. package/less/base/_variables.less +157 -157
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +97 -93
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +157 -157
  25. package/scss/base/_variables.scss +157 -157
  26. package/scss/brand/_variables.sass +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +97 -93
  29. package/scss/system/_variables.scss +97 -93
package/scss/system/_variables.sass CHANGED
@@ -1,52 +1,58 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 19 Sep 2025 22:18:52 GMT
3
+ // Generated on Fri, 31 Oct 2025 14:47:45 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.
7
7
  $cnvs-sys-opacity-full: 1; // Dev only
8
8
  $cnvs-sys-opacity-zero: 0; // Dev only
9
9
  $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
- $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
11
- $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
12
- $cnvs-sys-color-static-amber-softer: $cnvs-base-palette-amber-50; // Soft amber
13
- $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
14
- $cnvs-sys-color-static-amber-strong: $cnvs-base-palette-amber-500; // Stronger amber
15
- $cnvs-sys-color-static-amber-softest: $cnvs-base-palette-amber-25; // Soft amber
16
- $cnvs-sys-color-static-amber-default: $cnvs-base-palette-amber-400; // amber
17
- $cnvs-sys-color-static-gray-softer: $cnvs-base-palette-slate-100; // Light gray
18
- $cnvs-sys-color-static-gray-softest: $cnvs-base-palette-slate-50; // Light gray
19
- $cnvs-sys-color-static-gray-strongest: $cnvs-base-palette-slate-950; // Strongerer gray
20
- $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-slate-800; // Strongerer gray
21
- $cnvs-sys-color-static-gray-strong: $cnvs-base-palette-slate-700; // Stronger gray
22
- $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-slate-200; // Light gray
23
- $cnvs-sys-color-static-gray-default: $cnvs-base-palette-slate-600; // Gray
24
- $cnvs-sys-color-static-black: $cnvs-base-palette-neutral-1000; // Just black
25
- $cnvs-sys-color-static-white: $cnvs-base-palette-neutral-0; // Just white
26
- $cnvs-sys-color-static-red-softer: $cnvs-base-palette-red-50; // Light red
27
- $cnvs-sys-color-static-red-strongest: $cnvs-base-palette-red-950; // Strong red
28
- $cnvs-sys-color-static-red-softest: $cnvs-base-palette-red-25; // Light red
29
- $cnvs-sys-color-static-red-stronger: $cnvs-base-palette-red-800; // Strong red
30
- $cnvs-sys-color-static-red-strong: $cnvs-base-palette-red-700; // Strong red
31
- $cnvs-sys-color-static-red-soft: $cnvs-base-palette-red-100; // Light red
32
- $cnvs-sys-color-static-red-default: $cnvs-base-palette-red-600; // Red
33
- $cnvs-sys-color-static-green-strongest: $cnvs-base-palette-green-950; // Stronger green
34
- $cnvs-sys-color-static-green-softest: $cnvs-base-palette-green-25; // Light green
35
- $cnvs-sys-color-static-green-stronger: $cnvs-base-palette-green-800; // Stronger green
36
- $cnvs-sys-color-static-green-softer: $cnvs-base-palette-green-50; // Light green
37
- $cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-700; // Stronger green
38
- $cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-100; // Light green
39
- $cnvs-sys-color-static-green-default: $cnvs-base-palette-green-600; // Default green
40
- $cnvs-sys-color-static-blue-strongest: $cnvs-base-palette-blue-950; // Stronger blue
41
- $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blue-100; // Light blue
42
- $cnvs-sys-color-static-blue-softer: $cnvs-base-palette-blue-50; // Light blue
43
- $cnvs-sys-color-static-blue-stronger: $cnvs-base-palette-blue-800; // Stronger blue
44
- $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blue-700; // Stronger blue
45
- $cnvs-sys-color-static-blue-softest: $cnvs-base-palette-blue-25; // Light blue
46
- $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blue-600; // Blue
10
+ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
11
+ $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
12
+ $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
13
+ $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
14
+ $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
15
+ $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
16
+ $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
17
+ $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
18
+ $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
19
+ $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
20
+ $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
21
+ $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
22
+ $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
23
+ $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
24
+ $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
25
+ $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
26
+ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
27
+ $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
28
+ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
29
+ $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
30
+ $cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
31
+ $cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
32
+ $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
33
+ $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
34
+ $cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
35
+ $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
36
+ $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
37
+ $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
38
+ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
39
+ $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
40
+ $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
41
+ $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
42
+ $cnvs-sys-shape-x1: $cnvs-base-unit;
43
+ $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
44
+ $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
45
+ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
+ $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
+ $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
50
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
51
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
52
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
47
53
  $cnvs-sys-color-shadow-default: $cnvs-base-palette-slate-900; // Main shadow color
48
- $cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Second shadow color
49
- $cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)); // First shadow color
54
+ $cnvs-sys-color-shadow-2: oklch(from $cnvs-base-palette-slate-900 l c h / $cnvs-base-opacity-100); // Second shadow color
55
+ $cnvs-sys-color-shadow-1: oklch(from $cnvs-base-palette-slate-900 l c h / $cnvs-base-opacity-200); // First shadow color
50
56
  $cnvs-sys-color-border-info-default: $cnvs-base-palette-blue-500; // Brand, Focus
51
57
  $cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; // Active state on AI borders
52
58
  $cnvs-sys-color-border-container: $cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
@@ -205,55 +211,53 @@ $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
205
211
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
206
212
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
213
  $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
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
209
- $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay 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 Secondary 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-100)); // Inverse Secondary Button Hover state
214
+ $cnvs-sys-color-bg-translucent: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-500); // Tooltip, Status Indicator
215
+ $cnvs-sys-color-bg-overlay: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-400); // Overlay background
216
+ $cnvs-sys-color-bg-transparent-stronger: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-250); // Inverse Secondary Button Active state
217
+ $cnvs-sys-color-bg-transparent-strong: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-100); // Inverse Secondary Button Hover state
212
218
  $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
219
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
- $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
215
- $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
216
- $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
217
- $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
218
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
219
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
220
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
221
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
222
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
223
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
224
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
225
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
226
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
227
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
228
- $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
229
- $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
230
- $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
231
- $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
232
- $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
233
- $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
234
- $cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
235
- $cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
236
- $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
237
- $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
238
- $cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
239
- $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
240
- $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
241
- $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
242
- $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
243
- $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
244
- $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
245
- $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
246
- $cnvs-sys-shape-x1: $cnvs-base-unit;
247
- $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
248
- $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
249
- $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
250
- $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
251
- $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
252
- $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
253
- $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
254
- $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
255
- $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
256
- $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
220
+ $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
221
+ $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
222
+ $cnvs-sys-color-static-amber-softer: $cnvs-base-palette-amber-50; // Soft amber
223
+ $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
224
+ $cnvs-sys-color-static-amber-strong: $cnvs-base-palette-amber-500; // Stronger amber
225
+ $cnvs-sys-color-static-amber-softest: $cnvs-base-palette-amber-25; // Soft amber
226
+ $cnvs-sys-color-static-amber-default: $cnvs-base-palette-amber-400; // amber
227
+ $cnvs-sys-color-static-gray-softer: $cnvs-base-palette-slate-100; // Light gray
228
+ $cnvs-sys-color-static-gray-softest: $cnvs-base-palette-slate-50; // Light gray
229
+ $cnvs-sys-color-static-gray-strongest: $cnvs-base-palette-slate-950; // Strongerer gray
230
+ $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-slate-800; // Strongerer gray
231
+ $cnvs-sys-color-static-gray-strong: $cnvs-base-palette-slate-700; // Stronger gray
232
+ $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-slate-200; // Light gray
233
+ $cnvs-sys-color-static-gray-default: $cnvs-base-palette-slate-600; // Gray
234
+ $cnvs-sys-color-static-black: $cnvs-base-palette-neutral-1000; // Just black
235
+ $cnvs-sys-color-static-white: $cnvs-base-palette-neutral-0; // Just white
236
+ $cnvs-sys-color-static-red-softer: $cnvs-base-palette-red-50; // Light red
237
+ $cnvs-sys-color-static-red-strongest: $cnvs-base-palette-red-950; // Strong red
238
+ $cnvs-sys-color-static-red-softest: $cnvs-base-palette-red-25; // Light red
239
+ $cnvs-sys-color-static-red-stronger: $cnvs-base-palette-red-800; // Strong red
240
+ $cnvs-sys-color-static-red-strong: $cnvs-base-palette-red-700; // Strong red
241
+ $cnvs-sys-color-static-red-soft: $cnvs-base-palette-red-100; // Light red
242
+ $cnvs-sys-color-static-red-default: $cnvs-base-palette-red-600; // Red
243
+ $cnvs-sys-color-static-green-strongest: $cnvs-base-palette-green-950; // Stronger green
244
+ $cnvs-sys-color-static-green-softest: $cnvs-base-palette-green-25; // Light green
245
+ $cnvs-sys-color-static-green-stronger: $cnvs-base-palette-green-800; // Stronger green
246
+ $cnvs-sys-color-static-green-softer: $cnvs-base-palette-green-50; // Light green
247
+ $cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-700; // Stronger green
248
+ $cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-100; // Light green
249
+ $cnvs-sys-color-static-green-default: $cnvs-base-palette-green-600; // Default green
250
+ $cnvs-sys-color-static-blue-strongest: $cnvs-base-palette-blue-950; // Stronger blue
251
+ $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blue-100; // Light blue
252
+ $cnvs-sys-color-static-blue-softer: $cnvs-base-palette-blue-50; // Light blue
253
+ $cnvs-sys-color-static-blue-stronger: $cnvs-base-palette-blue-800; // Stronger blue
254
+ $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blue-700; // Stronger blue
255
+ $cnvs-sys-color-static-blue-softest: $cnvs-base-palette-blue-25; // Light blue
256
+ $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blue-600; // Blue
257
+ $cnvs-sys-color-static-orange-strong: $cnvs-base-palette-amber-500;
258
+ $cnvs-sys-color-static-orange-soft: $cnvs-base-palette-amber-100;
259
+ $cnvs-sys-color-static-orange-default: $cnvs-base-palette-amber-400;
260
+ $cnvs-sys-color-static-gold-stronger: $cnvs-base-palette-amber-600;
257
261
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
258
262
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
259
263
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
@@ -265,12 +269,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
265
269
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
266
270
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
267
271
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
268
- $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.125rem 0.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Standard card depth
269
- $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.25rem 1rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Top navigation, Bottom Navigation
270
- $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.375rem 1.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Floating Action Buttons (FAB), Menus
271
- $cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.5rem 2rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Bottom Sheets
272
- $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.625rem 2.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
273
- $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.75rem 3rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
272
+ $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.125rem 0.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Standard card depth
273
+ $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.25rem 1rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Top navigation, Bottom Navigation
274
+ $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.375rem 1.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Floating Action Buttons (FAB), Menus
275
+ $cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.5rem 2rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Bottom Sheets
276
+ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.625rem 2.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
277
+ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.75rem 3rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
274
278
 
275
279
  .cnvs-sys-type-subtext-small {
276
280
  font-family: $cnvs-sys-font-family-default;
package/scss/system/_variables.scss CHANGED
@@ -1,52 +1,58 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 19 Sep 2025 22:18:52 GMT
3
+ // Generated on Fri, 31 Oct 2025 14:47:45 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.
7
7
  $cnvs-sys-opacity-full: 1; // Dev only
8
8
  $cnvs-sys-opacity-zero: 0; // Dev only
9
9
  $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
- $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
11
- $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
12
- $cnvs-sys-color-static-amber-softer: $cnvs-base-palette-amber-50; // Soft amber
13
- $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
14
- $cnvs-sys-color-static-amber-strong: $cnvs-base-palette-amber-500; // Stronger amber
15
- $cnvs-sys-color-static-amber-softest: $cnvs-base-palette-amber-25; // Soft amber
16
- $cnvs-sys-color-static-amber-default: $cnvs-base-palette-amber-400; // amber
17
- $cnvs-sys-color-static-gray-softer: $cnvs-base-palette-slate-100; // Light gray
18
- $cnvs-sys-color-static-gray-softest: $cnvs-base-palette-slate-50; // Light gray
19
- $cnvs-sys-color-static-gray-strongest: $cnvs-base-palette-slate-950; // Strongerer gray
20
- $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-slate-800; // Strongerer gray
21
- $cnvs-sys-color-static-gray-strong: $cnvs-base-palette-slate-700; // Stronger gray
22
- $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-slate-200; // Light gray
23
- $cnvs-sys-color-static-gray-default: $cnvs-base-palette-slate-600; // Gray
24
- $cnvs-sys-color-static-black: $cnvs-base-palette-neutral-1000; // Just black
25
- $cnvs-sys-color-static-white: $cnvs-base-palette-neutral-0; // Just white
26
- $cnvs-sys-color-static-red-softer: $cnvs-base-palette-red-50; // Light red
27
- $cnvs-sys-color-static-red-strongest: $cnvs-base-palette-red-950; // Strong red
28
- $cnvs-sys-color-static-red-softest: $cnvs-base-palette-red-25; // Light red
29
- $cnvs-sys-color-static-red-stronger: $cnvs-base-palette-red-800; // Strong red
30
- $cnvs-sys-color-static-red-strong: $cnvs-base-palette-red-700; // Strong red
31
- $cnvs-sys-color-static-red-soft: $cnvs-base-palette-red-100; // Light red
32
- $cnvs-sys-color-static-red-default: $cnvs-base-palette-red-600; // Red
33
- $cnvs-sys-color-static-green-strongest: $cnvs-base-palette-green-950; // Stronger green
34
- $cnvs-sys-color-static-green-softest: $cnvs-base-palette-green-25; // Light green
35
- $cnvs-sys-color-static-green-stronger: $cnvs-base-palette-green-800; // Stronger green
36
- $cnvs-sys-color-static-green-softer: $cnvs-base-palette-green-50; // Light green
37
- $cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-700; // Stronger green
38
- $cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-100; // Light green
39
- $cnvs-sys-color-static-green-default: $cnvs-base-palette-green-600; // Default green
40
- $cnvs-sys-color-static-blue-strongest: $cnvs-base-palette-blue-950; // Stronger blue
41
- $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blue-100; // Light blue
42
- $cnvs-sys-color-static-blue-softer: $cnvs-base-palette-blue-50; // Light blue
43
- $cnvs-sys-color-static-blue-stronger: $cnvs-base-palette-blue-800; // Stronger blue
44
- $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blue-700; // Stronger blue
45
- $cnvs-sys-color-static-blue-softest: $cnvs-base-palette-blue-25; // Light blue
46
- $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blue-600; // Blue
10
+ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
11
+ $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
12
+ $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
13
+ $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
14
+ $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
15
+ $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
16
+ $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
17
+ $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
18
+ $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
19
+ $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
20
+ $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
21
+ $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
22
+ $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
23
+ $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
24
+ $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
25
+ $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
26
+ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
27
+ $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
28
+ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
29
+ $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
30
+ $cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
31
+ $cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
32
+ $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
33
+ $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
34
+ $cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
35
+ $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
36
+ $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
37
+ $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
38
+ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
39
+ $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
40
+ $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
41
+ $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
42
+ $cnvs-sys-shape-x1: $cnvs-base-unit;
43
+ $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
44
+ $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
45
+ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
+ $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
+ $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
50
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
51
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
52
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
47
53
  $cnvs-sys-color-shadow-default: $cnvs-base-palette-slate-900; // Main shadow color
48
- $cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Second shadow color
49
- $cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)); // First shadow color
54
+ $cnvs-sys-color-shadow-2: oklch(from $cnvs-base-palette-slate-900 l c h / $cnvs-base-opacity-100); // Second shadow color
55
+ $cnvs-sys-color-shadow-1: oklch(from $cnvs-base-palette-slate-900 l c h / $cnvs-base-opacity-200); // First shadow color
50
56
  $cnvs-sys-color-border-info-default: $cnvs-base-palette-blue-500; // Brand, Focus
51
57
  $cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; // Active state on AI borders
52
58
  $cnvs-sys-color-border-container: $cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
@@ -205,55 +211,53 @@ $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
205
211
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
206
212
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
213
  $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
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
209
- $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay 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 Secondary 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-100)); // Inverse Secondary Button Hover state
214
+ $cnvs-sys-color-bg-translucent: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-500); // Tooltip, Status Indicator
215
+ $cnvs-sys-color-bg-overlay: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-400); // Overlay background
216
+ $cnvs-sys-color-bg-transparent-stronger: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-250); // Inverse Secondary Button Active state
217
+ $cnvs-sys-color-bg-transparent-strong: oklch(from $cnvs-base-palette-neutral-1000 l c h / $cnvs-base-opacity-100); // Inverse Secondary Button Hover state
212
218
  $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
219
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
- $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
215
- $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
216
- $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
217
- $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
218
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
219
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
220
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
221
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
222
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
223
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
224
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
225
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
226
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
227
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
228
- $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
229
- $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
230
- $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
231
- $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
232
- $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
233
- $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
234
- $cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
235
- $cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
236
- $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
237
- $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
238
- $cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
239
- $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
240
- $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
241
- $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
242
- $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
243
- $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
244
- $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
245
- $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
246
- $cnvs-sys-shape-x1: $cnvs-base-unit;
247
- $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
248
- $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
249
- $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
250
- $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
251
- $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
252
- $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
253
- $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
254
- $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
255
- $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
256
- $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
220
+ $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
221
+ $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
222
+ $cnvs-sys-color-static-amber-softer: $cnvs-base-palette-amber-50; // Soft amber
223
+ $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
224
+ $cnvs-sys-color-static-amber-strong: $cnvs-base-palette-amber-500; // Stronger amber
225
+ $cnvs-sys-color-static-amber-softest: $cnvs-base-palette-amber-25; // Soft amber
226
+ $cnvs-sys-color-static-amber-default: $cnvs-base-palette-amber-400; // amber
227
+ $cnvs-sys-color-static-gray-softer: $cnvs-base-palette-slate-100; // Light gray
228
+ $cnvs-sys-color-static-gray-softest: $cnvs-base-palette-slate-50; // Light gray
229
+ $cnvs-sys-color-static-gray-strongest: $cnvs-base-palette-slate-950; // Strongerer gray
230
+ $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-slate-800; // Strongerer gray
231
+ $cnvs-sys-color-static-gray-strong: $cnvs-base-palette-slate-700; // Stronger gray
232
+ $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-slate-200; // Light gray
233
+ $cnvs-sys-color-static-gray-default: $cnvs-base-palette-slate-600; // Gray
234
+ $cnvs-sys-color-static-black: $cnvs-base-palette-neutral-1000; // Just black
235
+ $cnvs-sys-color-static-white: $cnvs-base-palette-neutral-0; // Just white
236
+ $cnvs-sys-color-static-red-softer: $cnvs-base-palette-red-50; // Light red
237
+ $cnvs-sys-color-static-red-strongest: $cnvs-base-palette-red-950; // Strong red
238
+ $cnvs-sys-color-static-red-softest: $cnvs-base-palette-red-25; // Light red
239
+ $cnvs-sys-color-static-red-stronger: $cnvs-base-palette-red-800; // Strong red
240
+ $cnvs-sys-color-static-red-strong: $cnvs-base-palette-red-700; // Strong red
241
+ $cnvs-sys-color-static-red-soft: $cnvs-base-palette-red-100; // Light red
242
+ $cnvs-sys-color-static-red-default: $cnvs-base-palette-red-600; // Red
243
+ $cnvs-sys-color-static-green-strongest: $cnvs-base-palette-green-950; // Stronger green
244
+ $cnvs-sys-color-static-green-softest: $cnvs-base-palette-green-25; // Light green
245
+ $cnvs-sys-color-static-green-stronger: $cnvs-base-palette-green-800; // Stronger green
246
+ $cnvs-sys-color-static-green-softer: $cnvs-base-palette-green-50; // Light green
247
+ $cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-700; // Stronger green
248
+ $cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-100; // Light green
249
+ $cnvs-sys-color-static-green-default: $cnvs-base-palette-green-600; // Default green
250
+ $cnvs-sys-color-static-blue-strongest: $cnvs-base-palette-blue-950; // Stronger blue
251
+ $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blue-100; // Light blue
252
+ $cnvs-sys-color-static-blue-softer: $cnvs-base-palette-blue-50; // Light blue
253
+ $cnvs-sys-color-static-blue-stronger: $cnvs-base-palette-blue-800; // Stronger blue
254
+ $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blue-700; // Stronger blue
255
+ $cnvs-sys-color-static-blue-softest: $cnvs-base-palette-blue-25; // Light blue
256
+ $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blue-600; // Blue
257
+ $cnvs-sys-color-static-orange-strong: $cnvs-base-palette-amber-500;
258
+ $cnvs-sys-color-static-orange-soft: $cnvs-base-palette-amber-100;
259
+ $cnvs-sys-color-static-orange-default: $cnvs-base-palette-amber-400;
260
+ $cnvs-sys-color-static-gold-stronger: $cnvs-base-palette-amber-600;
257
261
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
258
262
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
259
263
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
@@ -265,12 +269,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
265
269
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
266
270
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
267
271
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
268
- $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.125rem 0.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Standard card depth
269
- $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.25rem 1rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Top navigation, Bottom Navigation
270
- $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.375rem 1.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Floating Action Buttons (FAB), Menus
271
- $cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.5rem 2rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Bottom Sheets
272
- $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.625rem 2.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
273
- $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)), 0 0.75rem 3rem 0 oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
272
+ $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.125rem 0.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Standard card depth
273
+ $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.25rem 1rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Top navigation, Bottom Navigation
274
+ $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.375rem 1.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Floating Action Buttons (FAB), Menus
275
+ $cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.5rem 2rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Bottom Sheets
276
+ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.625rem 2.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
277
+ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.12), 0 0.75rem 3rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h / 0.08); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
274
278
 
275
279
  .cnvs-sys-type-subtext-small {
276
280
  font-family: $cnvs-sys-font-family-default;