@workday/canvas-kit-preview-css 14.0.0-alpha.1223-next.0 → 14.0.0-alpha.1224-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +2 -2
  2. package/pill.css +63 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "14.0.0-alpha.1223-next.0",
3
+ "version": "14.0.0-alpha.1224-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit Preview 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": "ca28ec0a632d90afcacdfcda090da1c8dc7d0dc6"
28
+ "gitHead": "55e63c9ec96d3719ef507660f01dd5e8e8b3363e"
29
29
  }
package/pill.css CHANGED
@@ -17,8 +17,8 @@
17
17
  overflow: visible;
18
18
  flex: 0 0 auto;
19
19
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
20
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
21
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
20
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
21
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
22
22
  --cnvs-svg-size: var(--cnvs-sys-space-x6);
23
23
  }
24
24
 
@@ -35,15 +35,23 @@
35
35
 
36
36
  .cnvs-preview-pill-icon-button:focus-visible, .cnvs-preview-pill-icon-button.focus {
37
37
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
38
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
38
39
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
39
40
  }
40
41
 
41
42
  .cnvs-preview-pill-icon-button:hover, .cnvs-preview-pill-icon-button.hover {
42
43
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
44
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
45
+ }
46
+
47
+ .cnvs-preview-pill-icon-button:active, .cnvs-preview-pill-icon-button.active {
48
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
49
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
43
50
  }
44
51
 
45
52
  .cnvs-preview-pill-icon-button:disabled, .cnvs-preview-pill-icon-button.disabled {
46
53
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
54
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
47
55
  }
48
56
 
49
57
 
@@ -115,14 +123,14 @@
115
123
  position: relative;
116
124
  gap: var(--cnvs-sys-space-x1);
117
125
  max-width: var(--cnvs-preview-pill-max-width);
118
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
119
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
120
- --cnvs-button-label: var(--cnvs-sys-color-text-strong);
121
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
122
- --cnvs-preview-pill-count-border-color: transparent;
123
126
  white-space: nowrap;
124
127
  text-overflow: ellipsis;
125
128
  overflow: hidden;
129
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
130
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
131
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
132
+ --cnvs-system-icon-color: currentColor;
133
+ --cnvs-preview-pill-count-border-color: transparent;
126
134
  }
127
135
 
128
136
  .cnvs-preview-pill:has(span) {
@@ -130,91 +138,91 @@
130
138
  line-height: var(--cnvs-sys-line-height-subtext-large);
131
139
  }
132
140
 
133
- .cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
134
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
135
- --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
136
- --cnvs-button-label: var(--cnvs-sys-color-text-strong);
137
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
138
- border-color: var(--cnvs-sys-color-border-primary-default);
139
- --cnvs-preview-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
140
- box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default),0 0 0 0px var(--cnvs-sys-color-border-primary-default);
141
- }
142
-
143
141
  .cnvs-preview-pill:hover, .cnvs-preview-pill.hover {
144
142
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
145
143
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
146
- --cnvs-button-label: var(--cnvs-sys-color-text-strong);
147
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
144
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
145
+ --cnvs-system-icon-color: currentColor;
146
+ --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
147
+ --cnvs-preview-pill-count-border-color: transparent;
148
148
  }
149
149
 
150
150
  .cnvs-preview-pill:active, .cnvs-preview-pill.active {
151
151
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
152
152
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
153
- --cnvs-button-label: var(--cnvs-sys-color-text-strong);
154
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
155
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-stronger);
153
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
154
+ --cnvs-system-icon-color: currentColor;
155
+ --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
156
156
  --cnvs-preview-pill-count-border-color: transparent;
157
157
  }
158
158
 
159
+ .cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
160
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
161
+ --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
162
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
163
+ border-color: var(--cnvs-sys-color-border-primary-default);
164
+ --cnvs-system-icon-color: currentColor;
165
+ --cnvs-preview-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
166
+ box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default),0 0 0 0px var(--cnvs-sys-color-border-primary-default);
167
+ }
168
+
159
169
  .cnvs-preview-pill:disabled, .cnvs-preview-pill.disabled {
160
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
170
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
161
171
  --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
162
- --cnvs-button-label: var(--cnvs-sys-color-text-disabled);
163
- --cnvs-button-opacity: 1;
164
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
165
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-default);
172
+ --cnvs-button-label: var(--cnvs-sys-color-fg-disabled);
173
+ --cnvs-system-icon-color: currentColor;
174
+ --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-strong);
166
175
  --cnvs-preview-pill-count-border-color: transparent;
167
176
  }
168
177
 
169
178
 
170
- .cnvs-preview-removeable-pill {
171
- box-sizing: border-box;
179
+ .cnvs-preview-pill.variant-read-only {
180
+ border: 0.0625rem solid var(--cnvs-sys-color-border-container);
172
181
  cursor: default;
173
- overflow: revert;
174
- position: relative;
182
+ --cnvs-button-background: transparent;
175
183
  }
176
184
 
177
- .cnvs-preview-removeable-pill:focus-visible, .cnvs-preview-removeable-pill.focus {
178
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
179
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
180
- --cnvs-button-label: var(--cnvs-sys-color-text-strong);
181
- box-shadow: none;
185
+ .cnvs-preview-pill.variant-read-only:hover, .cnvs-preview-pill.variant-read-only.hover {
186
+ border-color: var(--cnvs-sys-color-border-container);
187
+ --cnvs-button-background: transparent;
182
188
  }
183
189
 
184
- .cnvs-preview-removeable-pill:hover, .cnvs-preview-removeable-pill.hover {
185
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
190
+ .cnvs-preview-pill.variant-read-only:focus-visible, .cnvs-preview-pill.variant-read-only.focus {
191
+ --cnvs-button-background: transparent;
186
192
  }
187
193
 
188
- .cnvs-preview-removeable-pill:active, .cnvs-preview-removeable-pill.active {
189
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
194
+ .cnvs-preview-pill.variant-read-only:active, .cnvs-preview-pill.variant-read-only.active {
195
+ --cnvs-button-background: transparent;
190
196
  }
191
197
 
192
- .cnvs-preview-removeable-pill:disabled, .cnvs-preview-removeable-pill.disabled {
193
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
194
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
198
+ .cnvs-preview-pill.variant-read-only:disabled, .cnvs-preview-pill.variant-read-only.disabled {
199
+ --cnvs-button-background: transparent;
195
200
  }
196
201
 
197
202
 
198
- .cnvs-preview-ready-only-pill {
199
- box-sizing: border-box;
200
- border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
203
+ .cnvs-preview-pill.variant-removable {
201
204
  cursor: default;
202
- --cnvs-button-background: transparent;
205
+ overflow: revert;
206
+ position: relative;
203
207
  }
204
208
 
205
- .cnvs-preview-ready-only-pill:hover, .cnvs-preview-ready-only-pill.hover {
206
- --cnvs-button-background: transparent;
209
+ .cnvs-preview-pill.variant-removable:focus-visible, .cnvs-preview-pill.variant-removable.focus {
210
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
211
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
212
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
213
+ box-shadow: none;
207
214
  }
208
215
 
209
- .cnvs-preview-ready-only-pill:focus-visible, .cnvs-preview-ready-only-pill.focus {
210
- --cnvs-button-background: transparent;
216
+ .cnvs-preview-pill.variant-removable:hover, .cnvs-preview-pill.variant-removable.hover {
217
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
211
218
  }
212
219
 
213
- .cnvs-preview-ready-only-pill:active, .cnvs-preview-ready-only-pill.active {
214
- --cnvs-button-background: transparent;
220
+ .cnvs-preview-pill.variant-removable:active, .cnvs-preview-pill.variant-removable.active {
221
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
215
222
  }
216
223
 
217
- .cnvs-preview-ready-only-pill:disabled, .cnvs-preview-ready-only-pill.disabled {
218
- --cnvs-button-background: transparent;
224
+ .cnvs-preview-pill.variant-removable:disabled, .cnvs-preview-pill.variant-removable.disabled {
225
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
226
+ --cnvs-system-icon-color: currentColor;
219
227
  }
220
228