@workday/canvas-kit-preview-css 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0076-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 +0 -229
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "15.0.0-alpha.0074-next.0",
3
+ "version": "15.0.0-alpha.0076-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": "3fbdd82f3f92e4c6aaebd87c84fcdcd6b39f87cc"
28
+ "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
29
29
  }
package/pill.css DELETED
@@ -1,229 +0,0 @@
1
- .cnvs-preview-pill-icon {
2
- box-sizing: border-box;
3
- margin-inline-start: calc(var(--cnvs-sys-space-x1) * -1);
4
- --cnvs-svg-size: 1.25rem;
5
- flex: 0 0 auto;
6
- }
7
-
8
-
9
- .cnvs-preview-pill-icon-button {
10
- box-sizing: border-box;
11
- margin-inline-end: calc(0.4375rem * -1);
12
- margin-inline-start: calc(0.125rem * -1);
13
- border-radius: var(--cnvs-sys-shape-half);
14
- height: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
15
- width: calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));
16
- padding: var(--cnvs-sys-space-zero);
17
- overflow: visible;
18
- flex: 0 0 auto;
19
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
20
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
21
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
22
- --cnvs-svg-size: var(--cnvs-sys-space-x6);
23
- }
24
-
25
- .cnvs-preview-pill-icon-button ::after {
26
- content: "";
27
- height: var(--cnvs-sys-space-x8);
28
- width: var(--cnvs-sys-space-x8);
29
- position: absolute;
30
- left: calc(0.4375rem * -1);
31
- bottom: calc(0.4375rem * -1);
32
- margin: var(--cnvs-sys-space-zero);
33
- pointer-events: all;
34
- }
35
-
36
- .cnvs-preview-pill-icon-button:focus-visible, .cnvs-preview-pill-icon-button.focus {
37
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
38
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
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));
40
- }
41
-
42
- .cnvs-preview-pill-icon-button:hover, .cnvs-preview-pill-icon-button.hover {
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);
50
- }
51
-
52
- .cnvs-preview-pill-icon-button:disabled, .cnvs-preview-pill-icon-button.disabled {
53
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
54
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
55
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
56
- }
57
-
58
-
59
- .cnvs-preview-pill-count {
60
- box-sizing: border-box;
61
- border-start-start-radius: var(--cnvs-sys-shape-zero);
62
- border-start-end-radius: var(--cnvs-sys-shape-x1);
63
- border-end-start-radius: var(--cnvs-sys-shape-zero);
64
- border-end-end-radius: var(--cnvs-sys-shape-x1);
65
- border-width: 0.0625rem;
66
- border-inline-start-width: var(--cnvs-sys-space-zero);
67
- border-style: solid;
68
- border-color: var(--cnvs-preview-pill-count-border-color, var(--cnvs-sys-color-border-transparent));
69
- display: inline-flex;
70
- align-items: center;
71
- justify-content: center;
72
- height: 1.375rem;
73
- width: var(--cnvs-sys-space-x6);
74
- padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
75
- margin-inline-end: calc(var(--cnvs-sys-space-x2) * -1);
76
- margin-inline-start: var(--cnvs-sys-space-x1);
77
- background-color: var(--cnvs-preview-pill-count-background-color, var(--cnvs-sys-color-bg-alt-stronger));
78
- flex: 0 0 auto;
79
- }
80
-
81
-
82
- .cnvs-preview-pill-avatar {
83
- box-sizing: border-box;
84
- flex: 0 0 auto;
85
- font-family: var(--cnvs-sys-font-family-default);
86
- font-weight: var(--cnvs-sys-font-weight-normal);
87
- line-height: var(--cnvs-sys-line-height-subtext-small);
88
- font-size: var(--cnvs-sys-font-size-subtext-small);
89
- letter-spacing: var(--cnvs-base-letter-spacing-50);
90
- }
91
-
92
- .cnvs-preview-pill-avatar:disabled, .cnvs-preview-pill-avatar.disabled {
93
- opacity: var(--cnvs-sys-opacity-disabled);
94
- }
95
-
96
-
97
- .cnvs-preview-pill-label {
98
- box-sizing: border-box;
99
- flex-shrink: 1;
100
- white-space: nowrap;
101
- text-overflow: ellipsis;
102
- overflow: hidden;
103
- }
104
-
105
-
106
- .cnvs-preview-pill {
107
- box-sizing: border-box;
108
- display: initial;
109
- flex-direction: row;
110
- align-items: center;
111
- border-radius: var(--cnvs-sys-shape-x1);
112
- font-family: var(--cnvs-sys-font-family-default);
113
- font-weight: var(--cnvs-sys-font-weight-medium);
114
- line-height: var(--cnvs-sys-line-height-subtext-small);
115
- font-size: var(--cnvs-sys-font-size-subtext-large);
116
- letter-spacing: var(--cnvs-base-letter-spacing-150);
117
- box-shadow: none;
118
- outline: none;
119
- -webkit-font-smoothing: antialiased;
120
- -moz-osx-font-smoothing: grayscale;
121
- width: fit-content;
122
- padding: 0.125rem var(--cnvs-sys-space-x2);
123
- height: var(--cnvs-sys-space-x6);
124
- position: relative;
125
- gap: var(--cnvs-sys-space-x1);
126
- max-width: var(--cnvs-preview-pill-max-width);
127
- white-space: nowrap;
128
- text-overflow: ellipsis;
129
- overflow: hidden;
130
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
131
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
132
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
133
- --cnvs-system-icon-color: currentColor;
134
- --cnvs-preview-pill-count-border-color: transparent;
135
- }
136
-
137
- .cnvs-preview-pill:has(span) {
138
- display: flex;
139
- line-height: var(--cnvs-sys-line-height-subtext-large);
140
- }
141
-
142
- .cnvs-preview-pill:hover, .cnvs-preview-pill.hover {
143
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
144
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
145
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
146
- --cnvs-system-icon-color: currentColor;
147
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
148
- --cnvs-preview-pill-count-border-color: transparent;
149
- }
150
-
151
- .cnvs-preview-pill:active, .cnvs-preview-pill.active {
152
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
153
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
154
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
155
- --cnvs-system-icon-color: currentColor;
156
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-muted-softer);
157
- --cnvs-preview-pill-count-border-color: transparent;
158
- }
159
-
160
- .cnvs-preview-pill:focus-visible, .cnvs-preview-pill.focus {
161
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
162
- --cnvs-button-border: var(--cnvs-sys-color-border-primary-default);
163
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
164
- border-color: var(--cnvs-sys-color-border-primary-default);
165
- --cnvs-system-icon-color: currentColor;
166
- --cnvs-preview-pill-count-border-color: var(--cnvs-sys-color-border-primary-default);
167
- 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);
168
- }
169
-
170
- .cnvs-preview-pill:disabled, .cnvs-preview-pill.disabled {
171
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
172
- --cnvs-button-border: var(--cnvs-sys-color-border-input-disabled);
173
- --cnvs-button-label: var(--cnvs-sys-color-fg-disabled);
174
- --cnvs-system-icon-color: currentColor;
175
- --cnvs-preview-pill-count-background-color: var(--cnvs-sys-color-bg-alt-strong);
176
- --cnvs-preview-pill-count-border-color: transparent;
177
- }
178
-
179
-
180
- .cnvs-preview-pill.variant-read-only {
181
- border: 0.0625rem solid var(--cnvs-sys-color-border-container);
182
- cursor: default;
183
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
184
- }
185
-
186
- .cnvs-preview-pill.variant-read-only:hover, .cnvs-preview-pill.variant-read-only.hover {
187
- border-color: var(--cnvs-sys-color-border-container);
188
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
189
- }
190
-
191
- .cnvs-preview-pill.variant-read-only:focus-visible, .cnvs-preview-pill.variant-read-only.focus {
192
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
193
- }
194
-
195
- .cnvs-preview-pill.variant-read-only:active, .cnvs-preview-pill.variant-read-only.active {
196
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
197
- }
198
-
199
- .cnvs-preview-pill.variant-read-only:disabled, .cnvs-preview-pill.variant-read-only.disabled {
200
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
201
- }
202
-
203
-
204
- .cnvs-preview-pill.variant-removable {
205
- cursor: default;
206
- overflow: revert;
207
- position: relative;
208
- }
209
-
210
- .cnvs-preview-pill.variant-removable:focus-visible, .cnvs-preview-pill.variant-removable.focus {
211
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
212
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
213
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
214
- box-shadow: none;
215
- }
216
-
217
- .cnvs-preview-pill.variant-removable:hover, .cnvs-preview-pill.variant-removable.hover {
218
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
219
- }
220
-
221
- .cnvs-preview-pill.variant-removable:active, .cnvs-preview-pill.variant-removable.active {
222
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
223
- }
224
-
225
- .cnvs-preview-pill.variant-removable:disabled, .cnvs-preview-pill.variant-removable.disabled {
226
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
227
- --cnvs-system-icon-color: currentColor;
228
- }
229
-