@workday/canvas-kit-preview-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 (13) hide show
  1. package/color-picker.css +16 -16
  2. package/divider.css +2 -3
  3. package/loading-sparkles.css +2 -2
  4. package/multi-select.css +48 -36
  5. package/package.json +3 -3
  6. package/radio.css +63 -77
  7. package/side-panel.css +7 -7
  8. package/status-indicator.css +20 -26
  9. package/switch.css +123 -0
  10. package/avatar.css +0 -188
  11. package/information-highlight.css +0 -124
  12. package/pill.css +0 -229
  13. package/segmented-control.css +0 -153
package/pill.css DELETED
@@ -1,229 +0,0 @@
1
- .cnvs-preview-pill-icon {
2
- box-sizing: border-box;
3
- margin-inline-start: calc(var(--cnvs-sys-space-x1) * -1);
4
- --cnvs-svg-size: 1.25rem;
5
- flex: 0 0 auto;
6
- }
7
-
8
-
9
- .cnvs-preview-pill-icon-button {
10
- box-sizing: border-box;
11
- margin-inline-end: calc(0.4375rem * -1);
12
- margin-inline-start: calc(0.125rem * -1);
13
- border-radius: var(--cnvs-sys-shape-half);
14
- height: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
15
- width: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
16
- padding: var(--cnvs-sys-space-zero);
17
- overflow: visible;
18
- flex: 0 0 auto;
19
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
20
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
21
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
22
- --cnvs-svg-size: var(--cnvs-sys-space-x6);
23
- }
24
-
25
- .cnvs-preview-pill-icon-button ::after {
26
- content: "";
27
- height: var(--cnvs-sys-space-x8);
28
- width: var(--cnvs-sys-space-x8);
29
- position: absolute;
30
- left: calc(0.4375rem * -1);
31
- bottom: calc(0.4375rem * -1);
32
- margin: var(--cnvs-sys-space-zero);
33
- pointer-events: all;
34
- }
35
-
36
- .cnvs-preview-pill-icon-button:focus-visible, .cnvs-preview-pill-icon-button.focus {
37
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
38
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
39
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
40
- }
41
-
42
- .cnvs-preview-pill-icon-button:hover, .cnvs-preview-pill-icon-button.hover {
43
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
44
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
45
- }
46
-
47
- .cnvs-preview-pill-icon-button:active, .cnvs-preview-pill-icon-button.active {
48
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
49
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
50
- }
51
-
52
- .cnvs-preview-pill-icon-button:disabled, .cnvs-preview-pill-icon-button.disabled {
53
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
54
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
55
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
56
- }
57
-
58
-
59
- .cnvs-preview-pill-count {
60
- box-sizing: border-box;
61
- border-start-start-radius: var(--cnvs-sys-shape-zero);
62
- border-start-end-radius: var(--cnvs-sys-shape-x1);
63
- border-end-start-radius: var(--cnvs-sys-shape-zero);
64
- border-end-end-radius: var(--cnvs-sys-shape-x1);
65
- border-width: 0.0625rem;
66
- border-inline-start-width: var(--cnvs-sys-space-zero);
67
- border-style: solid;
68
- border-color: var(--cnvs-preview-pill-count-border-color, var(--cnvs-sys-color-border-transparent));
69
- display: inline-flex;
70
- align-items: center;
71
- justify-content: center;
72
- height: 1.375rem;
73
- width: var(--cnvs-sys-space-x6);
74
- padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
75
- margin-inline-end: calc(var(--cnvs-sys-space-x2) * -1);
76
- margin-inline-start: var(--cnvs-sys-space-x1);
77
- background-color: var(--cnvs-preview-pill-count-background-color, var(--cnvs-sys-color-bg-alt-stronger));
78
- flex: 0 0 auto;
79
- }
80
-
81
-
82
- .cnvs-preview-pill-avatar {
83
- box-sizing: border-box;
84
- flex: 0 0 auto;
85
- font-family: var(--cnvs-sys-font-family-default);
86
- font-weight: var(--cnvs-sys-font-weight-normal);
87
- line-height: var(--cnvs-sys-line-height-subtext-small);
88
- font-size: var(--cnvs-sys-font-size-subtext-small);
89
- letter-spacing: var(--cnvs-base-letter-spacing-50);
90
- }
91
-
92
- .cnvs-preview-pill-avatar:disabled, .cnvs-preview-pill-avatar.disabled {
93
- opacity: var(--cnvs-sys-opacity-disabled);
94
- }
95
-
96
-
97
- .cnvs-preview-pill-label {
98
- box-sizing: border-box;
99
- flex-shrink: 1;
100
- white-space: nowrap;
101
- text-overflow: ellipsis;
102
- overflow: hidden;
103
- }
104
-
105
-
106
- .cnvs-preview-pill {
107
- box-sizing: border-box;
108
- display: initial;
109
- flex-direction: row;
110
- align-items: center;
111
- border-radius: var(--cnvs-sys-shape-x1);
112
- font-family: var(--cnvs-sys-font-family-default);
113
- font-weight: var(--cnvs-sys-font-weight-medium);
114
- line-height: var(--cnvs-sys-line-height-subtext-small);
115
- font-size: var(--cnvs-sys-font-size-subtext-large);
116
- letter-spacing: var(--cnvs-base-letter-spacing-150);
117
- box-shadow: none;
118
- outline: none;
119
- -webkit-font-smoothing: antialiased;
120
- -moz-osx-font-smoothing: grayscale;
121
- width: fit-content;
122
- padding: 0.125rem var(--cnvs-sys-space-x2);
123
- height: var(--cnvs-sys-space-x6);
124
- position: relative;
125
- gap: var(--cnvs-sys-space-x1);
126
- max-width: var(--cnvs-preview-pill-max-width);
127
- white-space: nowrap;
128
- text-overflow: ellipsis;
129
- overflow: hidden;
130
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
131
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
132
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
133
- --cnvs-system-icon-color: currentColor;
134
- --cnvs-preview-pill-count-border-color: transparent;
135
- }
136
-
137
- .cnvs-preview-pill:has(span) {
138
- display: flex;
139
- line-height: var(--cnvs-sys-line-height-subtext-large);
140
- }
141
-
142
- .cnvs-preview-pill:hover, .cnvs-preview-pill.hover {
143
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
144
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
145
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
146
- --cnvs-system-icon-color: currentColor;
147
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
148
- --cnvs-preview-pill-count-border-color: transparent;
149
- }
150
-
151
- .cnvs-preview-pill:active, .cnvs-preview-pill.active {
152
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
153
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
154
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
155
- --cnvs-system-icon-color: currentColor;
156
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
157
- --cnvs-preview-pill-count-border-color: transparent;
158
- }
159
-
160
- .cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
161
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
162
- --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
163
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
164
- border-color: var(--cnvs-sys-color-border-primary-default);
165
- --cnvs-system-icon-color: currentColor;
166
- --cnvs-preview-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
167
- box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default),0 0 0 0px var(--cnvs-sys-color-border-primary-default);
168
- }
169
-
170
- .cnvs-preview-pill:disabled, .cnvs-preview-pill.disabled {
171
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
172
- --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
173
- --cnvs-button-label: var(--cnvs-sys-color-fg-disabled);
174
- --cnvs-system-icon-color: currentColor;
175
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-strong);
176
- --cnvs-preview-pill-count-border-color: transparent;
177
- }
178
-
179
-
180
- .cnvs-preview-pill.variant-read-only {
181
- border: 0.0625rem solid var(--cnvs-sys-color-border-container);
182
- cursor: default;
183
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
184
- }
185
-
186
- .cnvs-preview-pill.variant-read-only:hover, .cnvs-preview-pill.variant-read-only.hover {
187
- border-color: var(--cnvs-sys-color-border-container);
188
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
189
- }
190
-
191
- .cnvs-preview-pill.variant-read-only:focus-visible, .cnvs-preview-pill.variant-read-only.focus {
192
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
193
- }
194
-
195
- .cnvs-preview-pill.variant-read-only:active, .cnvs-preview-pill.variant-read-only.active {
196
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
197
- }
198
-
199
- .cnvs-preview-pill.variant-read-only:disabled, .cnvs-preview-pill.variant-read-only.disabled {
200
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
201
- }
202
-
203
-
204
- .cnvs-preview-pill.variant-removable {
205
- cursor: default;
206
- overflow: revert;
207
- position: relative;
208
- }
209
-
210
- .cnvs-preview-pill.variant-removable:focus-visible, .cnvs-preview-pill.variant-removable.focus {
211
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
212
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
213
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
214
- box-shadow: none;
215
- }
216
-
217
- .cnvs-preview-pill.variant-removable:hover, .cnvs-preview-pill.variant-removable.hover {
218
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
219
- }
220
-
221
- .cnvs-preview-pill.variant-removable:active, .cnvs-preview-pill.variant-removable.active {
222
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
223
- }
224
-
225
- .cnvs-preview-pill.variant-removable:disabled, .cnvs-preview-pill.variant-removable.disabled {
226
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
227
- --cnvs-system-icon-color: currentColor;
228
- }
229
-
package/segmented-control.css DELETED
@@ -1,153 +0,0 @@
1
- .cnvs-preview-segmented-control-list {
2
- box-sizing: border-box;
3
- display: inline-grid;
4
- background-color: var(--cnvs-sys-color-bg-alt-soft);
5
- border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
6
- border-radius: var(--cnvs-sys-shape-x2);
7
- padding: 0.1875rem;
8
- grid-gap: var(--cnvs-sys-space-x2);
9
- }
10
-
11
-
12
- .cnvs-preview-segmented-control-list.disabled {
13
- opacity: var(--cnvs-sys-opacity-disabled);
14
- }
15
-
16
-
17
- .cnvs-preview-segmented-control-list.orientation-vertical {
18
- grid-template-rows: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
19
- }
20
-
21
-
22
- .cnvs-preview-segmented-control-list.orientation-horizontal {
23
- grid-template-columns: repeat(var(--cnvs-preview-segmented-control-list-items), 1fr);
24
- }
25
-
26
-
27
- .cnvs-preview-segmented-control-item {
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-large);
32
- font-size: var(--cnvs-sys-font-size-subtext-large);
33
- letter-spacing: var(--cnvs-base-letter-spacing-150);
34
- text-align: start;
35
- padding-inline: var(--cnvs-sys-space-zero);
36
- gap: var(--cnvs-sys-space-x1);
37
- --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
38
- --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
39
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
40
- }
41
-
42
- .cnvs-preview-segmented-control-item:hover, .cnvs-preview-segmented-control-item.hover {
43
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
44
- --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
45
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
46
- }
47
-
48
- .cnvs-preview-segmented-control-item:active, .cnvs-preview-segmented-control-item.active {
49
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
50
- --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
51
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
52
- }
53
-
54
- .cnvs-preview-segmented-control-item:focus-visible, .cnvs-preview-segmented-control-item.focus {
55
- --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
56
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
57
- }
58
-
59
- .cnvs-preview-segmented-control-item:disabled, .cnvs-preview-segmented-control-item.disabled {
60
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
61
- }
62
-
63
- .cnvs-preview-segmented-control-item[aria-pressed='true'] {
64
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
65
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
66
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
67
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
68
- }
69
-
70
- .cnvs-preview-segmented-control-item[aria-pressed='true']:hover, .cnvs-preview-segmented-control-item[aria-pressed='true'].hover {
71
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
72
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
73
- }
74
-
75
- .cnvs-preview-segmented-control-item[aria-pressed='true']:disabled, .cnvs-preview-segmented-control-item[aria-pressed='true'].disabled {
76
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
77
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
78
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
79
- }
80
-
81
- .cnvs-preview-segmented-control-item :dir(rtl) svg {
82
- transform: scaleX(-1);
83
- }
84
-
85
-
86
- .cnvs-preview-segmented-control-item.size-large {
87
- height: var(--cnvs-sys-space-x10);
88
- gap: var(--cnvs-sys-space-x2);
89
- }
90
-
91
-
92
- .cnvs-preview-segmented-control-item.size-medium {
93
- height: var(--cnvs-sys-space-x8);
94
- }
95
-
96
-
97
- .cnvs-preview-segmented-control-item.size-small {
98
- font-family: var(--cnvs-sys-font-family-default);
99
- font-weight: var(--cnvs-sys-font-weight-bold);
100
- line-height: var(--cnvs-sys-line-height-subtext-medium);
101
- font-size: var(--cnvs-sys-font-size-subtext-medium);
102
- letter-spacing: var(--cnvs-base-letter-spacing-100);
103
- height: var(--cnvs-sys-space-x6);
104
- }
105
-
106
-
107
-
108
-
109
-
110
- .cnvs-preview-segmented-control-item.size-large.variant-iconOnly {
111
- min-width: var(--cnvs-sys-space-x10);
112
- }
113
-
114
-
115
- .cnvs-preview-segmented-control-item.size-large.variant-iconWithText {
116
- padding-inline: 1.25rem var(--cnvs-sys-space-x6);
117
- }
118
-
119
-
120
- .cnvs-preview-segmented-control-item.size-large.variant-textOnly {
121
- padding-inline: var(--cnvs-sys-space-x6);
122
- }
123
-
124
-
125
- .cnvs-preview-segmented-control-item.size-medium.variant-iconOnly {
126
- min-width: var(--cnvs-sys-space-x8);
127
- }
128
-
129
-
130
- .cnvs-preview-segmented-control-item.size-medium.variant-iconWithText {
131
- padding-inline: var(--cnvs-sys-space-x4) 1.25rem;
132
- }
133
-
134
-
135
- .cnvs-preview-segmented-control-item.size-medium.variant-textOnly {
136
- padding-inline: 1.25rem;
137
- }
138
-
139
-
140
- .cnvs-preview-segmented-control-item.size-small.variant-iconOnly {
141
- min-width: var(--cnvs-sys-space-x6);
142
- }
143
-
144
-
145
- .cnvs-preview-segmented-control-item.size-small.variant-iconWithText {
146
- padding-inline: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);
147
- }
148
-
149
-
150
- .cnvs-preview-segmented-control-item.size-small.variant-textOnly {
151
- padding-inline: var(--cnvs-sys-space-x3);
152
- }
153
-