@workday/canvas-kit-labs-css 14.0.0-alpha.1165-next.0 → 14.0.0-alpha.1167-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-css",
3
- "version": "14.0.0-alpha.1165-next.0",
3
+ "version": "14.0.0-alpha.1167-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "24a44ff42a9e4424420a61c971515b923e470426"
28
+ "gitHead": "25670463a46bad451356d0550adac0de8b5209b0"
29
29
  }
@@ -1,120 +0,0 @@
1
- .cnvs-labs-ai-assistant-ingress-button {
2
- box-sizing: border-box;
3
- --cnvs-button-background: var(--cnvs-sys-color-bg-ai-strongest);
4
- border-radius: var(--cnvs-sys-shape-round);
5
- height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));
6
- width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));
7
- transition: box-shadow 300ms ease-out,background 300ms ease-out;
8
- }
9
-
10
- .cnvs-labs-ai-assistant-ingress-button .wd-icon-ai-assistant-ingress-button .wd-icon-fill {
11
- transition: fill 300ms ease-out;
12
- }
13
-
14
- .cnvs-labs-ai-assistant-ingress-button .wd-icon-ai-assistant-ingress-button >linearGradient>stop {
15
- transition: 300ms ease-out;
16
- stop-color: var(--cnvs-sys-color-fg-inverse);
17
- }
18
-
19
- .cnvs-labs-ai-assistant-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:first-child {
20
- stop-color: #FFA198;
21
- }
22
-
23
- .cnvs-labs-ai-assistant-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(2) {
24
- stop-color: #FFCAA0;
25
- }
26
-
27
- .cnvs-labs-ai-assistant-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(3) {
28
- stop-color: #FFCA79;
29
- }
30
-
31
- .cnvs-labs-ai-assistant-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(4) {
32
- stop-color: #FDCA44;
33
- }
34
-
35
- .cnvs-labs-ai-assistant-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(5) {
36
- stop-color: #FFB74D;
37
- }
38
-
39
- .cnvs-labs-ai-assistant-ingress-button:disabled, .cnvs-labs-ai-assistant-ingress-button:disabled:active, .cnvs-labs-ai-assistant-ingress-button.disabled {
40
- opacity: var(--cnvs-sys-opacity-disabled);
41
- }
42
-
43
- .cnvs-labs-ai-assistant-ingress-button:is(:focus-visible, .focus):not(:disabled, .disabled) {
44
- 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));
45
- }
46
-
47
-
48
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse {
49
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
50
- }
51
-
52
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse .wd-icon-ai-assistant-ingress-button .wd-icon-fill {
53
- transition: fill 300ms ease-out;
54
- }
55
-
56
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse .wd-icon-ai-assistant-ingress-button >linearGradient>stop {
57
- transition: 300ms ease-out;
58
- stop-color: var(--cnvs-sys-color-fg-ai);
59
- }
60
-
61
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:first-child {
62
- stop-color: #FFA198;
63
- }
64
-
65
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(2) {
66
- stop-color: #FFCAA0;
67
- }
68
-
69
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(3) {
70
- stop-color: #FFCA79;
71
- }
72
-
73
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(4) {
74
- stop-color: #FDCA44;
75
- }
76
-
77
- .cnvs-labs-ai-assistant-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-assistant-ingress-button linearGradient>stop:nth-child(5) {
78
- stop-color: #FFB74D;
79
- }
80
-
81
-
82
- .cnvs-labs-ai-assistant-ingress-button.toggled {
83
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
84
- transition: box-shadow 300ms ease-out,background 300ms ease-out;
85
- box-shadow: 0px 0px 4.9px 0px #FFC2FD,0px 0px 0.98px 0px #FFF3A8,0px 0px 1.96px 0px #FEC10B,0px 0px 2.94px 0px #FEC10B,0px 0px 4.9px 0px #FD7E00,0px 0px 7.36px 0px #FC5B05,0px 0px 9.81px 0px #FFC2FD,0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);
86
- }
87
-
88
- .cnvs-labs-ai-assistant-ingress-button.toggled .wd-icon-ai-assistant-ingress-button .wd-icon-fill {
89
- transition: fill 300ms ease-out;
90
- }
91
-
92
- .cnvs-labs-ai-assistant-ingress-button.toggled .wd-icon-ai-assistant-ingress-button >linearGradient>stop {
93
- transition: 300ms ease-out;
94
- stop-color: var(--cnvs-sys-color-fg-ai);
95
- }
96
-
97
- .cnvs-labs-ai-assistant-ingress-button.toggled:is(:focus-visible, .focus):not(:disabled, .disabled) {
98
- 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));
99
- border: 1px solid var(--cnvs-sys-color-border-container);
100
- }
101
-
102
-
103
- .cnvs-labs-ai-assistant-ingress-button.toggled-false {
104
- transition: box-shadow 300ms ease-out,background 300ms ease-out;
105
- }
106
-
107
-
108
- .cnvs-labs-ai-assistant-ingress-button.toggled-true.variant-inverse {
109
- --cnvs-button-background: var(--cnvs-sys-color-bg-ai-strongest);
110
- }
111
-
112
- .cnvs-labs-ai-assistant-ingress-button.toggled-true.variant-inverse .wd-icon-ai-assistant-ingress-button .wd-icon-fill {
113
- transition: fill 300ms ease-out;
114
- }
115
-
116
- .cnvs-labs-ai-assistant-ingress-button.toggled-true.variant-inverse .wd-icon-ai-assistant-ingress-button >linearGradient>stop {
117
- transition: 300ms ease-out;
118
- stop-color: var(--cnvs-sys-color-fg-inverse);
119
- }
120
-
package/search-form.css DELETED
@@ -1,263 +0,0 @@
1
- .cnvs-labs-search-form {
2
- box-sizing: border-box;
3
- position: relative;
4
- flex-grow: 1;
5
- display: flex;
6
- align-items: center;
7
- margin-inline-start: var(--cnvs-sys-space-x6);
8
- min-width: var(--cnvs-labs-search-form-min-width, 7.5rem);
9
- max-width: var(--cnvs-labs-search-form-max-width, 30rem);
10
- }
11
-
12
- .cnvs-labs-search-form [data-part="search-form-container"] {
13
- position: relative;
14
- display: flex;
15
- align-items: center;
16
- width: 100%;
17
- text-align: left;
18
- min-height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
19
- }
20
-
21
- .cnvs-labs-search-form [data-part="search-form-combobox"] {
22
- width: 100%;
23
- }
24
-
25
- .cnvs-labs-search-form [data-part="search-form-close-button"] {
26
- position: absolute;
27
- top: 0;
28
- bottom: 0;
29
- right: 0;
30
- margin: auto var(--cnvs-sys-space-x2);
31
- z-index: 3;
32
- display: none;
33
- }
34
-
35
- .cnvs-labs-search-form [data-part="search-form-field"] {
36
- width: 100%;
37
- height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
38
- max-width: var(--cnvs-labs-search-form-max-width, 30rem);
39
- margin-bottom: 0;
40
- display: inline-block;
41
- }
42
-
43
- .cnvs-labs-search-form [data-part="search-form-field"] >div {
44
- display: block;
45
- }
46
-
47
- .cnvs-labs-search-form [data-part="search-form-submit-search-icon"], .cnvs-labs-search-form [data-part="search-form-open-search-icon"] {
48
- position: absolute;
49
- margin: auto var(--cnvs-sys-space-x2);
50
- top: 0;
51
- bottom: 0;
52
- left: 0;
53
- padding: 0;
54
- z-index: 3;
55
- }
56
-
57
- .cnvs-labs-search-form [data-part="search-form-submit-search-icon"] :dir(rtl), .cnvs-labs-search-form [data-part="search-form-open-search-icon"] :dir(rtl) {
58
- right: 0;
59
- left: auto;
60
- }
61
-
62
- .cnvs-labs-search-form [data-part="search-form-input"] {
63
- max-width: var(--cnvs-labs-search-form-max-width);
64
- min-width: var(--cnvs-labs-search-form-min-width);
65
- padding-inline-start: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
66
- padding-inline-end: var(--cnvs-sys-space-x10);
67
- background-color: var(--cnvs-labs-search-form-background, var(--cnvs-sys-color-bg-alt-soft));
68
- height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
69
- font-size: var(--cnvs-sys-font-size-subtext-large);
70
- box-shadow: var(--cnvs-labs-search-form-box-shadow);
71
- color: var(--cnvs-labs-search-form-color, var(--cnvs-sys-color-text-default));
72
- border: none;
73
- -webkit-appearance: none;
74
- transition: background-color 120ms,color 120ms,box-shadow 200ms,border-color 200ms;
75
- z-index: 2;
76
- width: 100%;
77
- }
78
-
79
- .cnvs-labs-search-form [data-part="search-form-input"]::-webkit-search-cancel-button {
80
- display: none;
81
- }
82
-
83
- .cnvs-labs-search-form [data-part="search-form-input"]::placeholder {
84
- color: var(--cnvs-labs-search-form-placeholder-color, var(--cnvs-sys-color-text-hint));
85
- }
86
-
87
- .cnvs-labs-search-form [data-part="search-form-input"]:placeholder-shown {
88
- text-overflow: ellipsis;
89
- }
90
-
91
- .cnvs-labs-search-form [data-part="search-form-input"]:hover {
92
- background-color: var(--cnvs-labs-search-form-background-hover, var(--cnvs-labs-search-form-background, var(--cnvs-sys-color-bg-alt-default)));
93
- }
94
-
95
- .cnvs-labs-search-form [data-part="search-form-input"]:is(:focus-visible, .focus):where(:not([disabled])) {
96
- background: var(--cnvs-labs-search-form-background-focus, var(--cnvs-sys-color-bg-alt-soft));
97
- color: var(--cnvs-labs-search-form-color-focus);
98
- border-color: var(--cnvs-brand-common-focus-outline);
99
- outline: 0.125rem solid transparent;
100
- box-shadow: var(--cnvs-labs-search-form-box-shadow-focus, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));
101
- }
102
-
103
- .cnvs-labs-search-form [data-part="search-form-input"]:is(:focus-visible, .focus):where(:not([disabled])) ::placeholder {
104
- color: var(--cnvs-labs-search-form-placeholder-color-focus);
105
- }
106
-
107
-
108
- .cnvs-labs-search-form.is-hidden-submit-search-icon [data-part="search-form-submit-search-icon"] {
109
- display: none;
110
- }
111
-
112
-
113
- .cnvs-labs-search-form.is-hidden-open-seach-icon [data-part="search-form-open-search-icon"] {
114
- display: none;
115
- }
116
-
117
-
118
- .cnvs-labs-search-form.is-collapsed {
119
- top: 0;
120
- right: 0;
121
- left: 0;
122
- bottom: 0;
123
- margin: 0;
124
- position: relative;
125
- background-color: var(--cnvs-sys-color-bg-transparent);
126
- transition: background-color 120ms;
127
- max-width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
128
- min-width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));
129
- overflow: hidden;
130
- z-index: 1;
131
- }
132
-
133
- .cnvs-labs-search-form.is-collapsed [data-part="search-form-field"] {
134
- display: none;
135
- max-width: 100%;
136
- }
137
-
138
- .cnvs-labs-search-form.is-collapsed [data-part="search-form-submit-search-icon"], .cnvs-labs-search-form.is-collapsed [data-part="search-form-open-search-icon"] {
139
- margin: auto var(--cnvs-sys-space-x2);
140
- }
141
-
142
- .cnvs-labs-search-form.is-collapsed [data-part="search-form-input"] {
143
- font-size: 20px;
144
- padding-inline-start: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));
145
- padding-inline-end: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));
146
- max-width: none;
147
- min-width: 0;
148
- background-color: var(--cnvs-sys-color-bg-transparent);
149
- height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
150
- }
151
-
152
-
153
- .cnvs-labs-search-form.is-collapsed-false [data-part="search-form-field"] {
154
- display: inline-block;
155
- }
156
-
157
-
158
- .cnvs-labs-search-form.right-align {
159
- text-align: right;
160
- }
161
-
162
-
163
-
164
-
165
- .cnvs-labs-search-form.grow {
166
- max-width: 100%;
167
- }
168
-
169
- .cnvs-labs-search-form.grow [data-part="search-form-field"], .cnvs-labs-search-form.grow [data-part="search-form-input"] {
170
- max-width: 100%;
171
- }
172
-
173
-
174
- .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"] {
175
- background: var(--cnvs-sys-color-bg-alt-soft);
176
- color: var(--cnvs-sys-color-text-default);
177
- }
178
-
179
- .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"] ::placeholder {
180
- color: var(--cnvs-sys-color-text-hint);
181
- }
182
-
183
- .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"]:hover {
184
- background: var(--cnvs-sys-color-bg-alt-default);
185
- }
186
-
187
- .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"].focus):where(:not([disabled])) {
188
- background: var(--cnvs-sys-color-bg-alt-soft);
189
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
190
- }
191
-
192
-
193
- .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] {
194
- background-color: rgba(0, 0, 0, 0.2);
195
- color: var(--cnvs-sys-color-text-inverse);
196
- box-shadow: none;
197
- }
198
-
199
- .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] ::placeholder {
200
- color: var(--cnvs-sys-color-text-inverse);
201
- }
202
-
203
- .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] :hover {
204
- background: rgba(0, 0, 0, 0.2);
205
- }
206
-
207
- .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"].focus):where(:not([disabled])) {
208
- background: var(--cnvs-sys-color-bg-default);
209
- color: var(--cnvs-sys-color-text-default);
210
- box-shadow: none;
211
- }
212
-
213
- .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"].focus):where(:not([disabled])) ::placeholder {
214
- color: var(--cnvs-sys-color-text-hint);
215
- }
216
-
217
-
218
- .cnvs-labs-search-form.search-theme-transparent [data-part="search-form-input"] {
219
- background: var(--cnvs-sys-color-bg-transparent);
220
- background-focus: var(--cnvs-sys-color-bg-transparent);
221
- color: var(--cnvs-sys-color-text-default);
222
- color-focus: var(--cnvs-sys-color-text-default);
223
- placeholder-color: var(--cnvs-sys-color-text-hint);
224
- placeholder-color-focus: var(--cnvs-sys-color-text-hint);
225
- box-shadow: none;
226
- box-shadow-focus: none;
227
- }
228
-
229
-
230
- .cnvs-labs-search-form.show-form-true.is-collapsed-true {
231
- position: absolute;
232
- background-color: var(--cnvs-sys-color-bg-default);
233
- max-width: none;
234
- overflow: visible;
235
- }
236
-
237
- .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-close-button"] {
238
- display: inline-block;
239
- }
240
-
241
- .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-field"] {
242
- display: inline-block;
243
- }
244
-
245
- .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"] {
246
- box-shadow: none;
247
- background: var(--cnvs-sys-color-bg-transparent);
248
- }
249
-
250
- .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"] :hover {
251
- background: var(--cnvs-sys-color-bg-transparent);
252
- }
253
-
254
- .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"].focus):where(:not([disabled])) {
255
- background: var(--cnvs-sys-color-bg-transparent);
256
- box-shadow: none;
257
- }
258
-
259
-
260
- .cnvs-labs-search-form.is-collapsed-true.show-form-true [data-part="search-form-field"] {
261
- display: inline-block;
262
- }
263
-