@workday/canvas-kit-labs-react 14.0.0-alpha.1196-next.0 → 14.0.0-alpha.1198-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.
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +5 -5
- package/dist/commonjs/search-form/lib/SearchForm.d.ts +5 -5
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +5 -5
- package/dist/es6/search-form/lib/SearchForm.d.ts +5 -5
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/package.json +5 -5
- package/search-form/lib/SearchForm.tsx +7 -7
|
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIAssistantIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "3iug9", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&: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, rgba(255,255,255,1)), 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: "219pjy", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "ojto4", styles: "--background-button-65cb05: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), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-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, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
36
|
+
false: { name: "4eb0n", 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: "av56u", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-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, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
@@ -205,7 +205,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
205
205
|
paddingInlineEnd: string;
|
|
206
206
|
maxWidth: string;
|
|
207
207
|
minWidth: number;
|
|
208
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
208
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
209
209
|
height: string;
|
|
210
210
|
display?: undefined;
|
|
211
211
|
margin?: undefined;
|
|
@@ -216,7 +216,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
216
216
|
bottom: number;
|
|
217
217
|
margin: number;
|
|
218
218
|
position: "relative";
|
|
219
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
219
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
220
220
|
transition: "background-color 120ms";
|
|
221
221
|
maxWidth: string;
|
|
222
222
|
minWidth: string;
|
|
@@ -232,7 +232,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
232
232
|
paddingInlineEnd: string;
|
|
233
233
|
maxWidth: string;
|
|
234
234
|
minWidth: number;
|
|
235
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
235
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
236
236
|
height: string;
|
|
237
237
|
};
|
|
238
238
|
};
|
|
@@ -387,8 +387,8 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
387
387
|
readonly closeButtonPart: "search-form-close-button";
|
|
388
388
|
}>) => {
|
|
389
389
|
"[data-part=\"search-form-input\"]": {
|
|
390
|
-
background: "--cnvs-sys-color-bg-transparent";
|
|
391
|
-
backgroundFocus: "--cnvs-sys-color-bg-transparent";
|
|
390
|
+
background: "--cnvs-sys-color-bg-transparent-default";
|
|
391
|
+
backgroundFocus: "--cnvs-sys-color-bg-transparent-default";
|
|
392
392
|
color: "--cnvs-sys-color-text-default";
|
|
393
393
|
colorFocus: "--cnvs-sys-color-text-default";
|
|
394
394
|
placeholderColor: "--cnvs-sys-color-text-hint";
|
|
@@ -77,45 +77,45 @@ exports.searchFormStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
77
77
|
searchInput: 'search-form-input',
|
|
78
78
|
closeButtonPart: 'search-form-close-button',
|
|
79
79
|
},
|
|
80
|
-
base: { name: "
|
|
80
|
+
base: { name: "a30ih", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-150181, 7.5rem);max-width:var(--maxWidth-search-form-150181, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-150181, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-150181);min-width:var(--minWidth-search-form-150181);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-150181);color:var(--color-search-form-150181, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-150181, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-150181, var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-150181);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-150181, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-150181);}}}" },
|
|
81
81
|
modifiers: {
|
|
82
82
|
isHiddenSubmitSearchIcon: {
|
|
83
|
-
true: { name: "
|
|
83
|
+
true: { name: "rdnee", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
84
84
|
},
|
|
85
85
|
isHiddenOpenSeachIcon: {
|
|
86
|
-
true: { name: "
|
|
86
|
+
true: { name: "3uz5tx", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
87
87
|
},
|
|
88
88
|
isCollapsed: {
|
|
89
|
-
true: { name: "
|
|
90
|
-
false: { name: "
|
|
89
|
+
true: { name: "19w8k3", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}" },
|
|
90
|
+
false: { name: "142oqd", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
91
91
|
},
|
|
92
92
|
rightAlign: {
|
|
93
|
-
true: { name: "
|
|
93
|
+
true: { name: "2g3za1", styles: "text-align:right;" }
|
|
94
94
|
},
|
|
95
95
|
showForm: {
|
|
96
|
-
true: { name: "
|
|
97
|
-
false: { name: "
|
|
96
|
+
true: { name: "tgjji", styles: "" },
|
|
97
|
+
false: { name: "3o9ems", styles: "" }
|
|
98
98
|
},
|
|
99
99
|
grow: {
|
|
100
|
-
true: { name: "
|
|
100
|
+
true: { name: "ojpc0", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
101
101
|
},
|
|
102
102
|
searchTheme: {
|
|
103
103
|
// Light theme
|
|
104
|
-
light: { name: "
|
|
104
|
+
light: { name: "48mi8z", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
105
105
|
// Dark theme
|
|
106
|
-
dark: { name: "
|
|
106
|
+
dark: { name: "43ayo1", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
107
107
|
//Transparent theme
|
|
108
|
-
transparent: { name: "
|
|
108
|
+
transparent: { name: "1r3l0i", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
109
109
|
}
|
|
110
110
|
},
|
|
111
111
|
compound: [
|
|
112
112
|
{
|
|
113
113
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
114
|
-
styles: { name: "
|
|
114
|
+
styles: { name: "fwaln", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
115
115
|
},
|
|
116
116
|
{
|
|
117
117
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
118
|
-
styles: { name: "
|
|
118
|
+
styles: { name: "3aaowk", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
119
119
|
}
|
|
120
120
|
]
|
|
121
121
|
}, "search-form-150181");
|
|
@@ -23,20 +23,20 @@ const glowHappyHour = base.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
24
|
export const AIAssistantIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "3iug9", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&: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, rgba(255,255,255,1)), 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: "219pjy", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "ojto4", styles: "--background-button-65cb05: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), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-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, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "4eb0n", 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: "av56u", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-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, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
@@ -205,7 +205,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
205
205
|
paddingInlineEnd: string;
|
|
206
206
|
maxWidth: string;
|
|
207
207
|
minWidth: number;
|
|
208
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
208
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
209
209
|
height: string;
|
|
210
210
|
display?: undefined;
|
|
211
211
|
margin?: undefined;
|
|
@@ -216,7 +216,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
216
216
|
bottom: number;
|
|
217
217
|
margin: number;
|
|
218
218
|
position: "relative";
|
|
219
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
219
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
220
220
|
transition: "background-color 120ms";
|
|
221
221
|
maxWidth: string;
|
|
222
222
|
minWidth: string;
|
|
@@ -232,7 +232,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
232
232
|
paddingInlineEnd: string;
|
|
233
233
|
maxWidth: string;
|
|
234
234
|
minWidth: number;
|
|
235
|
-
backgroundColor: "--cnvs-sys-color-bg-transparent";
|
|
235
|
+
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
236
236
|
height: string;
|
|
237
237
|
};
|
|
238
238
|
};
|
|
@@ -387,8 +387,8 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
387
387
|
readonly closeButtonPart: "search-form-close-button";
|
|
388
388
|
}>) => {
|
|
389
389
|
"[data-part=\"search-form-input\"]": {
|
|
390
|
-
background: "--cnvs-sys-color-bg-transparent";
|
|
391
|
-
backgroundFocus: "--cnvs-sys-color-bg-transparent";
|
|
390
|
+
background: "--cnvs-sys-color-bg-transparent-default";
|
|
391
|
+
backgroundFocus: "--cnvs-sys-color-bg-transparent-default";
|
|
392
392
|
color: "--cnvs-sys-color-text-default";
|
|
393
393
|
colorFocus: "--cnvs-sys-color-text-default";
|
|
394
394
|
placeholderColor: "--cnvs-sys-color-text-hint";
|
|
@@ -48,45 +48,45 @@ export const searchFormStencil = createStencil({
|
|
|
48
48
|
searchInput: 'search-form-input',
|
|
49
49
|
closeButtonPart: 'search-form-close-button',
|
|
50
50
|
},
|
|
51
|
-
base: { name: "
|
|
51
|
+
base: { name: "a30ih", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-150181, 7.5rem);max-width:var(--maxWidth-search-form-150181, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-150181, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-150181);min-width:var(--minWidth-search-form-150181);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-150181);color:var(--color-search-form-150181, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-150181, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-150181, var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-150181);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-150181, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-150181);}}}" },
|
|
52
52
|
modifiers: {
|
|
53
53
|
isHiddenSubmitSearchIcon: {
|
|
54
|
-
true: { name: "
|
|
54
|
+
true: { name: "rdnee", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
55
55
|
},
|
|
56
56
|
isHiddenOpenSeachIcon: {
|
|
57
|
-
true: { name: "
|
|
57
|
+
true: { name: "3uz5tx", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isCollapsed: {
|
|
60
|
-
true: { name: "
|
|
61
|
-
false: { name: "
|
|
60
|
+
true: { name: "19w8k3", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}" },
|
|
61
|
+
false: { name: "142oqd", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
62
62
|
},
|
|
63
63
|
rightAlign: {
|
|
64
|
-
true: { name: "
|
|
64
|
+
true: { name: "2g3za1", styles: "text-align:right;" }
|
|
65
65
|
},
|
|
66
66
|
showForm: {
|
|
67
|
-
true: { name: "
|
|
68
|
-
false: { name: "
|
|
67
|
+
true: { name: "tgjji", styles: "" },
|
|
68
|
+
false: { name: "3o9ems", styles: "" }
|
|
69
69
|
},
|
|
70
70
|
grow: {
|
|
71
|
-
true: { name: "
|
|
71
|
+
true: { name: "ojpc0", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
72
72
|
},
|
|
73
73
|
searchTheme: {
|
|
74
74
|
// Light theme
|
|
75
|
-
light: { name: "
|
|
75
|
+
light: { name: "48mi8z", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
76
76
|
// Dark theme
|
|
77
|
-
dark: { name: "
|
|
77
|
+
dark: { name: "43ayo1", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
78
78
|
//Transparent theme
|
|
79
|
-
transparent: { name: "
|
|
79
|
+
transparent: { name: "1r3l0i", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
compound: [
|
|
83
83
|
{
|
|
84
84
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
85
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "fwaln", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
89
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "3aaowk", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
90
90
|
}
|
|
91
91
|
]
|
|
92
92
|
}, "search-form-150181");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1198-next.0",
|
|
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",
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1198-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1198-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
52
|
-
"@workday/canvas-tokens-web": "3.0.0-alpha.
|
|
52
|
+
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.10",
|
|
54
54
|
"chroma-js": "^2.2.0",
|
|
55
55
|
"lodash.flatten": "^4.4.0",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@types/lodash.flatten": "^4.4.6"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "572c629d372fc0a8bb31fb89afe8c12b1d99ea93"
|
|
62
62
|
}
|
|
@@ -291,7 +291,7 @@ export const searchFormStencil = createStencil({
|
|
|
291
291
|
bottom: 0,
|
|
292
292
|
margin: 0,
|
|
293
293
|
position: 'relative',
|
|
294
|
-
backgroundColor: system.color.bg.transparent,
|
|
294
|
+
backgroundColor: system.color.bg.transparent.default,
|
|
295
295
|
transition: 'background-color 120ms',
|
|
296
296
|
maxWidth: calc.add(system.space.x10, system.space.x2),
|
|
297
297
|
minWidth: calc.add(system.space.x10, system.space.x3),
|
|
@@ -310,7 +310,7 @@ export const searchFormStencil = createStencil({
|
|
|
310
310
|
paddingInlineEnd: calc.add(system.space.x10, system.space.x4),
|
|
311
311
|
maxWidth: 'none',
|
|
312
312
|
minWidth: 0,
|
|
313
|
-
backgroundColor: system.color.bg.transparent,
|
|
313
|
+
backgroundColor: system.color.bg.transparent.default,
|
|
314
314
|
height: cssVar(height, system.space.x10),
|
|
315
315
|
},
|
|
316
316
|
}),
|
|
@@ -383,8 +383,8 @@ export const searchFormStencil = createStencil({
|
|
|
383
383
|
//Transparent theme
|
|
384
384
|
transparent: ({searchInputPart}) => ({
|
|
385
385
|
[searchInputPart]: {
|
|
386
|
-
background: system.color.bg.transparent,
|
|
387
|
-
backgroundFocus: system.color.bg.transparent,
|
|
386
|
+
background: system.color.bg.transparent.default,
|
|
387
|
+
backgroundFocus: system.color.bg.transparent.default,
|
|
388
388
|
color: system.color.text.default,
|
|
389
389
|
colorFocus: system.color.text.default,
|
|
390
390
|
placeholderColor: system.color.text.hint,
|
|
@@ -411,13 +411,13 @@ export const searchFormStencil = createStencil({
|
|
|
411
411
|
},
|
|
412
412
|
'& [data-part="search-form-input"]': {
|
|
413
413
|
boxShadow: 'none',
|
|
414
|
-
background: system.color.bg.transparent,
|
|
414
|
+
background: system.color.bg.transparent.default,
|
|
415
415
|
':hover': {
|
|
416
|
-
background: system.color.bg.transparent,
|
|
416
|
+
background: system.color.bg.transparent.default,
|
|
417
417
|
},
|
|
418
418
|
|
|
419
419
|
'&:is(:focus-visible, &.focus):where(:not([disabled]))': {
|
|
420
|
-
background: system.color.bg.transparent,
|
|
420
|
+
background: system.color.bg.transparent.default,
|
|
421
421
|
boxShadow: 'none',
|
|
422
422
|
},
|
|
423
423
|
},
|