@workday/canvas-kit-css 15.0.0-alpha.1303-next.0 → 15.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 (37) hide show
  1. package/LICENSE +2 -1
  2. package/action-bar.css +7 -8
  3. package/avatar.css +90 -97
  4. package/badge.css +14 -13
  5. package/banner.css +36 -35
  6. package/breadcrumbs.css +48 -48
  7. package/button.css +292 -265
  8. package/card.css +12 -12
  9. package/checkbox.css +107 -100
  10. package/collection.css +1 -2
  11. package/color-picker.css +7 -13
  12. package/combobox.css +9 -0
  13. package/common.css +30 -0
  14. package/expandable.css +42 -40
  15. package/form-field.css +70 -76
  16. package/icon.css +58 -29
  17. package/information-highlight.css +122 -0
  18. package/loading-dots.css +9 -10
  19. package/menu.css +76 -73
  20. package/modal.css +55 -55
  21. package/package.json +4 -3
  22. package/pagination.css +67 -60
  23. package/pill.css +221 -0
  24. package/popup.css +22 -21
  25. package/segmented-control.css +119 -45
  26. package/select.css +19 -15
  27. package/side-panel.css +157 -0
  28. package/skeleton.css +14 -14
  29. package/switch.css +22 -24
  30. package/table.css +33 -33
  31. package/tabs.css +45 -36
  32. package/text-area.css +2 -2
  33. package/text-input.css +29 -31
  34. package/text.css +52 -52
  35. package/toast.css +17 -18
  36. package/tooltip.css +25 -23
  37. package/README.md +0 -4
package/form-field.css CHANGED
@@ -1,8 +1,32 @@
1
+ .cnvs-form-field-field {
2
+ box-sizing: border-box;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
6
+ }
7
+
8
+
9
+ .cnvs-form-field-hint {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ }
13
+
14
+
15
+ .cnvs-form-field-hint.error-error {
16
+ color: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
17
+ }
18
+
19
+
20
+ .cnvs-form-field-hint.error-caution {
21
+ color: var(--cnvs-sys-color-fg-default);
22
+ }
23
+
24
+
1
25
  .cnvs-form-field-label {
2
26
  box-sizing: border-box;
3
27
  font-weight: var(--cnvs-sys-font-weight-medium);
4
- color: var(--cnvs-sys-color-text-default);
5
- padding-inline-start: var(--cnvs-sys-space-zero);
28
+ color: var(--cnvs-sys-color-fg-default);
29
+ padding-inline-start: 0;
6
30
  display: flex;
7
31
  align-items: center;
8
32
  min-width: 11.25rem;
@@ -11,23 +35,23 @@
11
35
 
12
36
  .cnvs-form-field-label.is-required::after {
13
37
  content: "*";
14
- font-size: var(--cnvs-sys-font-size-body-large);
38
+ font-size: var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));
15
39
  font-weight: var(--cnvs-sys-font-weight-normal);
16
- color: var(--cnvs-brand-error-base);
40
+ color: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
17
41
  text-decoration: unset;
18
- margin-inline-start: var(--cnvs-sys-space-x1);
42
+ margin-inline-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
19
43
  }
20
44
 
21
45
 
22
46
  .cnvs-form-field-label.orientation-horizontal-start {
23
47
  justify-content: flex-start;
24
48
  float: left;
25
- max-height: var(--cnvs-sys-space-x10);
49
+ max-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
26
50
  }
27
51
 
28
52
 
29
53
  .cnvs-form-field-label.orientation-horizontal-end {
30
- max-height: var(--cnvs-sys-space-x10);
54
+ max-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
31
55
  float: left;
32
56
  justify-content: flex-end;
33
57
  }
@@ -54,36 +78,12 @@
54
78
  }
55
79
 
56
80
 
57
- .cnvs-form-field-hint {
58
- box-sizing: border-box;
59
- margin: var(--cnvs-sys-space-zero);
60
- }
61
-
62
-
63
- .cnvs-form-field-hint.error-error {
64
- color: var(--cnvs-brand-error-base);
65
- }
66
-
67
-
68
- .cnvs-form-field-hint.error-caution {
69
- color: var(--cnvs-sys-color-text-caution-default);
70
- }
71
-
72
-
73
- .cnvs-form-field-container {
74
- box-sizing: border-box;
75
- display: flex;
76
- flex-direction: column;
77
- gap: var(--cnvs-sys-space-x2);
78
- }
79
-
80
-
81
81
  .cnvs-form-field {
82
82
  box-sizing: border-box;
83
83
  display: flex;
84
84
  border: none;
85
- padding: var(--cnvs-sys-space-zero);
86
- margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);
85
+ padding: 0;
86
+ margin: 0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
87
87
  }
88
88
 
89
89
 
@@ -102,19 +102,21 @@
102
102
 
103
103
  .cnvs-form-field.orientation-horizontal-start {
104
104
  flex-direction: row;
105
- gap: var(--cnvs-sys-space-x8);
105
+ gap: var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));
106
+ width: 100%;
106
107
  }
107
108
 
108
109
 
109
110
  .cnvs-form-field.orientation-horizontal-end {
110
111
  flex-direction: row;
111
- gap: var(--cnvs-sys-space-x8);
112
+ gap: var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));
113
+ width: 100%;
112
114
  }
113
115
 
114
116
 
115
117
  .cnvs-form-field.orientation-vertical {
116
118
  flex-direction: column;
117
- gap: var(--cnvs-sys-space-x1);
119
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
118
120
  align-items: flex-start;
119
121
  }
120
122
 
@@ -122,44 +124,11 @@
122
124
 
123
125
 
124
126
 
125
- .cnvs-form-field-field {
126
- box-sizing: border-box;
127
- display: flex;
128
- flex-direction: column;
129
- gap: var(--cnvs-sys-space-x2);
130
- }
131
-
132
-
133
- .cnvs-form-field-group-list {
134
- box-sizing: border-box;
135
- display: flex;
136
- flex-direction: column;
137
- border-radius: var(--cnvs-sys-shape-x1-half);
138
- gap: var(--cnvs-sys-space-x2);
139
- padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
140
- margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
141
- transition: 100ms box-shadow;
142
- width: fit-content;
143
- }
144
-
145
-
146
- .cnvs-form-field-group-list.error-error {
147
- background-color: var(--cnvs-brand-error-lightest);
148
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-error-inner);
149
- }
150
-
151
-
152
- .cnvs-form-field-group-list.error-caution {
153
- background-color: var(--cnvs-brand-alert-lightest);
154
- box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-outer),inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-inner);
155
- }
156
-
157
-
158
127
  .cnvs-form-field-group-label {
159
128
  box-sizing: border-box;
160
129
  font-weight: var(--cnvs-sys-font-weight-medium);
161
- color: var(--cnvs-sys-color-text-default);
162
- padding-inline-start: var(--cnvs-sys-space-zero);
130
+ color: var(--cnvs-sys-color-fg-default);
131
+ padding-inline-start: 0;
163
132
  display: flex;
164
133
  align-items: center;
165
134
  min-width: 11.25rem;
@@ -168,11 +137,11 @@
168
137
 
169
138
  .cnvs-form-field-group-label.is-required::after {
170
139
  content: "*";
171
- font-size: var(--cnvs-sys-font-size-body-large);
140
+ font-size: var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));
172
141
  font-weight: var(--cnvs-sys-font-weight-normal);
173
- color: var(--cnvs-brand-error-base);
142
+ color: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
174
143
  text-decoration: unset;
175
- margin-inline-start: var(--cnvs-sys-space-x1);
144
+ margin-inline-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
176
145
  }
177
146
 
178
147
 
@@ -184,13 +153,38 @@
184
153
  .cnvs-form-field-group-label.orientation-horizontal-start {
185
154
  justify-content: flex-start;
186
155
  float: left;
187
- max-height: var(--cnvs-sys-space-x10);
156
+ max-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
188
157
  }
189
158
 
190
159
 
191
160
  .cnvs-form-field-group-label.orientation-horizontal-end {
192
- max-height: var(--cnvs-sys-space-x10);
161
+ max-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
193
162
  float: left;
194
163
  justify-content: flex-end;
195
164
  }
196
165
 
166
+
167
+ .cnvs-form-field-group-list {
168
+ box-sizing: border-box;
169
+ display: flex;
170
+ flex-direction: column;
171
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
172
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
173
+ padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
174
+ margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
175
+ transition: 100ms box-shadow;
176
+ width: fit-content;
177
+ }
178
+
179
+
180
+ .cnvs-form-field-group-list.error-error {
181
+ background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
182
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
183
+ }
184
+
185
+
186
+ .cnvs-form-field-group-list.error-caution {
187
+ background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
188
+ box-shadow: inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))),inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
189
+ }
190
+
package/icon.css CHANGED
@@ -49,61 +49,81 @@
49
49
  }
50
50
 
51
51
  .cnvs-applet-icon .color-200 {
52
- fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blue-200));
52
+ fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));
53
53
  }
54
54
 
55
55
  .cnvs-applet-icon .color-300 {
56
- fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blue-400));
56
+ fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));
57
57
  }
58
58
 
59
59
  .cnvs-applet-icon .color-400 {
60
- fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
60
+ fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
61
61
  }
62
62
 
63
63
  .cnvs-applet-icon .color-400-alpha-20 {
64
- fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
64
+ fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
65
65
  }
66
66
 
67
67
  .cnvs-applet-icon .color-500 {
68
- fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blue-700));
68
+ fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));
69
69
  }
70
70
 
71
71
 
72
- .cnvs-system-icon {
72
+ .cnvs-expressive-icon {
73
73
  box-sizing: border-box;
74
74
  }
75
75
 
76
- .cnvs-system-icon svg {
77
- width: var(--cnvs-svg-width, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
78
- height: var(--cnvs-svg-height, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
76
+ .cnvs-expressive-icon svg {
77
+ width: var(--cnvs-svg-size, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));
78
+ height: var(--cnvs-svg-size, var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem)));
79
79
  }
80
80
 
81
- .cnvs-system-icon .wd-icon-fill {
82
- fill: var(--cnvs-system-icon-color, var(--cnvs-sys-color-icon-default));
81
+ .cnvs-expressive-icon .wd-expressive .wd-expressive-fill {
82
+ fill: var(--cnvs-expressive-icon-color, var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));
83
83
  }
84
84
 
85
- .cnvs-system-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
86
- fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default)));
85
+ .cnvs-expressive-icon .wd-expressive .wd-expressive-accent {
86
+ fill: var(--cnvs-expressive-icon-accent-color, var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17)));
87
87
  }
88
88
 
89
- .cnvs-system-icon .wd-icon-background {
90
- fill: var(--cnvs-system-icon-background-color, transparent);
89
+ @media (prefers-contrast: more) {
90
+ .cnvs-expressive-icon .wd-expressive .wd-expressive-fill {
91
+ color: currentColor;
92
+ fill: currentColor;
93
+ }
94
+
95
+ .cnvs-expressive-icon .wd-expressive .wd-expressive-accent {
96
+ color: transparent;
97
+ fill: transparent;
91
98
  }
92
99
 
93
- .cnvs-system-icon:where(:hover, .hover) .wd-icon-fill {
94
- fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default))));
100
+
95
101
  }
96
102
 
97
- .cnvs-system-icon:where(:hover, .hover) .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
98
- fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default)))));
103
+
104
+ .cnvs-system-icon {
105
+ box-sizing: border-box;
99
106
  }
100
107
 
101
- .cnvs-system-icon:where(:hover, .hover) .wd-icon-background {
102
- fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color, transparent));
108
+ .cnvs-system-icon svg {
109
+ width: var(--cnvs-svg-size, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));
110
+ height: var(--cnvs-svg-size, var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem)));
111
+ }
112
+
113
+ .cnvs-system-icon .wd-icon .wd-icon-fill {
114
+ fill: var(--cnvs-system-icon-color, var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1))));
115
+ }
116
+
117
+ .cnvs-system-icon .wd-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
118
+ fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))));
119
+ }
120
+
121
+ .cnvs-system-icon .wd-icon .wd-icon-background {
122
+ fill: var(--cnvs-system-icon-background-color, transparent);
103
123
  }
104
124
 
105
125
  @media (prefers-contrast: more) {
106
- .cnvs-system-icon .wd-icon-fill, .cnvs-system-icon .wd-icon-accent {
126
+ .cnvs-system-icon .wd-icon .wd-icon-fill, .cnvs-system-icon .wd-icon .wd-icon-accent {
107
127
  color: currentColor;
108
128
  fill: currentColor;
109
129
  }
@@ -114,17 +134,17 @@
114
134
 
115
135
  .cnvs-system-icon-circle {
116
136
  box-sizing: border-box;
117
- background: var(--cnvs-system-icon-circle-background, var(--cnvs-sys-color-bg-alt-soft));
137
+ background: var(--cnvs-system-icon-circle-background, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));
118
138
  display: flex;
119
139
  align-items: center;
120
140
  justify-content: center;
121
- padding: var(--cnvs-sys-space-zero);
141
+ padding: 0;
122
142
  border: none;
123
- border-radius: var(--cnvs-sys-shape-round);
143
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
124
144
  overflow: hidden;
125
- width: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
126
- height: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
127
- --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10)) * 0.625);
145
+ width: var(--cnvs-system-icon-circle-size, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));
146
+ height: var(--cnvs-system-icon-circle-size, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)));
147
+ --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-size, var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))) * 0.625);
128
148
  --cnvs-system-icon-color: var(--cnvs-system-icon-circle-color);
129
149
  }
130
150
 
@@ -134,6 +154,12 @@
134
154
  }
135
155
 
136
156
 
157
+ .cnvs-system-icon-circle.inverse {
158
+ background: var(--cnvs-system-icon-circle-background, var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1))));
159
+ --cnvs-system-icon-color: var(--cnvs-system-icon-circle-color, var(--cnvs-sys-color-fg-inverse));
160
+ }
161
+
162
+
137
163
  .cnvs-graphic {
138
164
  box-sizing: border-box;
139
165
  }
@@ -141,7 +167,10 @@
141
167
 
142
168
  .cnvs-graphic.grow {
143
169
  width: 100%;
144
- --cnvs-svg-width: 100%;
170
+ }
171
+
172
+ .cnvs-graphic.grow svg {
173
+ width: 100%;
145
174
  }
146
175
 
147
176
 
package/information-highlight.css ADDED
@@ -0,0 +1,122 @@
1
+ .cnvs-information-highlight-body {
2
+ box-sizing: border-box;
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-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
6
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
7
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
8
+ color: var(--cnvs-sys-color-fg-default);
9
+ grid-column: 2;
10
+ margin-block-end: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
11
+ }
12
+
13
+
14
+ .cnvs-information-highlight-heading {
15
+ box-sizing: border-box;
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-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));
19
+ font-size: var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));
20
+ letter-spacing: var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));
21
+ color: var(--cnvs-sys-color-fg-default);
22
+ grid-column: 2;
23
+ margin: 0;
24
+ }
25
+
26
+
27
+ .cnvs-information-highlight-link {
28
+ box-sizing: border-box;
29
+ font-family: var(--cnvs-sys-font-family-default);
30
+ font-weight: var(--cnvs-sys-font-weight-bold);
31
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
32
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
33
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
34
+ grid-column: 2;
35
+ justify-self: start;
36
+ color: var(--cnvs-sys-color-fg-default);
37
+ }
38
+
39
+
40
+ .cnvs-information-highlight {
41
+ box-sizing: border-box;
42
+ display: grid;
43
+ grid-template-columns: min-content;
44
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
45
+ padding: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
46
+ border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
47
+ outline: 0.0625rem solid transparent;
48
+ border-inline-start: var(--cnvs-base-size-50, 0.25rem) solid transparent;
49
+ }
50
+
51
+
52
+ .cnvs-information-highlight.informational-low {
53
+ border-inline-start-color: var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));
54
+ background-color: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
55
+ }
56
+
57
+ .cnvs-information-highlight.informational-low [data-part="information-highlight-icon"] {
58
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
59
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
60
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
61
+ }
62
+
63
+
64
+ .cnvs-information-highlight.informational-high {
65
+ border-inline-start-color: var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));
66
+ background-color: var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));
67
+ }
68
+
69
+ .cnvs-information-highlight.informational-high [data-part="information-highlight-icon"] {
70
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
71
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
72
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
73
+ }
74
+
75
+
76
+ .cnvs-information-highlight.caution-low {
77
+ border-inline-start-color: var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));
78
+ background-color: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
79
+ }
80
+
81
+ .cnvs-information-highlight.caution-low [data-part="information-highlight-icon"] {
82
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
83
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));
84
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));
85
+ }
86
+
87
+
88
+ .cnvs-information-highlight.caution-high {
89
+ border-inline-start-color: var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));
90
+ background-color: var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));
91
+ }
92
+
93
+ .cnvs-information-highlight.caution-high [data-part="information-highlight-icon"] {
94
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
95
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));
96
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));
97
+ }
98
+
99
+
100
+ .cnvs-information-highlight.critical-low {
101
+ border-inline-start-color: var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));
102
+ background-color: var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));
103
+ }
104
+
105
+ .cnvs-information-highlight.critical-low [data-part="information-highlight-icon"] {
106
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
107
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
108
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
109
+ }
110
+
111
+
112
+ .cnvs-information-highlight.critical-high {
113
+ border-inline-start-color: var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));
114
+ background-color: var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));
115
+ }
116
+
117
+ .cnvs-information-highlight.critical-high [data-part="information-highlight-icon"] {
118
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse);
119
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
120
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
121
+ }
122
+
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-3fec41 {
1
+ @keyframes animation-2knep4 {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -23,22 +23,21 @@
23
23
 
24
24
  .cnvs-loading-dots {
25
25
  --cnvs-loading-dots-animation-duration-ms: 40ms;
26
- --cnvs-loading-dots-loading-dot-color: var(--cnvs-sys-color-bg-muted-strong);
27
26
  box-sizing: border-box;
28
27
  display: inline-flex;
29
- gap: var(--cnvs-sys-space-x2);
28
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
30
29
  }
31
30
 
32
31
  .cnvs-loading-dots [data-part="loading-animation-dot"] {
33
- background-color: var(--cnvs-loading-dots-loading-dot-color);
34
- width: var(--cnvs-sys-space-x4);
35
- height: var(--cnvs-sys-space-x4);
36
- font-size: var(--cnvs-sys-space-zero);
37
- border-radius: var(--cnvs-sys-shape-round);
32
+ background-color: var(--cnvs-loading-dots-loading-dot-color, var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1))));
33
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
34
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
35
+ font-size: 0;
36
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
38
37
  outline: 0.125rem solid transparent;
39
38
  transform: scale(0);
40
39
  display: inline-block;
41
- animation-name: animation-3fec41;
40
+ animation-name: animation-2knep4;
42
41
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
43
42
  animation-iteration-count: infinite;
44
43
  animation-timing-function: ease-in-out;
@@ -59,6 +58,6 @@
59
58
 
60
59
 
61
60
  .cnvs-loading-dots.variant-inverse [data-part="loading-animation-dot"] {
62
- background-color: var(--cnvs-sys-color-bg-default, var(--cnvs-loading-dots-loading-dot-color));
61
+ background-color: var(--cnvs-loading-dots-loading-dot-color, var(--cnvs-sys-color-bg-default));
63
62
  }
64
63