@workday/canvas-kit-css 13.0.0-alpha.996-next.0 → 13.0.0-alpha.998-next.0

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 (11) hide show
  1. package/badge.css +2 -2
  2. package/button.css +27 -27
  3. package/common.css +6 -0
  4. package/loading-dots.css +2 -2
  5. package/menu.css +8 -8
  6. package/modal.css +2 -2
  7. package/package.json +2 -2
  8. package/popup.css +6 -6
  9. package/table.css +4 -4
  10. package/text-input.css +4 -4
  11. package/text.css +52 -52
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x8953f {
1
+ @keyframes animation-ojw63f {
2
2
  from {
3
3
  transform: scale(0.85);
4
4
  }
@@ -12,7 +12,7 @@
12
12
  .cnvs-count-badge {
13
13
  box-sizing: border-box;
14
14
  align-items: center;
15
- animation: animation-x8953f 0.2s ease;
15
+ animation: animation-ojw63f 0.2s ease;
16
16
  background: var(--cnvs-sys-color-static-red-default);
17
17
  border-radius: var(--cnvs-sys-shape-round);
18
18
  color: var(--cnvs-sys-color-text-inverse);
package/button.css CHANGED
@@ -69,10 +69,10 @@
69
69
 
70
70
 
71
71
  .cnvs-button.size-large {
72
- font-family: var(--cnvs-base-font-family-50);
72
+ font-family: var(--cnvs-sys-font-family-default);
73
73
  font-weight: var(--cnvs-sys-font-weight-bold);
74
- line-height: var(--cnvs-base-line-height-150);
75
- font-size: var(--cnvs-base-font-size-100);
74
+ line-height: var(--cnvs-sys-line-height-body-small);
75
+ font-size: var(--cnvs-sys-font-size-body-small);
76
76
  letter-spacing: var(--cnvs-base-letter-spacing-200);
77
77
  height: 3rem;
78
78
  padding-inline: var(--cnvs-sys-space-x8);
@@ -81,10 +81,10 @@
81
81
 
82
82
 
83
83
  .cnvs-button.size-medium {
84
- font-family: var(--cnvs-base-font-family-50);
84
+ font-family: var(--cnvs-sys-font-family-default);
85
85
  font-weight: var(--cnvs-sys-font-weight-bold);
86
- line-height: var(--cnvs-base-line-height-100);
87
- font-size: var(--cnvs-base-font-size-75);
86
+ line-height: var(--cnvs-sys-line-height-subtext-large);
87
+ font-size: var(--cnvs-sys-font-size-subtext-large);
88
88
  letter-spacing: var(--cnvs-base-letter-spacing-150);
89
89
  min-width: 6rem;
90
90
  padding-inline: var(--cnvs-sys-space-x6);
@@ -93,10 +93,10 @@
93
93
 
94
94
 
95
95
  .cnvs-button.size-small {
96
- font-family: var(--cnvs-base-font-family-50);
96
+ font-family: var(--cnvs-sys-font-family-default);
97
97
  font-weight: var(--cnvs-sys-font-weight-bold);
98
- line-height: var(--cnvs-base-line-height-100);
99
- font-size: var(--cnvs-base-font-size-75);
98
+ line-height: var(--cnvs-sys-line-height-subtext-large);
99
+ font-size: var(--cnvs-sys-font-size-subtext-large);
100
100
  letter-spacing: var(--cnvs-base-letter-spacing-150);
101
101
  height: var(--cnvs-sys-space-x8);
102
102
  min-width: var(--cnvs-sys-space-x20);
@@ -106,10 +106,10 @@
106
106
 
107
107
 
108
108
  .cnvs-button.size-extra-small {
109
- font-family: var(--cnvs-base-font-family-50);
109
+ font-family: var(--cnvs-sys-font-family-default);
110
110
  font-weight: var(--cnvs-sys-font-weight-bold);
111
- line-height: var(--cnvs-base-line-height-50);
112
- font-size: var(--cnvs-base-font-size-50);
111
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
112
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
113
113
  letter-spacing: var(--cnvs-base-letter-spacing-100);
114
114
  height: var(--cnvs-sys-space-x6);
115
115
  min-width: auto;
@@ -436,37 +436,37 @@
436
436
 
437
437
  .cnvs-primary-button {
438
438
  box-sizing: border-box;
439
- --cnvs-button-background: var(--cnvs-brand-primary-base);
439
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
440
440
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
441
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
442
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-accent));
441
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
442
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
443
443
  }
444
444
 
445
445
  .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
446
- --cnvs-button-background: var(--cnvs-brand-primary-base);
447
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
446
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
447
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
448
448
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
449
449
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
450
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-accent));
450
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
451
451
  }
452
452
 
453
453
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
454
- --cnvs-button-background: var(--cnvs-brand-primary-dark);
455
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
456
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-accent));
454
+ --cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
455
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
456
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
457
457
  }
458
458
 
459
459
  .cnvs-primary-button:active, .cnvs-primary-button.active {
460
- --cnvs-button-background: var(--cnvs-brand-primary-darkest);
461
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
462
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-accent));
460
+ --cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
461
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
462
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
463
463
  }
464
464
 
465
465
  .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
466
- --cnvs-button-background: var(--cnvs-brand-primary-base);
467
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
466
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
467
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
468
468
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
469
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-primary-accent));
469
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
470
470
  }
471
471
 
472
472
 
package/common.css CHANGED
@@ -46,6 +46,12 @@
46
46
  --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
47
47
  --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
48
48
  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
49
+ --cnvs-brand-action-accent: var(--cnvs-base-palette-french-vanilla-100);
50
+ --cnvs-brand-action-darkest: var(--cnvs-base-palette-blueberry-600);
51
+ --cnvs-brand-action-dark: var(--cnvs-base-palette-blueberry-500);
52
+ --cnvs-brand-action-base: var(--cnvs-base-palette-blueberry-400);
53
+ --cnvs-brand-action-light: var(--cnvs-base-palette-blueberry-200);
54
+ --cnvs-brand-action-lightest: var(--cnvs-base-palette-blueberry-100);
49
55
  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
50
56
  }
51
57
 
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x89550 {
1
+ @keyframes animation-ojw650 {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -25,7 +25,7 @@
25
25
  border-radius: var(--cnvs-sys-shape-round);
26
26
  transform: scale(0);
27
27
  display: inline-block;
28
- animation-name: animation-x89550;
28
+ animation-name: animation-ojw650;
29
29
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
30
30
  animation-iteration-count: infinite;
31
31
  animation-timing-function: ease-in-out;
package/menu.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .cnvs-menu-item {
2
2
  box-sizing: border-box;
3
- font-family: var(--cnvs-base-font-family-50);
4
- font-weight: var(--cnvs-base-font-weight-400);
5
- line-height: var(--cnvs-base-line-height-100);
6
- font-size: var(--cnvs-base-font-size-75);
3
+ font-family: var(--cnvs-sys-font-family-default);
4
+ font-weight: var(--cnvs-sys-font-weight-normal);
5
+ line-height: var(--cnvs-sys-line-height-subtext-large);
6
+ font-size: var(--cnvs-sys-font-size-subtext-large);
7
7
  letter-spacing: var(--cnvs-base-letter-spacing-150);
8
8
  display: flex;
9
9
  align-items: center;
@@ -70,10 +70,10 @@
70
70
  --cnvs-menu-card-transform-origin-vertical: top;
71
71
  --cnvs-menu-card-transform-origin-horizontal: left;
72
72
  box-sizing: border-box;
73
- font-family: var(--cnvs-base-font-family-50);
74
- font-weight: var(--cnvs-base-font-weight-400);
75
- line-height: var(--cnvs-base-line-height-100);
76
- font-size: var(--cnvs-base-font-size-75);
73
+ font-family: var(--cnvs-sys-font-family-default);
74
+ font-weight: var(--cnvs-sys-font-weight-normal);
75
+ line-height: var(--cnvs-sys-line-height-subtext-large);
76
+ font-size: var(--cnvs-sys-font-size-subtext-large);
77
77
  letter-spacing: var(--cnvs-base-letter-spacing-150);
78
78
  color: var(--cnvs-base-palette-black-pepper-300);
79
79
  position: relative;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x89552 {
1
+ @keyframes animation-ojw652 {
2
2
  0% {
3
3
  background: none;
4
4
  }
@@ -18,7 +18,7 @@
18
18
  height: 100vh;
19
19
  background: var(--cnvs-sys-color-bg-overlay);
20
20
  animation-duration: 0.3s;
21
- animation-name: animation-x89552;
21
+ animation-name: animation-ojw652;
22
22
  }
23
23
 
24
24
  .wd-no-animation .cnvs-modal-overlay-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "13.0.0-alpha.996-next.0",
3
+ "version": "13.0.0-alpha.998-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "340f917ae60082f246c1ac4201408bf32fa4741f"
28
+ "gitHead": "d95041596e2b948c0a371f4c763746a98c58b2da"
29
29
  }
package/popup.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x895x {
1
+ @keyframes animation-ojw6x {
2
2
  0% {
3
3
  opacity: 1;
4
4
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -13,10 +13,10 @@
13
13
 
14
14
  .cnvs-popup-card {
15
15
  box-sizing: border-box;
16
- font-family: var(--cnvs-base-font-family-50);
17
- font-weight: var(--cnvs-base-font-weight-400);
18
- line-height: var(--cnvs-base-line-height-100);
19
- font-size: var(--cnvs-base-font-size-75);
16
+ font-family: var(--cnvs-sys-font-family-default);
17
+ font-weight: var(--cnvs-sys-font-weight-normal);
18
+ line-height: var(--cnvs-sys-line-height-subtext-large);
19
+ font-size: var(--cnvs-sys-font-size-subtext-large);
20
20
  letter-spacing: var(--cnvs-base-letter-spacing-150);
21
21
  display: flex;
22
22
  position: relative;
@@ -27,7 +27,7 @@
27
27
  padding: var(--cnvs-sys-space-x6);
28
28
  max-height: var(--cnvs-popup-card-max-height);
29
29
  overflow-y: auto;
30
- animation-name: animation-x895x;
30
+ animation-name: animation-ojw6x;
31
31
  animation-duration: 150ms;
32
32
  animation-timing-function: ease-out;
33
33
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/table.css CHANGED
@@ -88,10 +88,10 @@
88
88
 
89
89
  .cnvs-table {
90
90
  box-sizing: border-box;
91
- font-family: var(--cnvs-base-font-family-50);
92
- font-weight: var(--cnvs-base-font-weight-400);
93
- line-height: var(--cnvs-base-line-height-100);
94
- font-size: var(--cnvs-base-font-size-75);
91
+ font-family: var(--cnvs-sys-font-family-default);
92
+ font-weight: var(--cnvs-sys-font-weight-normal);
93
+ line-height: var(--cnvs-sys-line-height-subtext-large);
94
+ font-size: var(--cnvs-sys-font-size-subtext-large);
95
95
  letter-spacing: var(--cnvs-base-letter-spacing-150);
96
96
  display: grid;
97
97
  border: 0.0625rem solid var(--cnvs-sys-color-border-container);
package/text-input.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .cnvs-text-input {
2
2
  box-sizing: border-box;
3
- font-family: var(--cnvs-base-font-family-50);
4
- font-weight: var(--cnvs-base-font-weight-400);
5
- line-height: var(--cnvs-base-line-height-100);
6
- font-size: var(--cnvs-base-font-size-75);
3
+ font-family: var(--cnvs-sys-font-family-default);
4
+ font-weight: var(--cnvs-sys-font-weight-normal);
5
+ line-height: var(--cnvs-sys-line-height-subtext-large);
6
+ font-size: var(--cnvs-sys-font-size-subtext-large);
7
7
  letter-spacing: var(--cnvs-base-letter-spacing-150);
8
8
  display: block;
9
9
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
package/text.css CHANGED
@@ -4,112 +4,112 @@
4
4
 
5
5
 
6
6
  .cnvs-text.type-level-title-large {
7
- font-family: var(--cnvs-base-font-family-50);
8
- font-weight: var(--cnvs-base-font-weight-700);
9
- line-height: var(--cnvs-base-line-height-600);
10
- font-size: var(--cnvs-base-font-size-600);
7
+ font-family: var(--cnvs-sys-font-family-default);
8
+ font-weight: var(--cnvs-sys-font-weight-bold);
9
+ line-height: var(--cnvs-sys-line-height-title-large);
10
+ font-size: var(--cnvs-sys-font-size-title-large);
11
11
  color: var(--cnvs-sys-color-text-strong);
12
12
  }
13
13
 
14
14
 
15
15
  .cnvs-text.type-level-title-medium {
16
- font-family: var(--cnvs-base-font-family-50);
17
- font-weight: var(--cnvs-base-font-weight-700);
18
- line-height: var(--cnvs-base-line-height-500);
19
- font-size: var(--cnvs-base-font-size-500);
16
+ font-family: var(--cnvs-sys-font-family-default);
17
+ font-weight: var(--cnvs-sys-font-weight-bold);
18
+ line-height: var(--cnvs-sys-line-height-title-medium);
19
+ font-size: var(--cnvs-sys-font-size-title-medium);
20
20
  color: var(--cnvs-sys-color-text-strong);
21
21
  }
22
22
 
23
23
 
24
24
  .cnvs-text.type-level-title-small {
25
- font-family: var(--cnvs-base-font-family-50);
26
- font-weight: var(--cnvs-base-font-weight-700);
27
- line-height: var(--cnvs-base-line-height-400);
28
- font-size: var(--cnvs-base-font-size-400);
25
+ font-family: var(--cnvs-sys-font-family-default);
26
+ font-weight: var(--cnvs-sys-font-weight-bold);
27
+ line-height: var(--cnvs-sys-line-height-title-small);
28
+ font-size: var(--cnvs-sys-font-size-title-small);
29
29
  color: var(--cnvs-sys-color-text-strong);
30
30
  }
31
31
 
32
32
 
33
33
  .cnvs-text.type-level-heading-large {
34
- font-family: var(--cnvs-base-font-family-50);
35
- font-weight: var(--cnvs-base-font-weight-700);
36
- line-height: var(--cnvs-base-line-height-350);
37
- font-size: var(--cnvs-base-font-size-300);
34
+ font-family: var(--cnvs-sys-font-family-default);
35
+ font-weight: var(--cnvs-sys-font-weight-bold);
36
+ line-height: var(--cnvs-sys-line-height-heading-large);
37
+ font-size: var(--cnvs-sys-font-size-heading-large);
38
38
  color: var(--cnvs-sys-color-text-strong);
39
39
  }
40
40
 
41
41
 
42
42
  .cnvs-text.type-level-heading-medium {
43
- font-family: var(--cnvs-base-font-family-50);
44
- font-weight: var(--cnvs-base-font-weight-700);
45
- line-height: var(--cnvs-base-line-height-300);
46
- font-size: var(--cnvs-base-font-size-250);
43
+ font-family: var(--cnvs-sys-font-family-default);
44
+ font-weight: var(--cnvs-sys-font-weight-bold);
45
+ line-height: var(--cnvs-sys-line-height-heading-medium);
46
+ font-size: var(--cnvs-sys-font-size-heading-medium);
47
47
  color: var(--cnvs-sys-color-text-strong);
48
48
  }
49
49
 
50
50
 
51
51
  .cnvs-text.type-level-heading-small {
52
- font-family: var(--cnvs-base-font-family-50);
53
- font-weight: var(--cnvs-base-font-weight-700);
54
- line-height: var(--cnvs-base-line-height-250);
55
- font-size: var(--cnvs-base-font-size-200);
52
+ font-family: var(--cnvs-sys-font-family-default);
53
+ font-weight: var(--cnvs-sys-font-weight-bold);
54
+ line-height: var(--cnvs-sys-line-height-heading-small);
55
+ font-size: var(--cnvs-sys-font-size-heading-small);
56
56
  color: var(--cnvs-sys-color-text-strong);
57
57
  }
58
58
 
59
59
 
60
60
  .cnvs-text.type-level-body-large {
61
- font-family: var(--cnvs-base-font-family-50);
62
- font-weight: var(--cnvs-base-font-weight-400);
63
- line-height: var(--cnvs-base-line-height-200);
64
- font-size: var(--cnvs-base-font-size-150);
61
+ font-family: var(--cnvs-sys-font-family-default);
62
+ font-weight: var(--cnvs-sys-font-weight-normal);
63
+ line-height: var(--cnvs-sys-line-height-body-large);
64
+ font-size: var(--cnvs-sys-font-size-body-large);
65
65
  color: var(--cnvs-sys-color-text-default);
66
66
  }
67
67
 
68
68
 
69
69
  .cnvs-text.type-level-body-medium {
70
- font-family: var(--cnvs-base-font-family-50);
71
- font-weight: var(--cnvs-base-font-weight-400);
72
- line-height: var(--cnvs-base-line-height-200);
73
- font-size: var(--cnvs-base-font-size-125);
70
+ font-family: var(--cnvs-sys-font-family-default);
71
+ font-weight: var(--cnvs-sys-font-weight-normal);
72
+ line-height: var(--cnvs-sys-line-height-body-medium);
73
+ font-size: var(--cnvs-sys-font-size-body-medium);
74
74
  color: var(--cnvs-sys-color-text-default);
75
75
  }
76
76
 
77
77
 
78
78
  .cnvs-text.type-level-body-small {
79
- font-family: var(--cnvs-base-font-family-50);
80
- font-weight: var(--cnvs-base-font-weight-400);
81
- line-height: var(--cnvs-base-line-height-150);
82
- font-size: var(--cnvs-base-font-size-100);
79
+ font-family: var(--cnvs-sys-font-family-default);
80
+ font-weight: var(--cnvs-sys-font-weight-normal);
81
+ line-height: var(--cnvs-sys-line-height-body-small);
82
+ font-size: var(--cnvs-sys-font-size-body-small);
83
83
  letter-spacing: var(--cnvs-base-letter-spacing-200);
84
84
  color: var(--cnvs-sys-color-text-default);
85
85
  }
86
86
 
87
87
 
88
88
  .cnvs-text.type-level-subtext-large {
89
- font-family: var(--cnvs-base-font-family-50);
90
- font-weight: var(--cnvs-base-font-weight-400);
91
- line-height: var(--cnvs-base-line-height-100);
92
- font-size: var(--cnvs-base-font-size-75);
89
+ font-family: var(--cnvs-sys-font-family-default);
90
+ font-weight: var(--cnvs-sys-font-weight-normal);
91
+ line-height: var(--cnvs-sys-line-height-subtext-large);
92
+ font-size: var(--cnvs-sys-font-size-subtext-large);
93
93
  letter-spacing: var(--cnvs-base-letter-spacing-150);
94
94
  color: var(--cnvs-sys-color-text-default);
95
95
  }
96
96
 
97
97
 
98
98
  .cnvs-text.type-level-subtext-medium {
99
- font-family: var(--cnvs-base-font-family-50);
100
- font-weight: var(--cnvs-base-font-weight-400);
101
- line-height: var(--cnvs-base-line-height-50);
102
- font-size: var(--cnvs-base-font-size-50);
99
+ font-family: var(--cnvs-sys-font-family-default);
100
+ font-weight: var(--cnvs-sys-font-weight-normal);
101
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
102
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
103
103
  letter-spacing: var(--cnvs-base-letter-spacing-100);
104
104
  color: var(--cnvs-sys-color-text-default);
105
105
  }
106
106
 
107
107
 
108
108
  .cnvs-text.type-level-subtext-small {
109
- font-family: var(--cnvs-base-font-family-50);
110
- font-weight: var(--cnvs-base-font-weight-400);
111
- line-height: var(--cnvs-base-line-height-50);
112
- font-size: var(--cnvs-base-font-size-25);
109
+ font-family: var(--cnvs-sys-font-family-default);
110
+ font-weight: var(--cnvs-sys-font-weight-normal);
111
+ line-height: var(--cnvs-sys-line-height-subtext-small);
112
+ font-size: var(--cnvs-sys-font-size-subtext-small);
113
113
  letter-spacing: var(--cnvs-base-letter-spacing-50);
114
114
  color: var(--cnvs-sys-color-text-default);
115
115
  }
@@ -152,10 +152,10 @@
152
152
 
153
153
  .cnvs-label-text {
154
154
  box-sizing: border-box;
155
- font-family: var(--cnvs-base-font-family-50);
156
- font-weight: var(--cnvs-base-font-weight-400);
157
- line-height: var(--cnvs-base-line-height-100);
158
- font-size: var(--cnvs-base-font-size-75);
155
+ font-family: var(--cnvs-sys-font-family-default);
156
+ font-weight: var(--cnvs-sys-font-weight-normal);
157
+ line-height: var(--cnvs-sys-line-height-subtext-large);
158
+ font-size: var(--cnvs-sys-font-size-subtext-large);
159
159
  letter-spacing: var(--cnvs-base-letter-spacing-150);
160
160
  color: var(--cnvs-sys-color-text-default);
161
161
  }