@workday/canvas-kit-labs-react 16.2.1 → 16.2.3
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.
- package/dist/commonjs/accessory/lib/Accessory.js +6 -6
- package/dist/commonjs/accessory/lib/AccessoryCalendar.js +6 -6
- package/dist/commonjs/accessory/lib/AccessoryFavicon.js +6 -6
- package/dist/commonjs/accessory/lib/AccessoryFile.js +9 -9
- package/dist/commonjs/accessory/lib/AccessoryIcon.js +17 -17
- package/dist/commonjs/accessory/lib/AccessoryMedia.js +5 -5
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/commonjs/kbd/lib/KBD.js +6 -6
- package/dist/commonjs/kbd/lib/KBDItem.js +6 -6
- package/dist/commonjs/selection-group/lib/SelectionGroupIcon.js +1 -1
- package/dist/commonjs/selection-group/lib/SelectionGroupItem.js +4 -4
- package/dist/commonjs/selection-group/lib/SelectionGroupList.js +6 -6
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/accessory/lib/Accessory.js +6 -6
- package/dist/es6/accessory/lib/AccessoryCalendar.js +6 -6
- package/dist/es6/accessory/lib/AccessoryFavicon.js +6 -6
- package/dist/es6/accessory/lib/AccessoryFile.js +9 -9
- package/dist/es6/accessory/lib/AccessoryIcon.js +17 -17
- package/dist/es6/accessory/lib/AccessoryMedia.js +5 -5
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/es6/kbd/lib/KBD.js +6 -6
- package/dist/es6/kbd/lib/KBDItem.js +6 -6
- package/dist/es6/selection-group/lib/SelectionGroupIcon.js +1 -1
- package/dist/es6/selection-group/lib/SelectionGroupItem.js +4 -4
- package/dist/es6/selection-group/lib/SelectionGroupList.js +6 -6
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
|
@@ -20,14 +20,14 @@ exports.accessoryStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
20
20
|
parts: {
|
|
21
21
|
icon: 'accessory-icon',
|
|
22
22
|
},
|
|
23
|
-
base: { name: "
|
|
23
|
+
base: { name: "23z6h7", styles: "box-sizing:border-box;display:inline-flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;[data-part=\"accessory-icon\"]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
|
|
24
24
|
modifiers: {
|
|
25
25
|
size: {
|
|
26
|
-
extraSmall: { name: "
|
|
27
|
-
small: { name: "
|
|
28
|
-
medium: { name: "
|
|
29
|
-
large: { name: "
|
|
30
|
-
extraLarge: { name: "
|
|
26
|
+
extraSmall: { name: "qsall", styles: "width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-200, 1rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
|
|
27
|
+
small: { name: "q27p1", styles: "width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-225, 1.125rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
|
|
28
|
+
medium: { name: "26i7t0", styles: "width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));}" },
|
|
29
|
+
large: { name: "16f7n6", styles: "width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--shape-corner-shape-ccab68:var(--cnvs-base-size-125, 0.625rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);}" },
|
|
30
|
+
extraLarge: { name: "2576pv", styles: "width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));}" }
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
}, "accessory-05fc46");
|
|
@@ -17,7 +17,7 @@ exports.accessoryCalendarStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
17
17
|
month: 'accessory-calendar-month',
|
|
18
18
|
date: 'accessory-calendar-date',
|
|
19
19
|
},
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "35fnmm", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{flex-direction:column;gap:0.075em;overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-calendar-month\"]{color:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1))));font-size:0.25em;font-weight:var(--cnvs-sys-font-weight-medium);line-height:1;white-space:nowrap;}[data-part=\"accessory-calendar-date\"]{color:var(--cnvs-sys-color-fg-default);font-size:0.4em;font-weight:var(--cnvs-sys-font-weight-normal);line-height:1;white-space:nowrap;}" },
|
|
21
21
|
modifiers: {
|
|
22
22
|
/**
|
|
23
23
|
* The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
|
|
@@ -25,11 +25,11 @@ exports.accessoryCalendarStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
25
25
|
* do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
|
|
26
26
|
*/
|
|
27
27
|
size: {
|
|
28
|
-
extraSmall: { name: "
|
|
29
|
-
small: { name: "
|
|
30
|
-
medium: { name: "
|
|
31
|
-
large: { name: "
|
|
32
|
-
extraLarge: { name: "
|
|
28
|
+
extraSmall: { name: "2bxq2u", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));}" },
|
|
29
|
+
small: { name: "3txvu3", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));}" },
|
|
30
|
+
medium: { name: "4a8ago", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));}" },
|
|
31
|
+
large: { name: "mxz07", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));}" },
|
|
32
|
+
extraLarge: { name: "v55t4", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));}" }
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
defaultModifiers: {
|
|
@@ -42,14 +42,14 @@ exports.accessoryFaviconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
42
42
|
icon: 'accessory-icon',
|
|
43
43
|
image: 'accessory-favicon-image',
|
|
44
44
|
},
|
|
45
|
-
base: { name: "
|
|
45
|
+
base: { name: "3d9kk0", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-favicon-image\"]{width:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));height:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));object-fit:contain;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));corner-shape:superellipse(1.1);}" },
|
|
46
46
|
modifiers: {
|
|
47
47
|
size: {
|
|
48
|
-
extraSmall: { name: "
|
|
49
|
-
small: { name: "
|
|
50
|
-
medium: { name: "
|
|
51
|
-
large: { name: "
|
|
52
|
-
extraLarge: { name: "
|
|
48
|
+
extraSmall: { name: "1oo4e", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
49
|
+
small: { name: "2z8odn", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
50
|
+
medium: { name: "31hfin", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
51
|
+
large: { name: "2q1h11", styles: "" },
|
|
52
|
+
extraLarge: { name: "3uppww", styles: "" }
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
defaultModifiers: {
|
|
@@ -17,19 +17,19 @@ exports.accessoryFileStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
17
17
|
parts: {
|
|
18
18
|
icon: 'accessory-icon',
|
|
19
19
|
},
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "3vub2t", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
|
|
21
21
|
modifiers: {
|
|
22
22
|
type: {
|
|
23
|
-
pdf: { name: "
|
|
24
|
-
spreadsheet: { name: "
|
|
25
|
-
document: { name: "
|
|
26
|
-
presentation: { name: "
|
|
27
|
-
video: { name: "
|
|
28
|
-
file: { name: "
|
|
29
|
-
txt: { name: "
|
|
23
|
+
pdf: { name: "1667cj", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));" },
|
|
24
|
+
spreadsheet: { name: "3st9bv", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));" },
|
|
25
|
+
document: { name: "1ulum2", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));" },
|
|
26
|
+
presentation: { name: "3xz5jd", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84));--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));" },
|
|
27
|
+
video: { name: "3j2sz3", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
|
|
28
|
+
file: { name: "2p7xx3", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
|
|
29
|
+
txt: { name: "4djoj1", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" }
|
|
30
30
|
},
|
|
31
31
|
outline: {
|
|
32
|
-
true: { name: "
|
|
32
|
+
true: { name: "4a8lqp", styles: "[data-part=\"accessory-icon\"]{border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
defaultModifiers: {
|
|
@@ -16,35 +16,35 @@ exports.accessoryIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
16
16
|
parts: {
|
|
17
17
|
icon: 'accessory-icon',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "j3x46", styles: "box-sizing:border-box;" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
variant: {
|
|
22
|
-
grey: { name: "
|
|
23
|
-
green: { name: "
|
|
24
|
-
blue: { name: "
|
|
25
|
-
purple: { name: "
|
|
26
|
-
amber: { name: "
|
|
27
|
-
magenta: { name: "
|
|
28
|
-
red: { name: "
|
|
29
|
-
orange: { name: "
|
|
30
|
-
outline: { name: "
|
|
22
|
+
grey: { name: "3hp36n", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));}" },
|
|
23
|
+
green: { name: "3yzmv", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-green-800, oklch(0.3955 0.1156 147.66 / 1)));}" },
|
|
24
|
+
blue: { name: "y0vs7", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1))));}" },
|
|
25
|
+
purple: { name: "3lo69c", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-purple-700, oklch(0.476 0.156 313.2 / 1)));}" },
|
|
26
|
+
amber: { name: "fb2cp", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1)));}" },
|
|
27
|
+
magenta: { name: "18ormp", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-magenta-800, oklch(0.4011 0.1269 344.4 / 1)));}" },
|
|
28
|
+
red: { name: "2yp88u", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1))));}" },
|
|
29
|
+
orange: { name: "261woq", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-orange-700, oklch(0.4689 0.1456 40.5 / 1)));}" },
|
|
30
|
+
outline: { name: "10l2kj", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
|
|
31
31
|
},
|
|
32
32
|
size: {
|
|
33
|
-
extraSmall: { name: "
|
|
34
|
-
small: { name: "
|
|
35
|
-
medium: { name: "
|
|
36
|
-
large: { name: "
|
|
37
|
-
extraLarge: { name: "
|
|
33
|
+
extraSmall: { name: "14pfu4", styles: "" },
|
|
34
|
+
small: { name: "350pyb", styles: "" },
|
|
35
|
+
medium: { name: "2ifw7d", styles: "" },
|
|
36
|
+
large: { name: "qc251", styles: "" },
|
|
37
|
+
extraLarge: { name: "1cgcui", styles: "" }
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
compound: [
|
|
41
41
|
{
|
|
42
42
|
modifiers: { size: 'extraSmall' },
|
|
43
|
-
styles: { name: "
|
|
43
|
+
styles: { name: "5i8dv", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
modifiers: { size: 'small' },
|
|
47
|
-
styles: { name: "
|
|
47
|
+
styles: { name: "1whhdl", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
|
|
48
48
|
}
|
|
49
49
|
]
|
|
50
50
|
}, "accessory-icon-b2d5b9");
|
|
@@ -23,15 +23,15 @@ exports.accessoryMediaStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
23
23
|
image: 'accessory-media-image',
|
|
24
24
|
scrim: 'accessory-media-scrim',
|
|
25
25
|
},
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "y2c4y", styles: "box-sizing:border-box;background-color:var(--background-accessory-media-9cf347, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));[data-part=\"accessory-media-image\"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);}[data-part=\"accessory-media-scrim\"]{position:absolute;inset:0;background-color:var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);pointer-events:none;}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
imageLoaded: {
|
|
29
|
-
false: { name: "
|
|
30
|
-
true: { name: "
|
|
29
|
+
false: { name: "401fzm", styles: "[data-part=\"accessory-media-image\"]{display:none;}" },
|
|
30
|
+
true: { name: "2q1gau", styles: "" }
|
|
31
31
|
},
|
|
32
32
|
objectFit: {
|
|
33
|
-
cover: { name: "
|
|
34
|
-
contain: { name: "
|
|
33
|
+
cover: { name: "40k6f5", styles: "[data-part=\"accessory-media-image\"]{object-fit:cover;}" },
|
|
34
|
+
contain: { name: "4b14o4", styles: "[data-part=\"accessory-media-image\"]{object-fit:contain;}" }
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}, "accessory-media-9cf347");
|
|
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.legacy.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.legacy.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "224dss", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "
|
|
32
|
+
inverse: { name: "4204o6", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "3wfct9", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
|
|
36
|
+
false: { name: "2exggg", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
compound: [
|
|
40
40
|
{
|
|
41
41
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "4d1m08", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}, "a-i-ingress-button-5576f1");
|
|
@@ -9,16 +9,16 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
9
9
|
const KBDItem_1 = require("./KBDItem");
|
|
10
10
|
const useKBDModel_1 = require("./useKBDModel");
|
|
11
11
|
exports.kbdStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "3fovg6", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
variant: {
|
|
15
|
-
plain: { name: "
|
|
16
|
-
default: { name: "
|
|
15
|
+
plain: { name: "2mfy6x", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
|
|
16
|
+
default: { name: "1b51lw", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
|
-
large: { name: "
|
|
20
|
-
medium: { name: "
|
|
21
|
-
small: { name: "
|
|
19
|
+
large: { name: "3kqov1", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
|
|
20
|
+
medium: { name: "1rlpvj", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
|
|
21
|
+
small: { name: "3skwjm", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}, "kbd-482771");
|
|
@@ -9,11 +9,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
9
9
|
const useKBDModel_1 = require("./useKBDModel");
|
|
10
10
|
exports.kbdItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
11
|
extends: common_1.cornerShapeStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "ziiaz", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
variant: {
|
|
15
|
-
plain: { name: "
|
|
16
|
-
default: { name: "
|
|
15
|
+
plain: { name: "374d4b", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
|
|
16
|
+
default: { name: "2vgx9d", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
compound: [
|
|
@@ -22,21 +22,21 @@ exports.kbdItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
22
22
|
size: 'large',
|
|
23
23
|
variant: 'default',
|
|
24
24
|
},
|
|
25
|
-
styles: { name: "
|
|
25
|
+
styles: { name: "b09jz", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
modifiers: {
|
|
29
29
|
size: 'medium',
|
|
30
30
|
variant: 'default',
|
|
31
31
|
},
|
|
32
|
-
styles: { name: "
|
|
32
|
+
styles: { name: "1ghqrv", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
modifiers: {
|
|
36
36
|
size: 'small',
|
|
37
37
|
variant: 'default',
|
|
38
38
|
},
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "77t5g", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "kbd-item-9a5f62");
|
|
@@ -7,7 +7,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
|
7
7
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
8
|
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
9
9
|
exports.selectionGroupIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "oxixx", styles: "box-sizing:border-box;flex-shrink:0;" }
|
|
11
11
|
}, "selection-group-icon-6bc986");
|
|
12
12
|
/**
|
|
13
13
|
* The icon is always rendered, in both modes and in both selected states, so items never shift
|
|
@@ -15,12 +15,12 @@ exports.selectionGroupItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
15
15
|
parts: {
|
|
16
16
|
label: 'selection-group-item-label',
|
|
17
17
|
},
|
|
18
|
-
base: { name: "
|
|
18
|
+
base: { name: "4dqrla", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;align-items:center;gap:var(--cnvs-base-size-75, 0.375rem);border:0.0625rem solid var(--cnvs-sys-color-border-default);padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);cursor:pointer;text-align:start;transition:background-color 80ms ease, color 80ms ease, border-color 80ms ease;--color-system-icon-c9acc3:currentColor;--accentColor-system-icon-c9acc3:currentColor;[data-part=\"selection-group-item-label\"]{white-space:nowrap;}&:not([aria-checked=\"true\"]):is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not([aria-checked=\"true\"]):is(:active, .active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(:focus-visible, .focus){box-shadow:0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:is(:disabled, .disabled){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}}&[aria-checked=\"true\"]{background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));border:0.0625rem solid transparent;color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));&:is(:hover, .hover){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:active, .active){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" },
|
|
19
19
|
modifiers: {
|
|
20
20
|
width: {
|
|
21
|
-
content: { name: "
|
|
22
|
-
equal: { name: "
|
|
23
|
-
column: { name: "
|
|
21
|
+
content: { name: "2m31tr", styles: "width:fit-content;" },
|
|
22
|
+
equal: { name: "3a6sfb", styles: "width:100%;" },
|
|
23
|
+
column: { name: "3nvxh4", styles: "width:100%;" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}, "selection-group-item-15e2bc");
|
|
@@ -9,18 +9,18 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
9
9
|
const useSelectionGroupModel_1 = require("./hooks/useSelectionGroupModel");
|
|
10
10
|
exports.selectionGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
11
|
extends: common_1.cornerShapeStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "2xekv8", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-wrap:wrap;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:fit-content;border:0.125rem solid transparent;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));transition:100ms border-color;" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
width: {
|
|
15
|
-
content: { name: "
|
|
15
|
+
content: { name: "xjx3j", styles: "" },
|
|
16
16
|
// `1fr` auto columns inside a `fit-content` grid all resolve to the widest item's
|
|
17
17
|
// max-content width, which sizes every item to the longest label without measuring the DOM.
|
|
18
|
-
equal: { name: "
|
|
19
|
-
column: { name: "
|
|
18
|
+
equal: { name: "1walvz", styles: "display:grid;grid-auto-flow:column;grid-auto-columns:1fr;" },
|
|
19
|
+
column: { name: "ppj3m", styles: "flex-direction:column;flex-wrap:nowrap;width:100%;" }
|
|
20
20
|
},
|
|
21
21
|
error: {
|
|
22
|
-
error: { name: "
|
|
23
|
-
caution: { name: "
|
|
22
|
+
error: { name: "17ikr3", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
|
|
23
|
+
caution: { name: "qp138", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}, "selection-group-list-25bb89");
|
|
@@ -17,14 +17,14 @@ export const accessoryStencil = createStencil({
|
|
|
17
17
|
parts: {
|
|
18
18
|
icon: 'accessory-icon',
|
|
19
19
|
},
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "23z6h7", styles: "box-sizing:border-box;display:inline-flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;[data-part=\"accessory-icon\"]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
|
|
21
21
|
modifiers: {
|
|
22
22
|
size: {
|
|
23
|
-
extraSmall: { name: "
|
|
24
|
-
small: { name: "
|
|
25
|
-
medium: { name: "
|
|
26
|
-
large: { name: "
|
|
27
|
-
extraLarge: { name: "
|
|
23
|
+
extraSmall: { name: "qsall", styles: "width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-200, 1rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
|
|
24
|
+
small: { name: "q27p1", styles: "width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-base-size-225, 1.125rem);background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" },
|
|
25
|
+
medium: { name: "26i7t0", styles: "width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));}" },
|
|
26
|
+
large: { name: "16f7n6", styles: "width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--shape-corner-shape-ccab68:var(--cnvs-base-size-125, 0.625rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);}" },
|
|
27
|
+
extraLarge: { name: "2576pv", styles: "width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);[data-part=\"accessory-icon\"]{--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));}" }
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}, "accessory-05fc46");
|
|
@@ -14,7 +14,7 @@ export const accessoryCalendarStencil = createStencil({
|
|
|
14
14
|
month: 'accessory-calendar-month',
|
|
15
15
|
date: 'accessory-calendar-date',
|
|
16
16
|
},
|
|
17
|
-
base: { name: "
|
|
17
|
+
base: { name: "35fnmm", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{flex-direction:column;gap:0.075em;overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-calendar-month\"]{color:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1))));font-size:0.25em;font-weight:var(--cnvs-sys-font-weight-medium);line-height:1;white-space:nowrap;}[data-part=\"accessory-calendar-date\"]{color:var(--cnvs-sys-color-fg-default);font-size:0.4em;font-weight:var(--cnvs-sys-font-weight-normal);line-height:1;white-space:nowrap;}" },
|
|
18
18
|
modifiers: {
|
|
19
19
|
/**
|
|
20
20
|
* The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
|
|
@@ -22,11 +22,11 @@ export const accessoryCalendarStencil = createStencil({
|
|
|
22
22
|
* do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
|
|
23
23
|
*/
|
|
24
24
|
size: {
|
|
25
|
-
extraSmall: { name: "
|
|
26
|
-
small: { name: "
|
|
27
|
-
medium: { name: "
|
|
28
|
-
large: { name: "
|
|
29
|
-
extraLarge: { name: "
|
|
25
|
+
extraSmall: { name: "2bxq2u", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));}" },
|
|
26
|
+
small: { name: "3txvu3", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));}" },
|
|
27
|
+
medium: { name: "4a8ago", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));}" },
|
|
28
|
+
large: { name: "mxz07", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));}" },
|
|
29
|
+
extraLarge: { name: "v55t4", styles: "[data-part=\"accessory-icon\"]{font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));}" }
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
defaultModifiers: {
|
|
@@ -39,14 +39,14 @@ export const accessoryFaviconStencil = createStencil({
|
|
|
39
39
|
icon: 'accessory-icon',
|
|
40
40
|
image: 'accessory-favicon-image',
|
|
41
41
|
},
|
|
42
|
-
base: { name: "
|
|
42
|
+
base: { name: "3d9kk0", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{overflow:hidden;background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}[data-part=\"accessory-favicon-image\"]{width:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));height:calc(100% - var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)));object-fit:contain;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));corner-shape:superellipse(1.1);}" },
|
|
43
43
|
modifiers: {
|
|
44
44
|
size: {
|
|
45
|
-
extraSmall: { name: "
|
|
46
|
-
small: { name: "
|
|
47
|
-
medium: { name: "
|
|
48
|
-
large: { name: "
|
|
49
|
-
extraLarge: { name: "
|
|
45
|
+
extraSmall: { name: "1oo4e", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
46
|
+
small: { name: "2z8odn", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
47
|
+
medium: { name: "31hfin", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}[data-part=\"accessory-favicon-image\"]{width:100%;height:100%;border-radius:0;}" },
|
|
48
|
+
large: { name: "2q1h11", styles: "" },
|
|
49
|
+
extraLarge: { name: "3uppww", styles: "" }
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
defaultModifiers: {
|
|
@@ -14,19 +14,19 @@ export const accessoryFileStencil = createStencil({
|
|
|
14
14
|
parts: {
|
|
15
15
|
icon: 'accessory-icon',
|
|
16
16
|
},
|
|
17
|
-
base: { name: "
|
|
17
|
+
base: { name: "3vub2t", styles: "box-sizing:border-box;[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46);--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46);}" },
|
|
18
18
|
modifiers: {
|
|
19
19
|
type: {
|
|
20
|
-
pdf: { name: "
|
|
21
|
-
spreadsheet: { name: "
|
|
22
|
-
document: { name: "
|
|
23
|
-
presentation: { name: "
|
|
24
|
-
video: { name: "
|
|
25
|
-
file: { name: "
|
|
26
|
-
txt: { name: "
|
|
20
|
+
pdf: { name: "1667cj", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));" },
|
|
21
|
+
spreadsheet: { name: "3st9bv", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));" },
|
|
22
|
+
document: { name: "1ulum2", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-inverse);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));" },
|
|
23
|
+
presentation: { name: "3xz5jd", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84));--tileBackground-accessory-05fc46:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));" },
|
|
24
|
+
video: { name: "3j2sz3", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
|
|
25
|
+
file: { name: "2p7xx3", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" },
|
|
26
|
+
txt: { name: "4djoj1", styles: "--iconColor-accessory-05fc46:var(--cnvs-sys-color-fg-default);--tileBackground-accessory-05fc46:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));" }
|
|
27
27
|
},
|
|
28
28
|
outline: {
|
|
29
|
-
true: { name: "
|
|
29
|
+
true: { name: "4a8lqp", styles: "[data-part=\"accessory-icon\"]{border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
defaultModifiers: {
|
|
@@ -13,35 +13,35 @@ export const accessoryIconStencil = createStencil({
|
|
|
13
13
|
parts: {
|
|
14
14
|
icon: 'accessory-icon',
|
|
15
15
|
},
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "j3x46", styles: "box-sizing:border-box;" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
variant: {
|
|
19
|
-
grey: { name: "
|
|
20
|
-
green: { name: "
|
|
21
|
-
blue: { name: "
|
|
22
|
-
purple: { name: "
|
|
23
|
-
amber: { name: "
|
|
24
|
-
magenta: { name: "
|
|
25
|
-
red: { name: "
|
|
26
|
-
orange: { name: "
|
|
27
|
-
outline: { name: "
|
|
19
|
+
grey: { name: "3hp36n", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));}" },
|
|
20
|
+
green: { name: "3yzmv", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-green-800, oklch(0.3955 0.1156 147.66 / 1)));}" },
|
|
21
|
+
blue: { name: "y0vs7", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1))));}" },
|
|
22
|
+
purple: { name: "3lo69c", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-purple-a50, oklch(0.5645 0.2935 302.36 / 0.09)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-purple-700, oklch(0.476 0.156 313.2 / 1)));}" },
|
|
23
|
+
amber: { name: "fb2cp", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1)));}" },
|
|
24
|
+
magenta: { name: "18ormp", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-magenta-a50, oklch(0.7044 0.3188 328.33 / 0.08)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-magenta-800, oklch(0.4011 0.1269 344.4 / 1)));}" },
|
|
25
|
+
red: { name: "2yp88u", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1))));}" },
|
|
26
|
+
orange: { name: "261woq", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-base-palette-orange-a50, oklch(0.7555 0.1769 59.35 / 0.17)));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-orange-700, oklch(0.4689 0.1456 40.5 / 1)));}" },
|
|
27
|
+
outline: { name: "10l2kj", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))));--color-system-icon-c9acc3:var(--iconColor-accessory-05fc46, var(--cnvs-base-palette-slate-800, oklch(0.3685 0.0218 256.4 / 1)));border-width:0.0625rem;border-style:solid;border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));}" }
|
|
28
28
|
},
|
|
29
29
|
size: {
|
|
30
|
-
extraSmall: { name: "
|
|
31
|
-
small: { name: "
|
|
32
|
-
medium: { name: "
|
|
33
|
-
large: { name: "
|
|
34
|
-
extraLarge: { name: "
|
|
30
|
+
extraSmall: { name: "14pfu4", styles: "" },
|
|
31
|
+
small: { name: "350pyb", styles: "" },
|
|
32
|
+
medium: { name: "2ifw7d", styles: "" },
|
|
33
|
+
large: { name: "qc251", styles: "" },
|
|
34
|
+
extraLarge: { name: "1cgcui", styles: "" }
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
compound: [
|
|
38
38
|
{
|
|
39
39
|
modifiers: { size: 'extraSmall' },
|
|
40
|
-
styles: { name: "
|
|
40
|
+
styles: { name: "5i8dv", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
modifiers: { size: 'small' },
|
|
44
|
-
styles: { name: "
|
|
44
|
+
styles: { name: "1whhdl", styles: "[data-part=\"accessory-icon\"]{background-color:var(--tileBackground-accessory-05fc46, transparent);border-width:0;}" }
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}, "accessory-icon-b2d5b9");
|
|
@@ -17,15 +17,15 @@ export const accessoryMediaStencil = createStencil({
|
|
|
17
17
|
image: 'accessory-media-image',
|
|
18
18
|
scrim: 'accessory-media-scrim',
|
|
19
19
|
},
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "y2c4y", styles: "box-sizing:border-box;background-color:var(--background-accessory-media-9cf347, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))));[data-part=\"accessory-media-image\"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);}[data-part=\"accessory-media-scrim\"]{position:absolute;inset:0;background-color:var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);pointer-events:none;}" },
|
|
21
21
|
modifiers: {
|
|
22
22
|
imageLoaded: {
|
|
23
|
-
false: { name: "
|
|
24
|
-
true: { name: "
|
|
23
|
+
false: { name: "401fzm", styles: "[data-part=\"accessory-media-image\"]{display:none;}" },
|
|
24
|
+
true: { name: "2q1gau", styles: "" }
|
|
25
25
|
},
|
|
26
26
|
objectFit: {
|
|
27
|
-
cover: { name: "
|
|
28
|
-
contain: { name: "
|
|
27
|
+
cover: { name: "40k6f5", styles: "[data-part=\"accessory-media-image\"]{object-fit:cover;}" },
|
|
28
|
+
contain: { name: "4b14o4", styles: "[data-part=\"accessory-media-image\"]{object-fit:contain;}" }
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}, "accessory-media-9cf347");
|
|
@@ -23,20 +23,20 @@ const glowHappyHour = base.legacy.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.legacy.coral500; //'#FC5B05';
|
|
24
24
|
export const AIIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "224dss", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "4204o6", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "3wfct9", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
|
|
33
|
+
false: { name: "2exggg", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "4d1m08", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "a-i-ingress-button-5576f1");
|
package/dist/es6/kbd/lib/KBD.js
CHANGED
|
@@ -6,16 +6,16 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { KBDItem } from './KBDItem';
|
|
7
7
|
import { useKBDModel } from './useKBDModel';
|
|
8
8
|
export const kbdStencil = createStencil({
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "3fovg6", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
|
|
10
10
|
modifiers: {
|
|
11
11
|
variant: {
|
|
12
|
-
plain: { name: "
|
|
13
|
-
default: { name: "
|
|
12
|
+
plain: { name: "2mfy6x", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
|
|
13
|
+
default: { name: "1b51lw", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
large: { name: "
|
|
17
|
-
medium: { name: "
|
|
18
|
-
small: { name: "
|
|
16
|
+
large: { name: "3kqov1", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
|
|
17
|
+
medium: { name: "1rlpvj", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
|
|
18
|
+
small: { name: "3skwjm", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}, "kbd-482771");
|
|
@@ -6,11 +6,11 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { useKBDModel } from './useKBDModel';
|
|
7
7
|
export const kbdItemStencil = createStencil({
|
|
8
8
|
extends: cornerShapeStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "ziiaz", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
|
|
10
10
|
modifiers: {
|
|
11
11
|
variant: {
|
|
12
|
-
plain: { name: "
|
|
13
|
-
default: { name: "
|
|
12
|
+
plain: { name: "374d4b", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
|
|
13
|
+
default: { name: "2vgx9d", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
compound: [
|
|
@@ -19,21 +19,21 @@ export const kbdItemStencil = createStencil({
|
|
|
19
19
|
size: 'large',
|
|
20
20
|
variant: 'default',
|
|
21
21
|
},
|
|
22
|
-
styles: { name: "
|
|
22
|
+
styles: { name: "b09jz", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
modifiers: {
|
|
26
26
|
size: 'medium',
|
|
27
27
|
variant: 'default',
|
|
28
28
|
},
|
|
29
|
-
styles: { name: "
|
|
29
|
+
styles: { name: "1ghqrv", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
modifiers: {
|
|
33
33
|
size: 'small',
|
|
34
34
|
variant: 'default',
|
|
35
35
|
},
|
|
36
|
-
styles: { name: "
|
|
36
|
+
styles: { name: "77t5g", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
|
|
37
37
|
}
|
|
38
38
|
]
|
|
39
39
|
}, "kbd-item-9a5f62");
|
|
@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
|
4
4
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { checkCircleFillIcon, checkboxFillIcon, circleIcon, squareIcon, } from '@workday/canvas-system-icons-web';
|
|
6
6
|
export const selectionGroupIconStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "oxixx", styles: "box-sizing:border-box;flex-shrink:0;" }
|
|
8
8
|
}, "selection-group-icon-6bc986");
|
|
9
9
|
/**
|
|
10
10
|
* The icon is always rendered, in both modes and in both selected states, so items never shift
|
|
@@ -12,12 +12,12 @@ export const selectionGroupItemStencil = createStencil({
|
|
|
12
12
|
parts: {
|
|
13
13
|
label: 'selection-group-item-label',
|
|
14
14
|
},
|
|
15
|
-
base: { name: "
|
|
15
|
+
base: { name: "4dqrla", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;align-items:center;gap:var(--cnvs-base-size-75, 0.375rem);border:0.0625rem solid var(--cnvs-sys-color-border-default);padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);cursor:pointer;text-align:start;transition:background-color 80ms ease, color 80ms ease, border-color 80ms ease;--color-system-icon-c9acc3:currentColor;--accentColor-system-icon-c9acc3:currentColor;[data-part=\"selection-group-item-label\"]{white-space:nowrap;}&:not([aria-checked=\"true\"]):is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not([aria-checked=\"true\"]):is(:active, .active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(:focus-visible, .focus){box-shadow:0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:is(:disabled, .disabled){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}}&[aria-checked=\"true\"]{background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));border:0.0625rem solid transparent;color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));&:is(:hover, .hover){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:active, .active){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" },
|
|
16
16
|
modifiers: {
|
|
17
17
|
width: {
|
|
18
|
-
content: { name: "
|
|
19
|
-
equal: { name: "
|
|
20
|
-
column: { name: "
|
|
18
|
+
content: { name: "2m31tr", styles: "width:fit-content;" },
|
|
19
|
+
equal: { name: "3a6sfb", styles: "width:100%;" },
|
|
20
|
+
column: { name: "3nvxh4", styles: "width:100%;" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}, "selection-group-item-15e2bc");
|
|
@@ -6,18 +6,18 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { useSelectionGroupModel } from './hooks/useSelectionGroupModel';
|
|
7
7
|
export const selectionGroupListStencil = createStencil({
|
|
8
8
|
extends: cornerShapeStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "2xekv8", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-wrap:wrap;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:fit-content;border:0.125rem solid transparent;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));transition:100ms border-color;" },
|
|
10
10
|
modifiers: {
|
|
11
11
|
width: {
|
|
12
|
-
content: { name: "
|
|
12
|
+
content: { name: "xjx3j", styles: "" },
|
|
13
13
|
// `1fr` auto columns inside a `fit-content` grid all resolve to the widest item's
|
|
14
14
|
// max-content width, which sizes every item to the longest label without measuring the DOM.
|
|
15
|
-
equal: { name: "
|
|
16
|
-
column: { name: "
|
|
15
|
+
equal: { name: "1walvz", styles: "display:grid;grid-auto-flow:column;grid-auto-columns:1fr;" },
|
|
16
|
+
column: { name: "ppj3m", styles: "flex-direction:column;flex-wrap:nowrap;width:100%;" }
|
|
17
17
|
},
|
|
18
18
|
error: {
|
|
19
|
-
error: { name: "
|
|
20
|
-
caution: { name: "
|
|
19
|
+
error: { name: "17ikr3", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
|
|
20
|
+
caution: { name: "qp138", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}, "selection-group-list-25bb89");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '16.2.
|
|
1
|
+
export const version = '16.2.3';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "16.2.
|
|
3
|
+
"version": "16.2.3",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^16.2.
|
|
52
|
-
"@workday/canvas-kit-styling": "^16.2.
|
|
51
|
+
"@workday/canvas-kit-react": "^16.2.3",
|
|
52
|
+
"@workday/canvas-kit-styling": "^16.2.3",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
54
54
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
55
55
|
"@workday/design-assets-types": "^0.3.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@types/lodash.flatten": "^4.4.6"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "dd5a27ab062642ac115722808e063150f7866115"
|
|
64
64
|
}
|