@workday/canvas-kit-css 13.0.0-alpha.996-next.0 → 13.0.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 (22) hide show
  1. package/action-bar.css +32 -0
  2. package/avatar.css +11 -12
  3. package/badge.css +2 -2
  4. package/banner.css +95 -0
  5. package/button.css +64 -27
  6. package/common.css +2 -0
  7. package/expandable.css +93 -0
  8. package/form-field.css +2 -0
  9. package/icon.css +33 -0
  10. package/loading-dots.css +3 -2
  11. package/menu.css +44 -22
  12. package/modal.css +3 -2
  13. package/package.json +2 -2
  14. package/popup.css +11 -6
  15. package/select.css +19 -17
  16. package/skeleton.css +73 -0
  17. package/switch.css +4 -0
  18. package/table.css +65 -35
  19. package/tabs.css +122 -0
  20. package/text-input.css +8 -5
  21. package/text.css +52 -52
  22. package/tooltip.css +79 -0
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",
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": "3cb203410f3b0b8b912e6ec84a846d3108e4958f"
29
29
  }
package/popup.css CHANGED
@@ -1,4 +1,9 @@
1
- @keyframes animation-x895x {
1
+ .cnvs-disable-body-scroll {
2
+ overflow: hidden!important;
3
+ }
4
+
5
+
6
+ @keyframes animation-w1f2y {
2
7
  0% {
3
8
  opacity: 1;
4
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -13,10 +18,10 @@
13
18
 
14
19
  .cnvs-popup-card {
15
20
  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);
21
+ font-family: var(--cnvs-sys-font-family-default);
22
+ font-weight: var(--cnvs-sys-font-weight-normal);
23
+ line-height: var(--cnvs-sys-line-height-subtext-large);
24
+ font-size: var(--cnvs-sys-font-size-subtext-large);
20
25
  letter-spacing: var(--cnvs-base-letter-spacing-150);
21
26
  display: flex;
22
27
  position: relative;
@@ -27,7 +32,7 @@
27
32
  padding: var(--cnvs-sys-space-x6);
28
33
  max-height: var(--cnvs-popup-card-max-height);
29
34
  overflow-y: auto;
30
- animation-name: animation-x895x;
35
+ animation-name: animation-w1f2y;
31
36
  animation-duration: 150ms;
32
37
  animation-timing-function: ease-out;
33
38
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/select.css CHANGED
@@ -1,23 +1,8 @@
1
1
  .cnvs-select-input {
2
2
  box-sizing: border-box;
3
- caret-color: transparent;
4
- cursor: default;
5
3
  }
6
4
 
7
- .cnvs-select-input::selection {
8
- background-color: transparent;
9
- }
10
-
11
-
12
- .cnvs-select-icons {
13
- box-sizing: border-box;
14
- position: absolute;
15
- pointer-events: none;
16
- }
17
-
18
-
19
- .cnvs-hidden-select-input {
20
- box-sizing: border-box;
5
+ .cnvs-select-input [data-part="select-hidden-input"] {
21
6
  position: absolute;
22
7
  top: var(--cnvs-sys-space-zero);
23
8
  bottom: var(--cnvs-sys-space-zero);
@@ -26,10 +11,27 @@
26
11
  opacity: var(--cnvs-sys-opacity-zero);
27
12
  cursor: default;
28
13
  pointer-events: none;
14
+ min-width: 100%;
15
+ width: 100%;
16
+ }
17
+
18
+ .cnvs-select-input [data-part="select-start-icon"], .cnvs-select-input [data-part="select-end-icon"], .cnvs-select-input [data-part="select-caret-container"], .cnvs-select-input [data-part="select-start-icon-container"] {
19
+ position: absolute;
20
+ pointer-events: none;
21
+ }
22
+
23
+ .cnvs-select-input [data-part="select-visual-input"] {
24
+ caret-color: transparent;
25
+ cursor: default;
26
+ }
27
+
28
+ .cnvs-select-input [data-part="select-visual-input"]::selection {
29
+ background-color: transparent;
29
30
  }
30
31
 
31
32
 
32
33
  .cnvs-select-card {
33
- max-height: 18.75rem;
34
+ box-sizing: border-box;
35
+ --cnvs-menu-card-max-height: 18.75rem;
34
36
  }
35
37
 
package/skeleton.css ADDED
@@ -0,0 +1,73 @@
1
+ .cnvs-skeleton-shape {
2
+ box-sizing: border-box;
3
+ background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-bg-alt-strong));
4
+ border-radius: var(--cnvs-skeleton-shape-border-radius, var(--cnvs-sys-space-zero));
5
+ height: var(--cnvs-skeleton-shape-height, 100%);
6
+ width: var(--cnvs-skeleton-shape-width);
7
+ margin-bottom: var(--cnvs-sys-space-x4);
8
+ }
9
+
10
+
11
+ .cnvs-skeleton-header {
12
+ box-sizing: border-box;
13
+ background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-bg-alt-strong));
14
+ border-radius: 0;
15
+ height: var(--cnvs-skeleton-header-height, calc(var(--cnvs-sys-space-x1) * 7));
16
+ width: var(--cnvs-skeleton-header-width);
17
+ margin-bottom: var(--cnvs-sys-space-x4);
18
+ }
19
+
20
+
21
+ .cnvs-skeleton-text {
22
+ box-sizing: border-box;
23
+ margin-bottom: var(--cnvs-sys-space-x6);
24
+ }
25
+
26
+ .cnvs-skeleton-text [data-part="skeleton-text-lines"] {
27
+ background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-bg-alt-strong));
28
+ height: 1.3125rem;
29
+ margin-block-end: var(--cnvs-sys-space-x3);
30
+ border-radius: var(--cnvs-sys-shape-half);
31
+ width: 100%;
32
+ }
33
+
34
+ .cnvs-skeleton-text [data-part="skeleton-text-lines"]:last-child {
35
+ width: 60%;
36
+ }
37
+
38
+
39
+ @keyframes animation-w1f269 {
40
+ from {
41
+ opacity: 0.4;
42
+ }
43
+
44
+ to {
45
+ opacity: 1;
46
+ }
47
+
48
+ }
49
+
50
+ .cnvs-skeleton {
51
+ box-sizing: border-box;
52
+ animation: animation-w1f269 0.8s linear infinite alternate;
53
+ position: relative;
54
+ overflow: hidden;
55
+ height: 100%;
56
+ width: 100%;
57
+ }
58
+
59
+ .cnvs-skeleton [data-part="skeleton-accessible-hide"] {
60
+ clip: rect(1px, 1px, 1px, 1px);
61
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
62
+ position: absolute;
63
+ overflow: hidden;
64
+ white-space: nowrap;
65
+ height: 1px;
66
+ min-height: 1px;
67
+ width: 1px;
68
+ min-width: 1px;
69
+ margin: -1px;
70
+ padding: 0;
71
+ border: 0;
72
+ }
73
+
package/switch.css CHANGED
@@ -87,3 +87,7 @@
87
87
  transform: translateX(var(--cnvs-sys-space-x4));
88
88
  }
89
89
 
90
+ .cnvs-switch-circle.checked :dir(rtl) {
91
+ transform: translateX(calc(var(--cnvs-sys-space-x4) * -1));
92
+ }
93
+
package/table.css CHANGED
@@ -1,53 +1,41 @@
1
- .cnvs-table-head {
1
+ .cnvs-base-table-head {
2
2
  box-sizing: border-box;
3
- display: grid;
4
3
  background-color: var(--cnvs-sys-color-bg-alt-softer);
5
4
  min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));
6
5
  }
7
6
 
8
- .cnvs-table-head th:first-of-type {
7
+ .cnvs-base-table-head th:first-of-type {
9
8
  border-inline-start: none;
10
9
  }
11
10
 
12
- .cnvs-table-head th:last-of-type {
11
+ .cnvs-base-table-head th:last-of-type {
13
12
  border-inline-end: none;
14
13
  }
15
14
 
16
15
 
17
- .cnvs-table-body {
16
+ .cnvs-base-table-body {
18
17
  box-sizing: border-box;
19
- display: grid;
20
18
  }
21
19
 
22
- .cnvs-table-body tr:last-of-type td, .cnvs-table-body tr:last-of-type th {
20
+ .cnvs-base-table-body tr:last-of-type td, .cnvs-base-table-body tr:last-of-type th {
23
21
  border-bottom: none;
24
22
  }
25
23
 
26
- .cnvs-table-body tr:first-of-type td, .cnvs-table-body tr:first-of-type th {
24
+ .cnvs-base-table-body tr:first-of-type td, .cnvs-base-table-body tr:first-of-type th {
27
25
  border-top: none;
28
26
  }
29
27
 
30
- .cnvs-table-body td:last-of-type {
28
+ .cnvs-base-table-body td:last-of-type {
31
29
  border-inline-end: none;
32
30
  }
33
31
 
34
- .cnvs-table-body td:first-of-type {
32
+ .cnvs-base-table-body td:first-of-type {
35
33
  border-inline-start: none;
36
34
  }
37
35
 
38
36
 
39
- .cnvs-table-row {
40
- box-sizing: border-box;
41
- display: grid;
42
- grid-auto-flow: column;
43
- grid-template-columns: repeat(var(--cnvs-children-cell-number), minmax(10rem, 1fr));
44
- }
45
-
46
-
47
- .cnvs-table-header {
37
+ .cnvs-base-table-header {
48
38
  box-sizing: border-box;
49
- display: grid;
50
- align-items: center;
51
39
  background-color: var(--cnvs-sys-color-bg-default);
52
40
  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
53
41
  justify-content: start;
@@ -58,9 +46,8 @@
58
46
  }
59
47
 
60
48
 
61
- .cnvs-table-cell {
49
+ .cnvs-base-table-cell {
62
50
  box-sizing: border-box;
63
- display: grid;
64
51
  align-items: center;
65
52
  background-color: var(--cnvs-sys-color-bg-default);
66
53
  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
@@ -72,7 +59,41 @@
72
59
  }
73
60
 
74
61
 
75
- .cnvs-table-footer {
62
+ .cnvs-base-table-caption {
63
+ box-sizing: border-box;
64
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
65
+ }
66
+
67
+
68
+ .cnvs-base-table {
69
+ box-sizing: border-box;
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-subtext-large);
73
+ font-size: var(--cnvs-sys-font-size-subtext-large);
74
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
75
+ border: 0.0625rem solid var(--cnvs-sys-color-border-container);
76
+ border-radius: var(--cnvs-sys-shape-x2);
77
+ overflow: auto;
78
+ color: var(--cnvs-sys-color-text-default);
79
+ }
80
+
81
+
82
+ .cnvs-table-row {
83
+ box-sizing: border-box;
84
+ display: grid;
85
+ grid-auto-flow: column;
86
+ grid-template-columns: repeat(var(--cnvs-table-row-children-cell-number), minmax(10rem, 1fr));
87
+ }
88
+
89
+
90
+ .cnvs-table {
91
+ box-sizing: border-box;
92
+ display: grid;
93
+ }
94
+
95
+
96
+ .cnvs-table-body {
76
97
  box-sizing: border-box;
77
98
  display: grid;
78
99
  }
@@ -82,21 +103,30 @@
82
103
  box-sizing: border-box;
83
104
  display: flex;
84
105
  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-container);
85
- padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
86
106
  }
87
107
 
88
108
 
89
- .cnvs-table {
109
+ .cnvs-table-cell {
90
110
  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);
95
- letter-spacing: var(--cnvs-base-letter-spacing-150);
96
111
  display: grid;
97
- border: 0.0625rem solid var(--cnvs-sys-color-border-container);
98
- border-radius: var(--cnvs-sys-shape-x2);
99
- overflow: auto;
100
- color: var(--cnvs-sys-color-text-default);
112
+ }
113
+
114
+
115
+ .cnvs-table-footer {
116
+ box-sizing: border-box;
117
+ display: grid;
118
+ }
119
+
120
+
121
+ .cnvs-table-head {
122
+ box-sizing: border-box;
123
+ display: grid;
124
+ }
125
+
126
+
127
+ .cnvs-table-header {
128
+ box-sizing: border-box;
129
+ display: grid;
130
+ align-items: center;
101
131
  }
102
132
 
package/tabs.css ADDED
@@ -0,0 +1,122 @@
1
+ .cnvs-tab-item {
2
+ box-sizing: border-box;
3
+ font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
4
+ font-weight: var(--cnvs-sys-font-weight-medium);
5
+ line-height: var(--cnvs-sys-line-height-subtext-large);
6
+ font-size: var(--cnvs-sys-font-size-subtext-large);
7
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
8
+ border: none;
9
+ background-color: transparent;
10
+ flex: 0 0 auto;
11
+ min-width: var(--cnvs-sys-space-zero);
12
+ align-items: center;
13
+ padding: var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);
14
+ height: 3.25rem;
15
+ cursor: pointer;
16
+ color: var(--cnvs-sys-color-fg-muted-default);
17
+ position: relative;
18
+ border-radius: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);
19
+ transition: background 150ms ease,color 150ms ease;
20
+ white-space: nowrap;
21
+ text-overflow: ellipsis;
22
+ overflow: hidden;
23
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
24
+ }
25
+
26
+ .cnvs-tab-item:has(span) {
27
+ display: flex;
28
+ gap: var(--cnvs-sys-space-x2);
29
+ }
30
+
31
+ .cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
32
+ background-color: var(--cnvs-base-palette-soap-200);
33
+ color: var(--cnvs-base-palette-black-pepper-400);
34
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
35
+ }
36
+
37
+ .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
38
+ outline: none;
39
+ box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
40
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
41
+ --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
42
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
43
+ }
44
+
45
+ .cnvs-tab-item:disabled, .cnvs-tab-item.disabled, .cnvs-tab-item[aria-disabled] {
46
+ color: var(--cnvs-sys-color-text-disabled);
47
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
48
+ }
49
+
50
+ .cnvs-tab-item:disabled:hover, .cnvs-tab-item.disabled:hover, .cnvs-tab-item[aria-disabled]:hover {
51
+ cursor: auto;
52
+ background-color: var(--cnvs-sys-color-bg-transparent);
53
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
54
+ }
55
+
56
+ .cnvs-tab-item[aria-selected=true] {
57
+ color: var(--cnvs-brand-primary-base);
58
+ cursor: default;
59
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
60
+ }
61
+
62
+ .cnvs-tab-item[aria-selected=true]:after {
63
+ position: absolute;
64
+ height: var(--cnvs-sys-space-x1);
65
+ border-radius: var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);
66
+ background-color: var(--cnvs-brand-primary-base);
67
+ bottom: var(--cnvs-sys-space-zero);
68
+ content: '';
69
+ left: var(--cnvs-sys-space-zero);
70
+ margin-block-start: calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);
71
+ width: 100%;
72
+ }
73
+
74
+ .cnvs-tab-item[aria-selected=true]:hover, .cnvs-tab-item[aria-selected=true].hover, .cnvs-tab-item[aria-selected=true]:focus-visible, .cnvs-tab-item[aria-selected=true].focus {
75
+ background-color: var(--cnvs-sys-color-bg-transparent);
76
+ color: var(--cnvs-brand-primary-base);
77
+ }
78
+
79
+
80
+ .cnvs-tabs-list {
81
+ box-sizing: border-box;
82
+ display: flex;
83
+ position: relative;
84
+ border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
85
+ gap: var(--cnvs-sys-space-x3);
86
+ padding-inline: var(--cnvs-sys-space-x6);
87
+ mask-image: none;
88
+ }
89
+
90
+
91
+ .cnvs-tabs-list.modality-touch {
92
+ padding-inline: var(--cnvs-sys-space-zero);
93
+ }
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+ .cnvs-tabs-list.modality-touch.is-dragging.direction-left {
105
+ mask-image: linear-gradient(to left, white 80%, transparent);
106
+ }
107
+
108
+
109
+ .cnvs-tabs-list.modality-touch.is-dragging.direction-right {
110
+ mask-image: linear-gradient(to right, white 80%, transparent);
111
+ }
112
+
113
+
114
+ .cnvs-tabs-overflow-button {
115
+ box-sizing: border-box;
116
+ }
117
+
118
+ .cnvs-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
119
+ display: flex;
120
+ gap: var(--cnvs-sys-space-zero);
121
+ }
122
+
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);
@@ -34,7 +34,7 @@
34
34
  .cnvs-text-input:is(:focus-visible, .focus):where(:not([disabled])) {
35
35
  border-color: var(--cnvs-brand-common-focus-outline);
36
36
  box-shadow: inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);
37
- outline: none;
37
+ outline: 0.125rem solid transparent;
38
38
  }
39
39
 
40
40
  .cnvs-text-input:is(:disabled, .disabled) {
@@ -70,12 +70,14 @@
70
70
 
71
71
  .cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
72
72
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
73
+ outline-offset: 0.125rem;
73
74
  }
74
75
 
75
76
 
76
77
  .cnvs-text-input.error-alert {
77
78
  border-color: var(--cnvs-brand-alert-darkest);
78
79
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
80
+ outline-offset: 0.125rem;
79
81
  }
80
82
 
81
83
  .cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
@@ -130,6 +132,7 @@
130
132
  box-sizing: border-box;
131
133
  display: flex;
132
134
  position: relative;
135
+ align-items: center;
133
136
  }
134
137
 
135
138
  .cnvs-input-group :has([data-part="input-group-clear-button"]) {
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
  }