@workday/canvas-tokens-web 1.3.1 → 2.0.1

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 +1 -15
  2. package/css/brand/_variables.css +2 -1
  3. package/css/system/_variables.css +8 -8
  4. package/dist/common-js/base/index.d.ts +214 -228
  5. package/dist/common-js/base/index.js +1 -15
  6. package/dist/common-js/brand/index.d.ts +15 -15
  7. package/dist/common-js/brand/index.js +1 -1
  8. package/dist/common-js/index.d.ts +1 -1
  9. package/dist/common-js/index.js +1 -1
  10. package/dist/common-js/system/index.d.ts +289 -25
  11. package/dist/common-js/system/index.js +2 -2
  12. package/dist/es6/base/index.d.ts +214 -228
  13. package/dist/es6/base/index.js +1 -15
  14. package/dist/es6/brand/index.d.ts +15 -15
  15. package/dist/es6/brand/index.js +1 -1
  16. package/dist/es6/index.d.ts +1 -1
  17. package/dist/es6/index.js +1 -1
  18. package/dist/es6/system/index.d.ts +289 -25
  19. package/dist/es6/system/index.js +2 -2
  20. package/less/base/_variables.less +1 -15
  21. package/less/brand/_variables.less +2 -1
  22. package/less/system/_variables.less +8 -8
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +1 -15
  25. package/scss/base/_variables.scss +1 -15
  26. package/scss/brand/_variables.sass +2 -1
  27. package/scss/brand/_variables.scss +2 -1
  28. package/scss/system/_variables.sass +8 -8
  29. package/scss/system/_variables.scss +8 -8
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ * Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
  */
5
5
 
6
6
  export const color = {
@@ -34,7 +34,7 @@ export const color = {
34
34
  },
35
35
  "positive": {
36
36
  "default": "--cnvs-sys-color-bg-positive-default",
37
- "soft": "--cnvs-sys-color-bg-positive-soft",
37
+ "softer": "--cnvs-sys-color-bg-positive-softer",
38
38
  "strong": "--cnvs-sys-color-bg-positive-strong",
39
39
  "stronger": "--cnvs-sys-color-bg-positive-stronger"
40
40
  },
package/less/base/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  @cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  @cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -197,13 +197,6 @@
197
197
  @cnvs-base-line-height-750: 4.5rem;
198
198
  @cnvs-base-line-height-900: 5.5rem;
199
199
  @cnvs-base-line-height-1050: 6.5rem;
200
- @cnvs-base-typescale-size-default: 0.125rem;
201
- @cnvs-base-typescale-size-heading: 0.25rem;
202
- @cnvs-base-typescale-size-title: 0.5rem;
203
- @cnvs-base-typescale-size-display: 1rem;
204
- @cnvs-base-typescale-height-default: 0.25rem;
205
- @cnvs-base-typescale-height-title: 0.5rem;
206
- @cnvs-base-typescale-height-display: 1rem;
207
200
  @cnvs-base-font-family-50: "Roboto"; // Default font-family
208
201
  @cnvs-base-font-family-100: "Roboto Mono";
209
202
  @cnvs-base-font-family-200: "Noto Sans";
@@ -215,13 +208,6 @@
215
208
  @cnvs-base-letter-spacing-100: 0.02rem;
216
209
  @cnvs-base-letter-spacing-150: 0.015rem;
217
210
  @cnvs-base-letter-spacing-200: 0.01rem;
218
- @cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
219
- @cnvs-base-shadow-200: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom navigation
220
- @cnvs-base-shadow-300: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08);
221
- @cnvs-base-shadow-400: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08);
222
- @cnvs-base-shadow-500: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08);
223
- @cnvs-base-shadow-600: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08);
224
- @cnvs-base-level: 2; // Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading.
225
211
  @cnvs-base-extended-palette-dragon-fruit-100: rgba(251,241,255,1);
226
212
  @cnvs-base-extended-palette-dragon-fruit-200: rgba(239,211,255,1);
227
213
  @cnvs-base-extended-palette-dragon-fruit-300: rgba(190,97,246,1);
package/less/brand/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  @cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  @cnvs-brand-common-alert-inner: @cnvs-base-palette-cantaloupe-400;
@@ -37,3 +37,4 @@
37
37
  @cnvs-brand-primary-lightest: @cnvs-base-palette-blueberry-100;
38
38
  @cnvs-brand-gradient-primary: linear-gradient(90deg, @cnvs-brand-primary-base 0%, @cnvs-brand-primary-dark 100%);
39
39
 
40
+
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 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.
@@ -129,7 +129,7 @@
129
129
  @cnvs-sys-color-bg-caution-default: @cnvs-base-palette-cantaloupe-400; // Default warning background
130
130
  @cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-apple-600; // Active success background
131
131
  @cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-apple-500; // Hover success background
132
- @cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-apple-100; // Default success background
132
+ @cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-apple-100; // Softer success background
133
133
  @cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-apple-400; // Disabled success background
134
134
  @cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blueberry-600; // Brand active background
135
135
  @cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blueberry-500; // Brand hover background
@@ -150,12 +150,6 @@
150
150
  @cnvs-sys-color-bg-transparent: transparent; // Transparent background
151
151
  @cnvs-sys-color-bg-default: @cnvs-base-palette-french-vanilla-100; // Main background color;
152
152
  @cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
153
- @cnvs-sys-depth-6: @cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
154
- @cnvs-sys-depth-5: @cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
155
- @cnvs-sys-depth-4: @cnvs-base-shadow-400; // Bottom Sheets
156
- @cnvs-sys-depth-3: @cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
157
- @cnvs-sys-depth-2: @cnvs-base-shadow-200; // Top navigation, Bottom Navigation
158
- @cnvs-sys-depth-1: @cnvs-base-shadow-100; // Standard card depth
159
153
  @cnvs-sys-color-shadow-1: rgba(31,38,46,@cnvs-base-opacity-200); // First shadow color
160
154
  @cnvs-sys-color-border-transparent: transparent; // Transparent
161
155
  @cnvs-sys-color-text-caution-strong: @cnvs-sys-color-text-stronger; // Strong warning text
@@ -171,6 +165,12 @@
171
165
  @cnvs-sys-font-size-title-small: @cnvs-base-font-size-400;
172
166
  @cnvs-sys-font-size-title-medium: @cnvs-base-font-size-500;
173
167
  @cnvs-sys-font-size-title-large: @cnvs-base-font-size-600;
168
+ @cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08); // Standard card depth
169
+ @cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom Navigation
170
+ @cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08); // Floating Action Buttons (FAB), Menus
171
+ @cnvs-sys-depth-4: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08); // Bottom Sheets
172
+ @cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
173
+ @cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
174
174
 
175
175
  .cnvs-sys-type-subtext-small {
176
176
  font-family: @cnvs-base-font-family-50;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "1.3.1",
3
+ "version": "2.0.1",
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",
package/scss/base/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  $cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  $cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -197,13 +197,6 @@ $cnvs-base-line-height-600: 4rem;
197
197
  $cnvs-base-line-height-750: 4.5rem;
198
198
  $cnvs-base-line-height-900: 5.5rem;
199
199
  $cnvs-base-line-height-1050: 6.5rem;
200
- $cnvs-base-typescale-size-default: 0.125rem;
201
- $cnvs-base-typescale-size-heading: 0.25rem;
202
- $cnvs-base-typescale-size-title: 0.5rem;
203
- $cnvs-base-typescale-size-display: 1rem;
204
- $cnvs-base-typescale-height-default: 0.25rem;
205
- $cnvs-base-typescale-height-title: 0.5rem;
206
- $cnvs-base-typescale-height-display: 1rem;
207
200
  $cnvs-base-font-family-50: "Roboto"; // Default font-family
208
201
  $cnvs-base-font-family-100: "Roboto Mono";
209
202
  $cnvs-base-font-family-200: "Noto Sans";
@@ -215,13 +208,6 @@ $cnvs-base-letter-spacing-50: 0.025rem;
215
208
  $cnvs-base-letter-spacing-100: 0.02rem;
216
209
  $cnvs-base-letter-spacing-150: 0.015rem;
217
210
  $cnvs-base-letter-spacing-200: 0.01rem;
218
- $cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
219
- $cnvs-base-shadow-200: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom navigation
220
- $cnvs-base-shadow-300: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08);
221
- $cnvs-base-shadow-400: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08);
222
- $cnvs-base-shadow-500: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08);
223
- $cnvs-base-shadow-600: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08);
224
- $cnvs-base-level: 2; // Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading.
225
211
  $cnvs-base-extended-palette-dragon-fruit-100: rgba(251,241,255,1);
226
212
  $cnvs-base-extended-palette-dragon-fruit-200: rgba(239,211,255,1);
227
213
  $cnvs-base-extended-palette-dragon-fruit-300: rgba(190,97,246,1);
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  $cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  $cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -197,13 +197,6 @@ $cnvs-base-line-height-600: 4rem;
197
197
  $cnvs-base-line-height-750: 4.5rem;
198
198
  $cnvs-base-line-height-900: 5.5rem;
199
199
  $cnvs-base-line-height-1050: 6.5rem;
200
- $cnvs-base-typescale-size-default: 0.125rem;
201
- $cnvs-base-typescale-size-heading: 0.25rem;
202
- $cnvs-base-typescale-size-title: 0.5rem;
203
- $cnvs-base-typescale-size-display: 1rem;
204
- $cnvs-base-typescale-height-default: 0.25rem;
205
- $cnvs-base-typescale-height-title: 0.5rem;
206
- $cnvs-base-typescale-height-display: 1rem;
207
200
  $cnvs-base-font-family-50: "Roboto"; // Default font-family
208
201
  $cnvs-base-font-family-100: "Roboto Mono";
209
202
  $cnvs-base-font-family-200: "Noto Sans";
@@ -215,13 +208,6 @@ $cnvs-base-letter-spacing-50: 0.025rem;
215
208
  $cnvs-base-letter-spacing-100: 0.02rem;
216
209
  $cnvs-base-letter-spacing-150: 0.015rem;
217
210
  $cnvs-base-letter-spacing-200: 0.01rem;
218
- $cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
219
- $cnvs-base-shadow-200: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom navigation
220
- $cnvs-base-shadow-300: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08);
221
- $cnvs-base-shadow-400: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08);
222
- $cnvs-base-shadow-500: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08);
223
- $cnvs-base-shadow-600: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08);
224
- $cnvs-base-level: 2; // Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading.
225
211
  $cnvs-base-extended-palette-dragon-fruit-100: rgba(251,241,255,1);
226
212
  $cnvs-base-extended-palette-dragon-fruit-200: rgba(239,211,255,1);
227
213
  $cnvs-base-extended-palette-dragon-fruit-300: rgba(190,97,246,1);
package/scss/brand/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  $cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-cantaloupe-400;
@@ -37,3 +37,4 @@ $cnvs-brand-primary-light: $cnvs-base-palette-blueberry-200;
37
37
  $cnvs-brand-primary-lightest: $cnvs-base-palette-blueberry-100;
38
38
  $cnvs-brand-gradient-primary: linear-gradient(90deg, $cnvs-brand-primary-base 0%, $cnvs-brand-primary-dark 100%);
39
39
 
40
+
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 GMT
4
4
 
5
5
  $cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-cantaloupe-400;
@@ -37,3 +37,4 @@ $cnvs-brand-primary-light: $cnvs-base-palette-blueberry-200;
37
37
  $cnvs-brand-primary-lightest: $cnvs-base-palette-blueberry-100;
38
38
  $cnvs-brand-gradient-primary: linear-gradient(90deg, $cnvs-brand-primary-base 0%, $cnvs-brand-primary-dark 100%);
39
39
 
40
+
package/scss/system/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 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.
@@ -129,7 +129,7 @@ $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-cantaloupe-100; // Disable
129
129
  $cnvs-sys-color-bg-caution-default: $cnvs-base-palette-cantaloupe-400; // Default warning background
130
130
  $cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-apple-600; // Active success background
131
131
  $cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-apple-500; // Hover success background
132
- $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-apple-100; // Default success background
132
+ $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-apple-100; // Softer success background
133
133
  $cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-apple-400; // Disabled success background
134
134
  $cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blueberry-600; // Brand active background
135
135
  $cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blueberry-500; // Brand hover background
@@ -150,12 +150,6 @@ $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip,
150
150
  $cnvs-sys-color-bg-transparent: transparent; // Transparent background
151
151
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
152
152
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
153
- $cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
154
- $cnvs-sys-depth-5: $cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
155
- $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
156
- $cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
157
- $cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
158
- $cnvs-sys-depth-1: $cnvs-base-shadow-100; // Standard card depth
159
153
  $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
160
154
  $cnvs-sys-color-border-transparent: transparent; // Transparent
161
155
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
@@ -171,6 +165,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
171
165
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
172
166
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
173
167
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
168
+ $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08); // Standard card depth
169
+ $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom Navigation
170
+ $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08); // Floating Action Buttons (FAB), Menus
171
+ $cnvs-sys-depth-4: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08); // Bottom Sheets
172
+ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
173
+ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
174
174
 
175
175
  .cnvs-sys-type-subtext-small {
176
176
  font-family: $cnvs-base-font-family-50;
package/scss/system/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Apr 2024 22:39:08 GMT
3
+ // Generated on Wed, 03 Jul 2024 19:09:19 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.
@@ -129,7 +129,7 @@ $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-cantaloupe-100; // Disable
129
129
  $cnvs-sys-color-bg-caution-default: $cnvs-base-palette-cantaloupe-400; // Default warning background
130
130
  $cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-apple-600; // Active success background
131
131
  $cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-apple-500; // Hover success background
132
- $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-apple-100; // Default success background
132
+ $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-apple-100; // Softer success background
133
133
  $cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-apple-400; // Disabled success background
134
134
  $cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blueberry-600; // Brand active background
135
135
  $cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blueberry-500; // Brand hover background
@@ -150,12 +150,6 @@ $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip,
150
150
  $cnvs-sys-color-bg-transparent: transparent; // Transparent background
151
151
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
152
152
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
153
- $cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
154
- $cnvs-sys-depth-5: $cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
155
- $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
156
- $cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
157
- $cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
158
- $cnvs-sys-depth-1: $cnvs-base-shadow-100; // Standard card depth
159
153
  $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
160
154
  $cnvs-sys-color-border-transparent: transparent; // Transparent
161
155
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
@@ -171,6 +165,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
171
165
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
172
166
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
173
167
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
168
+ $cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08); // Standard card depth
169
+ $cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); // Top navigation, Bottom Navigation
170
+ $cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08); // Floating Action Buttons (FAB), Menus
171
+ $cnvs-sys-depth-4: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08); // Bottom Sheets
172
+ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
173
+ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
174
174
 
175
175
  .cnvs-sys-type-subtext-small {
176
176
  font-family: $cnvs-base-font-family-50;