@workday/canvas-tokens-web 2.0.1 → 2.0.2

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 -1
  2. package/css/brand/_variables.css +1 -1
  3. package/css/system/_variables.css +54 -54
  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 +1 -1
  9. package/dist/common-js/index.js +1 -1
  10. package/dist/common-js/system/index.d.ts +49 -49
  11. package/dist/common-js/system/index.js +49 -49
  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 +1 -1
  17. package/dist/es6/index.js +1 -1
  18. package/dist/es6/system/index.d.ts +49 -49
  19. package/dist/es6/system/index.js +49 -49
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +54 -54
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +1 -1
  25. package/scss/base/_variables.scss +1 -1
  26. package/scss/brand/_variables.sass +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +54 -54
  29. package/scss/system/_variables.scss +54 -54
package/scss/system/_variables.sass CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 03 Jul 2024 19:09:19 GMT
3
+ // Generated on Mon, 07 Oct 2024 19:58:20 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
- $cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
9
+ $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
10
  $cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
11
11
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
12
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
@@ -46,10 +46,10 @@ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
46
  $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
47
  $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
48
  $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
- $cnvs-sys-breakpoints-xl: calc($cnvs-base-unit * 360); // Used for extra large screens, such as wide monitors and TVs.
50
- $cnvs-sys-breakpoints-l: calc($cnvs-base-unit * 256); // Large screens, such as desktops.
51
- $cnvs-sys-breakpoints-m: calc($cnvs-base-unit * 192); // Medium screens, such as laptops.
52
- $cnvs-sys-breakpoints-s: calc($cnvs-base-unit * 80); // The `min-width` for mobile devices, such as phones and tablets.
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.
53
53
  $cnvs-sys-color-static-black: $cnvs-base-palette-black-pepper-600; // Just black
54
54
  $cnvs-sys-color-static-white: $cnvs-base-palette-french-vanilla-100; // Just white
55
55
  $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-licorice-500; // Strongerer gray
@@ -173,89 +173,89 @@ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem
173
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
- font-family: $cnvs-base-font-family-50;
177
- font-weight: $cnvs-base-font-weight-400;
178
- line-height: $cnvs-base-line-height-50;
179
- font-size: $cnvs-base-font-size-25;
176
+ font-family: $cnvs-sys-font-family-default;
177
+ font-weight: $cnvs-sys-font-weight-normal;
178
+ line-height: $cnvs-sys-line-height-subtext-small;
179
+ font-size: $cnvs-sys-font-size-subtext-small;
180
180
  letter-spacing: $cnvs-base-letter-spacing-50;
181
181
  }
182
182
 
183
183
  .cnvs-sys-type-subtext-medium {
184
- font-family: $cnvs-base-font-family-50;
185
- font-weight: $cnvs-base-font-weight-400;
186
- line-height: $cnvs-base-line-height-50;
187
- font-size: $cnvs-base-font-size-50;
184
+ font-family: $cnvs-sys-font-family-default;
185
+ font-weight: $cnvs-sys-font-weight-normal;
186
+ line-height: $cnvs-sys-line-height-subtext-medium;
187
+ font-size: $cnvs-sys-font-size-subtext-medium;
188
188
  letter-spacing: $cnvs-base-letter-spacing-100;
189
189
  }
190
190
 
191
191
  .cnvs-sys-type-subtext-large {
192
- font-family: $cnvs-base-font-family-50;
193
- font-weight: $cnvs-base-font-weight-400;
194
- line-height: $cnvs-base-line-height-100;
195
- font-size: $cnvs-base-font-size-75;
192
+ font-family: $cnvs-sys-font-family-default;
193
+ font-weight: $cnvs-sys-font-weight-normal;
194
+ line-height: $cnvs-sys-line-height-subtext-large;
195
+ font-size: $cnvs-sys-font-size-subtext-large;
196
196
  letter-spacing: $cnvs-base-letter-spacing-150;
197
197
  }
198
198
 
199
199
  .cnvs-sys-type-body-small {
200
- font-family: $cnvs-base-font-family-50;
201
- font-weight: $cnvs-base-font-weight-400;
202
- line-height: $cnvs-base-line-height-150;
203
- font-size: $cnvs-base-font-size-100;
200
+ font-family: $cnvs-sys-font-family-default;
201
+ font-weight: $cnvs-sys-font-weight-normal;
202
+ line-height: $cnvs-sys-line-height-body-small;
203
+ font-size: $cnvs-sys-font-size-body-small;
204
204
  letter-spacing: $cnvs-base-letter-spacing-200;
205
205
  }
206
206
 
207
207
  .cnvs-sys-type-body-medium {
208
- font-family: $cnvs-base-font-family-50;
209
- font-weight: $cnvs-base-font-weight-400;
210
- line-height: $cnvs-base-line-height-200;
211
- font-size: $cnvs-base-font-size-125;
208
+ font-family: $cnvs-sys-font-family-default;
209
+ font-weight: $cnvs-sys-font-weight-normal;
210
+ line-height: $cnvs-sys-line-height-body-medium;
211
+ font-size: $cnvs-sys-font-size-body-medium;
212
212
  }
213
213
 
214
214
  .cnvs-sys-type-body-large {
215
- font-family: $cnvs-base-font-family-50;
216
- font-weight: $cnvs-base-font-weight-400;
217
- line-height: $cnvs-base-line-height-200;
218
- font-size: $cnvs-base-font-size-150;
215
+ font-family: $cnvs-sys-font-family-default;
216
+ font-weight: $cnvs-sys-font-weight-normal;
217
+ line-height: $cnvs-sys-line-height-body-large;
218
+ font-size: $cnvs-sys-font-size-body-large;
219
219
  }
220
220
 
221
221
  .cnvs-sys-type-heading-small {
222
- font-family: $cnvs-base-font-family-50;
223
- font-weight: $cnvs-base-font-weight-700;
224
- line-height: $cnvs-base-line-height-250;
225
- font-size: $cnvs-base-font-size-200;
222
+ font-family: $cnvs-sys-font-family-default;
223
+ font-weight: $cnvs-sys-font-weight-bold;
224
+ line-height: $cnvs-sys-line-height-heading-small;
225
+ font-size: $cnvs-sys-font-size-heading-small;
226
226
  }
227
227
 
228
228
  .cnvs-sys-type-heading-medium {
229
- font-family: $cnvs-base-font-family-50;
230
- font-weight: $cnvs-base-font-weight-700;
231
- line-height: $cnvs-base-line-height-300;
232
- font-size: $cnvs-base-font-size-250;
229
+ font-family: $cnvs-sys-font-family-default;
230
+ font-weight: $cnvs-sys-font-weight-bold;
231
+ line-height: $cnvs-sys-line-height-heading-medium;
232
+ font-size: $cnvs-sys-font-size-heading-medium;
233
233
  }
234
234
 
235
235
  .cnvs-sys-type-heading-large {
236
- font-family: $cnvs-base-font-family-50;
237
- font-weight: $cnvs-base-font-weight-700;
238
- line-height: $cnvs-base-line-height-350;
239
- font-size: $cnvs-base-font-size-300;
236
+ font-family: $cnvs-sys-font-family-default;
237
+ font-weight: $cnvs-sys-font-weight-bold;
238
+ line-height: $cnvs-sys-line-height-heading-large;
239
+ font-size: $cnvs-sys-font-size-heading-large;
240
240
  }
241
241
 
242
242
  .cnvs-sys-type-title-small {
243
- font-family: $cnvs-base-font-family-50;
244
- font-weight: $cnvs-base-font-weight-700;
245
- line-height: $cnvs-base-line-height-400;
246
- font-size: $cnvs-base-font-size-400;
243
+ font-family: $cnvs-sys-font-family-default;
244
+ font-weight: $cnvs-sys-font-weight-bold;
245
+ line-height: $cnvs-sys-line-height-title-small;
246
+ font-size: $cnvs-sys-font-size-title-small;
247
247
  }
248
248
 
249
249
  .cnvs-sys-type-title-medium {
250
- font-family: $cnvs-base-font-family-50;
251
- font-weight: $cnvs-base-font-weight-700;
252
- line-height: $cnvs-base-line-height-500;
253
- font-size: $cnvs-base-font-size-500;
250
+ font-family: $cnvs-sys-font-family-default;
251
+ font-weight: $cnvs-sys-font-weight-bold;
252
+ line-height: $cnvs-sys-line-height-title-medium;
253
+ font-size: $cnvs-sys-font-size-title-medium;
254
254
  }
255
255
 
256
256
  .cnvs-sys-type-title-large {
257
- font-family: $cnvs-base-font-family-50;
258
- font-weight: $cnvs-base-font-weight-700;
259
- line-height: $cnvs-base-line-height-600;
260
- font-size: $cnvs-base-font-size-600;
257
+ font-family: $cnvs-sys-font-family-default;
258
+ font-weight: $cnvs-sys-font-weight-bold;
259
+ line-height: $cnvs-sys-line-height-title-large;
260
+ font-size: $cnvs-sys-font-size-title-large;
261
261
  }
package/scss/system/_variables.scss CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 03 Jul 2024 19:09:19 GMT
3
+ // Generated on Mon, 07 Oct 2024 19:58:20 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
- $cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
9
+ $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
10
  $cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
11
11
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
12
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
@@ -46,10 +46,10 @@ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
46
  $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
47
  $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
48
  $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
- $cnvs-sys-breakpoints-xl: calc($cnvs-base-unit * 360); // Used for extra large screens, such as wide monitors and TVs.
50
- $cnvs-sys-breakpoints-l: calc($cnvs-base-unit * 256); // Large screens, such as desktops.
51
- $cnvs-sys-breakpoints-m: calc($cnvs-base-unit * 192); // Medium screens, such as laptops.
52
- $cnvs-sys-breakpoints-s: calc($cnvs-base-unit * 80); // The `min-width` for mobile devices, such as phones and tablets.
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.
53
53
  $cnvs-sys-color-static-black: $cnvs-base-palette-black-pepper-600; // Just black
54
54
  $cnvs-sys-color-static-white: $cnvs-base-palette-french-vanilla-100; // Just white
55
55
  $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-licorice-500; // Strongerer gray
@@ -173,89 +173,89 @@ $cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem
173
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
- font-family: $cnvs-base-font-family-50;
177
- font-weight: $cnvs-base-font-weight-400;
178
- line-height: $cnvs-base-line-height-50;
179
- font-size: $cnvs-base-font-size-25;
176
+ font-family: $cnvs-sys-font-family-default;
177
+ font-weight: $cnvs-sys-font-weight-normal;
178
+ line-height: $cnvs-sys-line-height-subtext-small;
179
+ font-size: $cnvs-sys-font-size-subtext-small;
180
180
  letter-spacing: $cnvs-base-letter-spacing-50;
181
181
  }
182
182
 
183
183
  .cnvs-sys-type-subtext-medium {
184
- font-family: $cnvs-base-font-family-50;
185
- font-weight: $cnvs-base-font-weight-400;
186
- line-height: $cnvs-base-line-height-50;
187
- font-size: $cnvs-base-font-size-50;
184
+ font-family: $cnvs-sys-font-family-default;
185
+ font-weight: $cnvs-sys-font-weight-normal;
186
+ line-height: $cnvs-sys-line-height-subtext-medium;
187
+ font-size: $cnvs-sys-font-size-subtext-medium;
188
188
  letter-spacing: $cnvs-base-letter-spacing-100;
189
189
  }
190
190
 
191
191
  .cnvs-sys-type-subtext-large {
192
- font-family: $cnvs-base-font-family-50;
193
- font-weight: $cnvs-base-font-weight-400;
194
- line-height: $cnvs-base-line-height-100;
195
- font-size: $cnvs-base-font-size-75;
192
+ font-family: $cnvs-sys-font-family-default;
193
+ font-weight: $cnvs-sys-font-weight-normal;
194
+ line-height: $cnvs-sys-line-height-subtext-large;
195
+ font-size: $cnvs-sys-font-size-subtext-large;
196
196
  letter-spacing: $cnvs-base-letter-spacing-150;
197
197
  }
198
198
 
199
199
  .cnvs-sys-type-body-small {
200
- font-family: $cnvs-base-font-family-50;
201
- font-weight: $cnvs-base-font-weight-400;
202
- line-height: $cnvs-base-line-height-150;
203
- font-size: $cnvs-base-font-size-100;
200
+ font-family: $cnvs-sys-font-family-default;
201
+ font-weight: $cnvs-sys-font-weight-normal;
202
+ line-height: $cnvs-sys-line-height-body-small;
203
+ font-size: $cnvs-sys-font-size-body-small;
204
204
  letter-spacing: $cnvs-base-letter-spacing-200;
205
205
  }
206
206
 
207
207
  .cnvs-sys-type-body-medium {
208
- font-family: $cnvs-base-font-family-50;
209
- font-weight: $cnvs-base-font-weight-400;
210
- line-height: $cnvs-base-line-height-200;
211
- font-size: $cnvs-base-font-size-125;
208
+ font-family: $cnvs-sys-font-family-default;
209
+ font-weight: $cnvs-sys-font-weight-normal;
210
+ line-height: $cnvs-sys-line-height-body-medium;
211
+ font-size: $cnvs-sys-font-size-body-medium;
212
212
  }
213
213
 
214
214
  .cnvs-sys-type-body-large {
215
- font-family: $cnvs-base-font-family-50;
216
- font-weight: $cnvs-base-font-weight-400;
217
- line-height: $cnvs-base-line-height-200;
218
- font-size: $cnvs-base-font-size-150;
215
+ font-family: $cnvs-sys-font-family-default;
216
+ font-weight: $cnvs-sys-font-weight-normal;
217
+ line-height: $cnvs-sys-line-height-body-large;
218
+ font-size: $cnvs-sys-font-size-body-large;
219
219
  }
220
220
 
221
221
  .cnvs-sys-type-heading-small {
222
- font-family: $cnvs-base-font-family-50;
223
- font-weight: $cnvs-base-font-weight-700;
224
- line-height: $cnvs-base-line-height-250;
225
- font-size: $cnvs-base-font-size-200;
222
+ font-family: $cnvs-sys-font-family-default;
223
+ font-weight: $cnvs-sys-font-weight-bold;
224
+ line-height: $cnvs-sys-line-height-heading-small;
225
+ font-size: $cnvs-sys-font-size-heading-small;
226
226
  }
227
227
 
228
228
  .cnvs-sys-type-heading-medium {
229
- font-family: $cnvs-base-font-family-50;
230
- font-weight: $cnvs-base-font-weight-700;
231
- line-height: $cnvs-base-line-height-300;
232
- font-size: $cnvs-base-font-size-250;
229
+ font-family: $cnvs-sys-font-family-default;
230
+ font-weight: $cnvs-sys-font-weight-bold;
231
+ line-height: $cnvs-sys-line-height-heading-medium;
232
+ font-size: $cnvs-sys-font-size-heading-medium;
233
233
  }
234
234
 
235
235
  .cnvs-sys-type-heading-large {
236
- font-family: $cnvs-base-font-family-50;
237
- font-weight: $cnvs-base-font-weight-700;
238
- line-height: $cnvs-base-line-height-350;
239
- font-size: $cnvs-base-font-size-300;
236
+ font-family: $cnvs-sys-font-family-default;
237
+ font-weight: $cnvs-sys-font-weight-bold;
238
+ line-height: $cnvs-sys-line-height-heading-large;
239
+ font-size: $cnvs-sys-font-size-heading-large;
240
240
  }
241
241
 
242
242
  .cnvs-sys-type-title-small {
243
- font-family: $cnvs-base-font-family-50;
244
- font-weight: $cnvs-base-font-weight-700;
245
- line-height: $cnvs-base-line-height-400;
246
- font-size: $cnvs-base-font-size-400;
243
+ font-family: $cnvs-sys-font-family-default;
244
+ font-weight: $cnvs-sys-font-weight-bold;
245
+ line-height: $cnvs-sys-line-height-title-small;
246
+ font-size: $cnvs-sys-font-size-title-small;
247
247
  }
248
248
 
249
249
  .cnvs-sys-type-title-medium {
250
- font-family: $cnvs-base-font-family-50;
251
- font-weight: $cnvs-base-font-weight-700;
252
- line-height: $cnvs-base-line-height-500;
253
- font-size: $cnvs-base-font-size-500;
250
+ font-family: $cnvs-sys-font-family-default;
251
+ font-weight: $cnvs-sys-font-weight-bold;
252
+ line-height: $cnvs-sys-line-height-title-medium;
253
+ font-size: $cnvs-sys-font-size-title-medium;
254
254
  }
255
255
 
256
256
  .cnvs-sys-type-title-large {
257
- font-family: $cnvs-base-font-family-50;
258
- font-weight: $cnvs-base-font-weight-700;
259
- line-height: $cnvs-base-line-height-600;
260
- font-size: $cnvs-base-font-size-600;
257
+ font-family: $cnvs-sys-font-family-default;
258
+ font-weight: $cnvs-sys-font-weight-bold;
259
+ line-height: $cnvs-sys-line-height-title-large;
260
+ font-size: $cnvs-sys-font-size-title-large;
261
261
  }