@workday/canvas-kit-labs-css 16.2.0-0652-next.0 → 16.2.0-0654-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 (2) hide show
  1. package/accessory.css +375 -0
  2. package/package.json +2 -2
package/accessory.css ADDED
@@ -0,0 +1,375 @@
1
+ .cnvs-labs-accessory {
2
+ box-sizing: border-box;
3
+ display: inline-flex;
4
+ position: relative;
5
+ align-items: center;
6
+ justify-content: center;
7
+ flex-shrink: 0;
8
+ vertical-align: middle;
9
+ }
10
+
11
+ .cnvs-labs-accessory [data-part="accessory-icon"] {
12
+ position: absolute;
13
+ inset: 0;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ border-radius: var(--cnvs-corner-shape-shape);
18
+ corner-shape: superellipse(1.1);
19
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color);
20
+ }
21
+
22
+
23
+ .cnvs-labs-accessory.size-extra-small {
24
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
25
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
26
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
27
+ }
28
+
29
+ .cnvs-labs-accessory.size-extra-small [data-part="accessory-icon"] {
30
+ --cnvs-svg-size: var(--cnvs-base-size-200, 1rem);
31
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
32
+ border-width: 0;
33
+ }
34
+
35
+
36
+ .cnvs-labs-accessory.size-small {
37
+ width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
38
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
39
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
40
+ }
41
+
42
+ .cnvs-labs-accessory.size-small [data-part="accessory-icon"] {
43
+ --cnvs-svg-size: var(--cnvs-base-size-225, 1.125rem);
44
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
45
+ border-width: 0;
46
+ }
47
+
48
+
49
+ .cnvs-labs-accessory.size-medium {
50
+ width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
51
+ height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
52
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
53
+ }
54
+
55
+ .cnvs-labs-accessory.size-medium [data-part="accessory-icon"] {
56
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));
57
+ }
58
+
59
+
60
+ .cnvs-labs-accessory.size-large {
61
+ width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
62
+ height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
63
+ --cnvs-corner-shape-shape: var(--cnvs-base-size-125, 0.625rem);
64
+ }
65
+
66
+ .cnvs-labs-accessory.size-large [data-part="accessory-icon"] {
67
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-sm, 1.125rem);
68
+ }
69
+
70
+
71
+ .cnvs-labs-accessory.size-extra-large {
72
+ width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
73
+ height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
74
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
75
+ }
76
+
77
+ .cnvs-labs-accessory.size-extra-large [data-part="accessory-icon"] {
78
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
79
+ }
80
+
81
+
82
+ .cnvs-labs-accessory-calendar {
83
+ box-sizing: border-box;
84
+ }
85
+
86
+ .cnvs-labs-accessory-calendar [data-part="accessory-icon"] {
87
+ flex-direction: column;
88
+ gap: 0.075em;
89
+ overflow: hidden;
90
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));
91
+ border-width: 0.0625rem;
92
+ border-style: solid;
93
+ border-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
94
+ }
95
+
96
+ .cnvs-labs-accessory-calendar [data-part="accessory-calendar-month"] {
97
+ color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1))));
98
+ font-size: 0.25em;
99
+ font-weight: var(--cnvs-sys-font-weight-medium);
100
+ line-height: 1;
101
+ white-space: nowrap;
102
+ }
103
+
104
+ .cnvs-labs-accessory-calendar [data-part="accessory-calendar-date"] {
105
+ color: var(--cnvs-sys-color-fg-default);
106
+ font-size: 0.4em;
107
+ font-weight: var(--cnvs-sys-font-weight-normal);
108
+ line-height: 1;
109
+ white-space: nowrap;
110
+ }
111
+
112
+
113
+ .cnvs-labs-accessory-calendar.size-extra-small [data-part="accessory-icon"] {
114
+ font-size: var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));
115
+ }
116
+
117
+
118
+ .cnvs-labs-accessory-calendar.size-small [data-part="accessory-icon"] {
119
+ font-size: var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));
120
+ }
121
+
122
+
123
+ .cnvs-labs-accessory-calendar.size-medium [data-part="accessory-icon"] {
124
+ font-size: var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));
125
+ }
126
+
127
+
128
+ .cnvs-labs-accessory-calendar.size-large [data-part="accessory-icon"] {
129
+ font-size: var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));
130
+ }
131
+
132
+
133
+ .cnvs-labs-accessory-calendar.size-extra-large [data-part="accessory-icon"] {
134
+ font-size: var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));
135
+ }
136
+
137
+
138
+ .cnvs-labs-accessory-favicon {
139
+ box-sizing: border-box;
140
+ }
141
+
142
+ .cnvs-labs-accessory-favicon [data-part="accessory-icon"] {
143
+ overflow: hidden;
144
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));
145
+ border-width: 0.0625rem;
146
+ border-style: solid;
147
+ border-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
148
+ }
149
+
150
+ .cnvs-labs-accessory-favicon [data-part="accessory-favicon-image"] {
151
+ width: calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));
152
+ height: calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));
153
+ object-fit: contain;
154
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
155
+ corner-shape: superellipse(1.1);
156
+ }
157
+
158
+
159
+ .cnvs-labs-accessory-favicon.size-extra-small [data-part="accessory-icon"] {
160
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
161
+ border-width: 0;
162
+ }
163
+
164
+ .cnvs-labs-accessory-favicon.size-extra-small [data-part="accessory-favicon-image"] {
165
+ width: 100%;
166
+ height: 100%;
167
+ border-radius: 0;
168
+ }
169
+
170
+
171
+ .cnvs-labs-accessory-favicon.size-small [data-part="accessory-icon"] {
172
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
173
+ border-width: 0;
174
+ }
175
+
176
+ .cnvs-labs-accessory-favicon.size-small [data-part="accessory-favicon-image"] {
177
+ width: 100%;
178
+ height: 100%;
179
+ border-radius: 0;
180
+ }
181
+
182
+
183
+ .cnvs-labs-accessory-favicon.size-medium [data-part="accessory-icon"] {
184
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
185
+ border-width: 0;
186
+ }
187
+
188
+ .cnvs-labs-accessory-favicon.size-medium [data-part="accessory-favicon-image"] {
189
+ width: 100%;
190
+ height: 100%;
191
+ border-radius: 0;
192
+ }
193
+
194
+
195
+
196
+
197
+ .cnvs-labs-accessory-file {
198
+ box-sizing: border-box;
199
+ }
200
+
201
+ .cnvs-labs-accessory-file [data-part="accessory-icon"] {
202
+ background-color: var(--cnvs-labs-accessory-tile-background);
203
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color);
204
+ }
205
+
206
+
207
+ .cnvs-labs-accessory-file.type-pdf {
208
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-inverse);
209
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
210
+ }
211
+
212
+
213
+ .cnvs-labs-accessory-file.type-spreadsheet {
214
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-inverse);
215
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));
216
+ }
217
+
218
+
219
+ .cnvs-labs-accessory-file.type-document {
220
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-inverse);
221
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));
222
+ }
223
+
224
+
225
+ .cnvs-labs-accessory-file.type-presentation {
226
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84));
227
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));
228
+ }
229
+
230
+
231
+ .cnvs-labs-accessory-file.type-video {
232
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-default);
233
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
234
+ }
235
+
236
+
237
+ .cnvs-labs-accessory-file.type-file {
238
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-default);
239
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
240
+ }
241
+
242
+
243
+ .cnvs-labs-accessory-file.type-txt {
244
+ --cnvs-labs-accessory-icon-color: var(--cnvs-sys-color-fg-default);
245
+ --cnvs-labs-accessory-tile-background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
246
+ }
247
+
248
+
249
+ .cnvs-labs-accessory-file.outline [data-part="accessory-icon"] {
250
+ border-width: 0.0625rem;
251
+ border-style: solid;
252
+ border-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
253
+ }
254
+
255
+
256
+ .cnvs-labs-accessory-icon {
257
+ box-sizing: border-box;
258
+ }
259
+
260
+
261
+ .cnvs-labs-accessory-icon.variant-grey [data-part="accessory-icon"] {
262
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));
263
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));
264
+ }
265
+
266
+
267
+ .cnvs-labs-accessory-icon.variant-green [data-part="accessory-icon"] {
268
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)));
269
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-green-800, oklch(0.3955 0.1156 147.66 / 1)));
270
+ }
271
+
272
+
273
+ .cnvs-labs-accessory-icon.variant-blue [data-part="accessory-icon"] {
274
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))));
275
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1))));
276
+ }
277
+
278
+
279
+ .cnvs-labs-accessory-icon.variant-purple [data-part="accessory-icon"] {
280
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)));
281
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-purple-700, oklch(0.476 0.156 313.2 / 1)));
282
+ }
283
+
284
+
285
+ .cnvs-labs-accessory-icon.variant-amber [data-part="accessory-icon"] {
286
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))));
287
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1)));
288
+ }
289
+
290
+
291
+ .cnvs-labs-accessory-icon.variant-magenta [data-part="accessory-icon"] {
292
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)));
293
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-magenta-800, oklch(0.4011 0.1269 344.4 / 1)));
294
+ }
295
+
296
+
297
+ .cnvs-labs-accessory-icon.variant-red [data-part="accessory-icon"] {
298
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)));
299
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1))));
300
+ }
301
+
302
+
303
+ .cnvs-labs-accessory-icon.variant-orange [data-part="accessory-icon"] {
304
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)));
305
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-orange-700, oklch(0.4689 0.1456 40.5 / 1)));
306
+ }
307
+
308
+
309
+ .cnvs-labs-accessory-icon.variant-outline [data-part="accessory-icon"] {
310
+ background-color: var(--cnvs-labs-accessory-tile-background, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))));
311
+ --cnvs-system-icon-color: var(--cnvs-labs-accessory-icon-color, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));
312
+ border-width: 0.0625rem;
313
+ border-style: solid;
314
+ border-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
315
+ }
316
+
317
+
318
+
319
+
320
+
321
+
322
+
323
+ .cnvs-labs-accessory-icon.size-extraSmall [data-part="accessory-icon"] {
324
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
325
+ border-width: 0;
326
+ }
327
+
328
+
329
+ .cnvs-labs-accessory-icon.size-small [data-part="accessory-icon"] {
330
+ background-color: var(--cnvs-labs-accessory-tile-background, transparent);
331
+ border-width: 0;
332
+ }
333
+
334
+
335
+ .cnvs-labs-accessory-media {
336
+ box-sizing: border-box;
337
+ background-color: var(--cnvs-labs-accessory-media-background, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));
338
+ }
339
+
340
+ .cnvs-labs-accessory-media [data-part="accessory-media-image"] {
341
+ position: absolute;
342
+ inset: 0;
343
+ width: 100%;
344
+ height: 100%;
345
+ object-fit: cover;
346
+ overflow: hidden;
347
+ border-radius: var(--cnvs-corner-shape-shape);
348
+ corner-shape: superellipse(1.1);
349
+ }
350
+
351
+ .cnvs-labs-accessory-media [data-part="accessory-media-scrim"] {
352
+ position: absolute;
353
+ inset: 0;
354
+ background-color: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
355
+ border-radius: var(--cnvs-corner-shape-shape);
356
+ corner-shape: superellipse(1.1);
357
+ pointer-events: none;
358
+ }
359
+
360
+
361
+ .cnvs-labs-accessory-media.image-loaded-false [data-part="accessory-media-image"] {
362
+ display: none;
363
+ }
364
+
365
+
366
+
367
+ .cnvs-labs-accessory-media.object-fit-cover [data-part="accessory-media-image"] {
368
+ object-fit: cover;
369
+ }
370
+
371
+
372
+ .cnvs-labs-accessory-media.object-fit-contain [data-part="accessory-media-image"] {
373
+ object-fit: contain;
374
+ }
375
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-css",
3
- "version": "16.2.0-0652-next.0",
3
+ "version": "16.2.0-0654-next.0",
4
4
  "type": "module",
5
5
  "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
6
6
  "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
26
26
  "components",
27
27
  "workday"
28
28
  ],
29
- "gitHead": "113813ec15455899fa94d617f8580a9e69e1cc7b"
29
+ "gitHead": "e022131cf84954c1a0dc8b47b4c32dd0bebb07ff"
30
30
  }