@justeattakeaway/pie-tag 0.21.3 → 0.22.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 (10) hide show
  1. package/README.md +136 -15
  2. package/custom-elements.json +6 -79
  3. package/dist/index.d.ts +14 -26
  4. package/dist/index.js +84 -108
  5. package/dist/react.d.ts +14 -26
  6. package/dist/react.js +4 -5
  7. package/package.json +4 -4
  8. package/src/defs.ts +29 -15
  9. package/src/index.ts +19 -96
  10. package/src/tag.scss +385 -133
package/src/tag.scss CHANGED
@@ -4,246 +4,498 @@
4
4
  display: inline-block;
5
5
  }
6
6
 
7
-
8
- // Base tag styles
9
7
  .c-tag {
10
- --int-states-mixin-bg-color: var(--dt-color-container-strong);
8
+ // CSS Custom Properties - Default values (neutral, subtle, large)
9
+ // colors
10
+ --tag-bg-color: var(--dt-color-container-strong);
11
+ --tag-icon-bg-color: var(--dt-color-container-inverse);
12
+ --tag-icon-color: var(--dt-color-content-inverse);
11
13
  --tag-color: var(--dt-color-content-default);
12
- --tag-border-radius: var(--dt-radius-rounded-b);
13
- --tag-padding-block: 2px;
14
- --tag-padding-inline: var(--dt-spacing-b);
15
- --tag-font-family: var(--dt-font-body-s-family);
16
- --tag-font-weight: var(--dt-font-body-s-weight);
17
- --tag-font-size: #{p.font-size(--dt-font-body-s-size)};
18
- --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
19
- --tag-cursor: text;
20
-
21
- // transparent to variable to function properly in component tests
22
- --tag-transparent-bg-color: transparent;
23
-
24
- // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
25
- --icon-size-override: 16px;
26
-
27
- display: inline-flex;
28
- flex-direction: row;
29
- gap: var(--dt-spacing-a);
30
- vertical-align: middle;
31
- align-items: center;
32
- justify-content: center;
33
- padding: var(--tag-padding-block) var(--tag-padding-inline);
14
+ --tag-transparent-bg-color: transparent; // Used for component tests
15
+
16
+ // borders
17
+ --tag-border-width: 1px; // Used for outline variant
18
+ --tag-border-color: var(--tag-bg-color);
19
+
20
+ border: var(--tag-border-width) solid var(--tag-border-color);
34
21
  border-radius: var(--tag-border-radius);
35
- background-color: var(--int-states-mixin-bg-color);
36
- color: var(--tag-color);
22
+
23
+ width: 100%;
24
+
37
25
  font-family: var(--tag-font-family);
38
26
  font-weight: var(--tag-font-weight);
39
27
  font-size: var(--tag-font-size);
40
28
  line-height: var(--tag-line-height);
41
- cursor: var(--tag-cursor);
42
29
 
43
- &.c-tag--interactive {
44
- --tag-cursor: pointer;
30
+ color: var(--tag-color);
31
+
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+
36
+ background-color: var(--tag-bg-color);
45
37
 
46
- border: none;
47
- user-select: none;
38
+ padding-inline-start: var(--tag-padding-inline-start);
39
+ padding-inline-end: var(--tag-padding-inline-end);
40
+ padding-block-start: var(--tag-padding-block-start);
41
+ padding-block-end: var(--tag-padding-block-end);
48
42
 
49
- &:focus-visible {
50
- @include p.focus;
43
+ slot[name="icon"] {
44
+ color: var(--tag-icon-color);
45
+
46
+ // Used to size raw SVGs passed into the icon slot
47
+ &::slotted(svg) {
48
+ display: block;
49
+ height: var(--icon-size-override);
50
+ width: var(--icon-size-override);
51
51
  }
52
52
  }
53
53
 
54
- &.c-tag--icon-placement--leading {
55
- // same as default styles
54
+ // Ensures text content truncates with ellipsis if too long
55
+ // The width at which this happens is controlled by applying a width/max-width to
56
+ // the tag component itself
57
+ slot:not([name="icon"]) {
58
+ display: inline-block;
59
+ overflow: hidden;
60
+
61
+ text-overflow: ellipsis;
62
+ white-space: nowrap;
56
63
  }
57
64
 
58
- &.c-tag--icon-placement--trailing {
59
- flex-direction: row-reverse;
65
+ // Sizing, spacing and dimensions
66
+ &.c-tag--large {
67
+ // typography and shape
68
+ --tag-font-family: var(--dt-font-body-s-family);
69
+ --tag-font-weight: var(--dt-font-body-s-weight);
70
+ --tag-font-size: #{p.font-size(--dt-font-body-s-size)};
71
+ --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
72
+ --tag-border-radius: var(--dt-radius-rounded-e);
73
+ --icon-size-override: 16px;
74
+
75
+ // whitespace
76
+ --tag-padding-block-start: calc(var(--dt-spacing-a-small) - var(--tag-border-width));
77
+ --tag-padding-block-end: calc(var(--dt-spacing-a-small) - var(--tag-border-width));
78
+ --tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));
79
+ --tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));
80
+ --tag-gap: var(--dt-spacing-a);
60
81
  }
61
82
 
62
- // Size
63
83
  &.c-tag--small {
64
- --tag-padding-block: 0;
65
- --tag-padding-inline: var(--dt-spacing-a);
66
- --tag-border-radius: var(--dt-radius-rounded-a);
84
+ // typography and shape
85
+ --tag-font-family: var(--dt-font-caption-family);
86
+ --tag-font-weight: var(--dt-font-caption-weight);
67
87
  --tag-font-size: #{p.font-size(--dt-font-caption-size)};
68
88
  --tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
89
+ --tag-border-radius: var(--dt-radius-rounded-c);
90
+ --icon-size-override: 12px;
91
+
92
+ // whitespace
93
+ --tag-padding-block-start: 0;
94
+ --tag-padding-block-end: 0;
95
+ --tag-padding-inline-start: calc(var(--dt-spacing-a) - var(--tag-border-width));
96
+ --tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));
97
+ --tag-gap: var(--dt-spacing-a-small);
69
98
  }
70
99
 
71
- &.c-tag--large {
72
- // same as default styles
100
+ &.c-tag--icon-only {
101
+ &.c-tag--large,
102
+ &.c-tag--small {
103
+ --tag-padding-block-start: calc(var(--dt-spacing-a) - var(--tag-border-width));
104
+ --tag-padding-block-end: calc(var(--dt-spacing-a) - var(--tag-border-width));
105
+ }
106
+
107
+ // Design do not support a small icon only variant
108
+ // so we just make it identical to the large icon only styles
109
+ &.c-tag--small {
110
+ --tag-border-radius: var(--dt-radius-rounded-e);
111
+ --icon-size-override: 16px;
112
+ --tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));
113
+ --tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));
114
+ --tag-gap: var(--dt-spacing-a);
115
+ }
73
116
  }
74
117
 
75
- &.c-tag--icon-only {
76
- --tag-padding-block: var(--dt-spacing-a);
118
+ &.c-tag--has-icon:not(.c-tag--icon-only) {
119
+ --tag-padding-inline-start: 0;
120
+ --tag-padding-block-start: 0;
121
+ --tag-padding-block-end: 0;
122
+
123
+ gap: var(--tag-gap);
124
+
125
+ &.c-tag--large {
126
+ --tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));
127
+ --tag-icon-container-size: 22px;
128
+ }
129
+
130
+ &.c-tag--small {
131
+ --tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));
132
+ --tag-icon-container-size: 16px;
133
+ }
134
+
135
+ slot[name="icon"] {
136
+ background-color: var(--tag-icon-bg-color);
137
+ display: grid;
138
+ place-items: center;
139
+ border-radius: inherit;
140
+ height: var(--tag-icon-container-size);
141
+ aspect-ratio: 1 / 1;
142
+ }
143
+ }
144
+
145
+ // State styles
146
+ &.c-tag--is-dimmed {
147
+ opacity: 0.5;
77
148
  }
78
149
 
79
- // Variant
150
+ // Variants
80
151
  &.c-tag--neutral {
81
- &.c-tag--interactive {
82
- @include p.interactive-states('--dt-color-container-strong');
152
+ // Subtle icon only
153
+ &.c-tag--icon-only {
154
+ --tag-bg-color: var(--dt-color-container-strong);
155
+ --tag-icon-color: var(--dt-color-content-default);
156
+ }
157
+
158
+ // Strong icon only
159
+ &.c-tag--icon-only.c-tag--strong {
160
+ --tag-bg-color: var(--dt-color-container-inverse);
161
+ --tag-icon-color: var(--dt-color-content-inverse);
83
162
  }
84
163
 
85
- &.c-tag--strong {
86
- --int-states-mixin-bg-color: var(--dt-color-container-inverse);
164
+ // Strong
165
+ &.c-tag--strong:not(.c-tag--icon-only) {
166
+ --tag-bg-color: var(--dt-color-container-inverse);
167
+ --tag-icon-bg-color: var(--dt-color-container-strong);
168
+ --tag-icon-color: var(--dt-color-content-default);
87
169
  --tag-color: var(--dt-color-content-inverse);
170
+ }
171
+
172
+ }
88
173
 
89
- &.c-tag--interactive {
90
- @include p.interactive-states('--dt-color-container-inverse', 'inverse', '02');
91
- }
174
+ &.c-tag--neutral-alternative {
175
+ --tag-bg-color: var(--dt-color-container-default);
176
+ --tag-icon-bg-color: var(--dt-color-container-strong);
177
+ --tag-icon-color: var(--dt-color-content-default);
178
+ --tag-color: var(--dt-color-content-default);
179
+
180
+ // Subtle icon only
181
+ &.c-tag--icon-only {
182
+ --tag-bg-color: var(--dt-color-container-default);
183
+ --tag-icon-color: var(--dt-color-content-default);
92
184
  }
93
185
  }
94
186
 
95
187
  &.c-tag--information {
96
- --int-states-mixin-bg-color: var(--dt-color-support-info-02);
188
+ --tag-bg-color: var(--dt-color-support-info-02);
189
+ --tag-icon-bg-color: var(--dt-color-support-info);
190
+ --tag-icon-color: var(--dt-color-content-inverse);
97
191
  --tag-color: var(--dt-color-content-default);
98
192
 
99
- &.c-tag--interactive {
100
- @include p.interactive-states('--dt-color-support-info-02');
193
+ // Subtle icon only
194
+ &.c-tag--icon-only {
195
+ --tag-bg-color: var(--dt-color-support-info-02);
196
+ --tag-icon-color: var(--dt-color-content-default);
101
197
  }
102
198
 
103
- &.c-tag--strong {
104
- --int-states-mixin-bg-color: var(--dt-color-support-info);
105
- --tag-color: var(--dt-color-content-inverse);
199
+ // Strong icon only
200
+ &.c-tag--icon-only.c-tag--strong {
201
+ --tag-bg-color: var(--dt-color-support-info);
202
+ --tag-icon-color: var(--dt-color-content-inverse);
203
+ }
106
204
 
107
- &.c-tag--interactive {
108
- @include p.interactive-states('--dt-color-support-info');
109
- }
205
+ // Strong
206
+ &.c-tag--strong:not(.c-tag--icon-only) {
207
+ --tag-bg-color: var(--dt-color-support-info);
208
+ --tag-icon-bg-color: var(--dt-color-support-info-02);
209
+ --tag-icon-color: var(--dt-color-content-default);
210
+ --tag-color: var(--dt-color-content-inverse);
110
211
  }
111
212
  }
112
213
 
113
214
  &.c-tag--success {
114
- --int-states-mixin-bg-color: var(--dt-color-support-positive-02);
215
+ --tag-bg-color: var(--dt-color-support-positive-02);
216
+ --tag-icon-bg-color: var(--dt-color-support-positive);
217
+ --tag-icon-color: var(--dt-color-content-inverse);
115
218
  --tag-color: var(--dt-color-content-default);
116
219
 
117
- &.c-tag--interactive {
118
- @include p.interactive-states('--dt-color-support-positive-02');
220
+ // Subtle icon only
221
+ &.c-tag--icon-only {
222
+ --tag-bg-color: var(--dt-color-support-positive-02);
223
+ --tag-icon-color: var(--dt-color-content-default);
119
224
  }
120
225
 
121
- &.c-tag--strong {
122
- --int-states-mixin-bg-color: var(--dt-color-support-positive);
123
- --tag-color: var(--dt-color-content-inverse);
226
+ // Strong icon only
227
+ &.c-tag--icon-only.c-tag--strong {
228
+ --tag-bg-color: var(--dt-color-support-positive);
229
+ --tag-icon-color: var(--dt-color-content-inverse);
230
+ }
124
231
 
125
- &.c-tag--interactive {
126
- @include p.interactive-states('--dt-color-support-positive');
127
- }
232
+ // Strong
233
+ &.c-tag--strong:not(.c-tag--icon-only) {
234
+ --tag-bg-color: var(--dt-color-support-positive);
235
+ --tag-icon-bg-color: var(--dt-color-support-positive-02);
236
+ --tag-icon-color: var(--dt-color-content-default);
237
+ --tag-color: var(--dt-color-content-inverse);
128
238
  }
129
239
  }
130
240
 
131
241
  &.c-tag--error {
132
- --int-states-mixin-bg-color: var(--dt-color-support-error-02);
242
+ --tag-bg-color: var(--dt-color-support-error-02);
243
+ --tag-icon-bg-color: var(--dt-color-support-error);
244
+ --tag-icon-color: var(--dt-color-content-inverse);
133
245
  --tag-color: var(--dt-color-content-default);
134
246
 
135
- &.c-tag--interactive {
136
- @include p.interactive-states('--dt-color-support-error-02');
247
+ // Subtle icon only
248
+ &.c-tag--icon-only {
249
+ --tag-bg-color: var(--dt-color-support-error-02);
250
+ --tag-icon-color: var(--dt-color-content-default);
137
251
  }
138
252
 
139
- &.c-tag--strong {
140
- --int-states-mixin-bg-color: var(--dt-color-support-error);
253
+ // Strong icon only
254
+ &.c-tag--icon-only.c-tag--strong {
255
+ --tag-bg-color: var(--dt-color-support-error);
256
+ --tag-icon-color: var(--dt-color-content-light);
257
+ }
258
+
259
+ // Strong
260
+ &.c-tag--strong:not(.c-tag--icon-only) {
261
+ --tag-bg-color: var(--dt-color-support-error);
262
+ --tag-icon-bg-color: var(--dt-color-support-error-02);
263
+ --tag-icon-color: var(--dt-color-content-default);
141
264
  --tag-color: var(--dt-color-content-light);
265
+ }
266
+ }
267
+
268
+ &.c-tag--warning {
269
+ --tag-bg-color: var(--dt-color-support-warning-02);
270
+ --tag-icon-bg-color: var(--dt-color-support-warning);
271
+ --tag-icon-color: var(--dt-color-content-dark);
272
+ --tag-color: var(--dt-color-content-default);
142
273
 
143
- &.c-tag--interactive {
144
- @include p.interactive-states('--dt-color-support-error');
145
- }
274
+ // Subtle icon only
275
+ &.c-tag--icon-only {
276
+ --tag-bg-color: var(--dt-color-support-warning-02);
277
+ --tag-icon-color: var(--dt-color-content-default);
278
+ }
279
+
280
+ // Strong icon only
281
+ &.c-tag--icon-only.c-tag--strong {
282
+ --tag-bg-color: var(--dt-color-support-warning);
283
+ --tag-icon-color: var(--dt-color-content-dark);
284
+ }
285
+
286
+ // Strong
287
+ &.c-tag--strong:not(.c-tag--icon-only) {
288
+ --tag-bg-color: var(--dt-color-support-warning);
289
+ --tag-icon-bg-color: var(--dt-color-support-warning-tonal);
290
+ --tag-icon-color: var(--dt-color-content-default);
291
+ --tag-color: var(--dt-color-content-dark);
146
292
  }
147
293
  }
148
294
 
149
295
  &.c-tag--brand-02 {
150
- --int-states-mixin-bg-color: var(--dt-color-support-brand-02);
296
+ --tag-bg-color: var(--dt-color-support-brand-02);
297
+ --tag-icon-bg-color: var(--dt-color-support-brand-01);
298
+ --tag-icon-color: var(--dt-color-content-dark);
151
299
  --tag-color: var(--dt-color-content-default);
152
300
 
153
- &.c-tag--interactive {
154
- @include p.interactive-states('--dt-color-support-brand-02');
301
+ // Subtle icon only
302
+ &.c-tag--icon-only {
303
+ --tag-bg-color: var(--dt-color-support-brand-02);
304
+ --tag-icon-color: var(--dt-color-content-default);
155
305
  }
156
306
  }
157
307
 
158
308
  &.c-tag--brand-03 {
159
- --int-states-mixin-bg-color: var(--dt-color-support-brand-03);
160
- --tag-color: var(--dt-color-content-dark);
309
+ --tag-bg-color: var(--dt-color-support-brand-03-subtle);
310
+ --tag-icon-bg-color: var(--dt-color-support-brand-03);
311
+ --tag-icon-color: var(--dt-color-content-dark);
312
+ --tag-color: var(--dt-color-content-default);
313
+
314
+ // Subtle icon only
315
+ &.c-tag--icon-only {
316
+ --tag-bg-color: var(--dt-color-support-brand-03-subtle);
317
+ --tag-icon-color: var(--dt-color-content-default);
318
+ }
161
319
 
162
- &.c-tag--interactive {
163
- @include p.interactive-states('--dt-color-support-brand-03');
320
+ // Strong icon only
321
+ &.c-tag--icon-only.c-tag--strong {
322
+ --tag-bg-color: var(--dt-color-support-brand-03);
323
+ --tag-icon-color: var(--dt-color-content-dark);
324
+ }
325
+
326
+ // Strong
327
+ &.c-tag--strong:not(.c-tag--icon-only) {
328
+ --tag-bg-color: var(--dt-color-support-brand-03);
329
+ --tag-icon-bg-color: var(--dt-color-support-brand-03-tonal);
330
+ --tag-icon-color: var(--dt-color-content-default);
331
+ --tag-color: var(--dt-color-content-dark);
164
332
  }
165
333
  }
166
334
 
167
335
  &.c-tag--brand-04 {
168
- --int-states-mixin-bg-color: var(--dt-color-support-brand-04);
169
- --tag-color: var(--dt-color-content-dark);
336
+ --tag-bg-color: var(--dt-color-support-brand-04-subtle);
337
+ --tag-icon-bg-color: var(--dt-color-support-brand-04);
338
+ --tag-icon-color: var(--dt-color-content-dark);
339
+ --tag-color: var(--dt-color-content-default);
340
+
341
+ // Subtle icon only
342
+ &.c-tag--icon-only {
343
+ --tag-bg-color: var(--dt-color-support-brand-04-subtle);
344
+ --tag-icon-color: var(--dt-color-content-dark);
345
+ }
346
+
347
+ // Strong icon only
348
+ &.c-tag--icon-only.c-tag--strong {
349
+ --tag-bg-color: var(--dt-color-support-brand-04);
350
+ --tag-icon-color: var(--dt-color-content-dark);
351
+ }
170
352
 
171
- &.c-tag--interactive {
172
- @include p.interactive-states('--dt-color-support-brand-04');
353
+ // Strong
354
+ &.c-tag--strong:not(.c-tag--icon-only) {
355
+ --tag-bg-color: var(--dt-color-support-brand-04);
356
+ --tag-icon-bg-color: var(--dt-color-support-brand-04-tonal);
357
+ --tag-icon-color: var(--dt-color-content-default);
358
+ --tag-color: var(--dt-color-content-dark);
173
359
  }
174
360
  }
175
361
 
176
362
  &.c-tag--brand-05 {
177
- --int-states-mixin-bg-color: var(--dt-color-support-warning-02);
363
+ --tag-bg-color: var(--dt-color-support-brand-05-subtle);
364
+ --tag-icon-bg-color: var(--dt-color-support-brand-05);
365
+ --tag-icon-color: var(--dt-color-content-dark);
178
366
  --tag-color: var(--dt-color-content-default);
179
367
 
180
- &.c-tag--interactive {
181
- @include p.interactive-states('--dt-color-support-warning-02');
368
+ // Subtle icon only
369
+ &.c-tag--icon-only {
370
+ --tag-bg-color: var(--dt-color-support-brand-05-subtle);
371
+ --tag-icon-color: var(--dt-color-content-default);
182
372
  }
183
373
 
184
- &.c-tag--strong {
185
- --int-states-mixin-bg-color: var(--dt-color-support-warning);
186
- --tag-color: var(--dt-color-content-dark);
374
+ // Strong icon only
375
+ &.c-tag--icon-only.c-tag--strong {
376
+ --tag-bg-color: var(--dt-color-support-brand-05);
377
+ --tag-icon-color: var(--dt-color-content-dark);
378
+ }
187
379
 
188
- &.c-tag--interactive {
189
- @include p.interactive-states('--dt-color-support-warning');
190
- }
380
+ // Strong
381
+ &.c-tag--strong:not(.c-tag--icon-only) {
382
+ --tag-bg-color: var(--dt-color-support-brand-05);
383
+ --tag-icon-bg-color: var(--dt-color-support-brand-05-tonal);
384
+ --tag-icon-color: var(--dt-color-content-default);
385
+ --tag-color: var(--dt-color-content-dark);
191
386
  }
192
387
  }
193
388
 
194
389
  &.c-tag--brand-06 {
195
- --int-states-mixin-bg-color: var(--dt-color-support-brand-06);
196
- --tag-color: var(--dt-color-content-light);
390
+ --tag-bg-color: var(--dt-color-support-brand-06-subtle);
391
+ --tag-icon-bg-color: var(--dt-color-support-brand-06);
392
+ --tag-icon-color: var(--dt-color-content-light);
393
+ --tag-color: var(--dt-color-content-default);
197
394
 
198
- &.c-tag--interactive {
199
- @include p.interactive-states('--dt-color-support-brand-06', 'inverse', '02-light');
395
+ // Subtle icon only
396
+ &.c-tag--icon-only {
397
+ --tag-bg-color: var(--dt-color-support-brand-06-subtle);
398
+ --tag-icon-color: var(--dt-color-content-default);
200
399
  }
201
- }
202
400
 
203
- &.c-tag--neutral-alternative {
204
- --int-states-mixin-bg-color: var(--dt-color-container-default);
205
- --tag-color: var(--dt-color-content-default);
401
+ // Strong icon only
402
+ &.c-tag--icon-only.c-tag--strong {
403
+ --tag-bg-color: var(--dt-color-support-brand-06);
404
+ --tag-icon-color: var(--dt-color-content-light);
405
+ }
206
406
 
207
- &.c-tag--interactive {
208
- @include p.interactive-states('--dt-color-container-default');
407
+ // Strong
408
+ &.c-tag--strong:not(.c-tag--icon-only) {
409
+ --tag-bg-color: var(--dt-color-support-brand-06);
410
+ --tag-icon-bg-color: var(--dt-color-support-brand-06-subtle);
411
+ --tag-icon-color: var(--dt-color-content-default);
412
+ --tag-color: var(--dt-color-content-light);
209
413
  }
210
414
  }
211
415
 
212
- &.c-tag--outline {
213
- --int-states-mixin-bg-color: var(--tag-transparent-bg-color);
214
- --tag-color: var(--dt-color-content-default-solid);
416
+ &.c-tag--brand-08 {
417
+ --tag-bg-color: var(--dt-color-support-brand-08-subtle);
418
+ --tag-icon-bg-color: var(--dt-color-support-brand-08);
419
+ --tag-icon-color: var(--dt-color-content-dark);
420
+ --tag-color: var(--dt-color-content-default);
421
+
422
+ // Subtle icon only
423
+ &.c-tag--icon-only {
424
+ --tag-bg-color: var(--dt-color-support-brand-08-subtle);
425
+ --tag-icon-color: var(--dt-color-content-default);
426
+ }
215
427
 
216
- &.c-tag--interactive {
217
- @include p.interactive-states('--tag-transparent-bg-color', 'transparent');
428
+ // Strong icon only
429
+ &.c-tag--icon-only.c-tag--strong {
430
+ --tag-bg-color: var(--dt-color-support-brand-08);
431
+ --tag-icon-color: var(--dt-color-content-dark);
218
432
  }
219
433
 
220
- // the outline in design specs is part of the total component
221
- // height calculation, thus, we use box-shadow to mimic borders
222
- // and avoid the extra 2px from "border: 1px solid" as shadows are applied "internally"
223
- box-shadow: 0 0 0 1px var(--dt-color-border-strong);
434
+ // Strong
435
+ &.c-tag--strong:not(.c-tag--icon-only) {
436
+ --tag-bg-color: var(--dt-color-support-brand-08);
437
+ --tag-icon-bg-color: var(--dt-color-support-brand-08-tonal);
438
+ --tag-icon-color: var(--dt-color-content-default);
439
+ --tag-color: var(--dt-color-content-dark);
440
+ }
224
441
  }
225
442
 
226
443
  &.c-tag--ghost {
227
- --int-states-mixin-bg-color: var(--tag-transparent-bg-color);
444
+ --tag-bg-color: var(--dt-color-transparent);
445
+ --tag-icon-bg-color: var(--dt-color-transparent);
446
+ --tag-icon-color: var(--dt-color-content-default-solid);
228
447
  --tag-color: var(--dt-color-content-default-solid);
229
448
 
230
- &.c-tag--interactive {
231
- @include p.interactive-states('--tag-transparent-bg-color', 'transparent');
449
+ // Subtle icon only
450
+ &.c-tag--icon-only {
451
+ --tag-bg-color: var(--dt-color-transparent);
452
+ --tag-icon-color: var(--dt-color-content-default-solid);
232
453
  }
233
454
  }
234
455
 
235
- &.is-disabled {
236
- opacity: 0.5;
456
+ &.c-tag--translucent {
457
+ --tag-bg-color: var(--dt-color-container-prominent);
458
+ --tag-icon-bg-color: var(--dt-color-container-neutral);
459
+ --tag-icon-color: var(--dt-color-content-default-solid);
460
+ --tag-color: var(--dt-color-content-default-solid);
461
+ --tag-border-color: var(--dt-color-border-neutral);
462
+ backdrop-filter: blur(var(--dt-blur-prominent));
463
+
464
+ // Subtle icon only
465
+ &.c-tag--icon-only {
466
+ --tag-bg-color: var(--dt-color-container-prominent);
467
+ --tag-icon-color: var(--dt-color-content-default-solid);
468
+ --tag-border-color: var(--dt-color-border-neutral);
469
+ }
237
470
  }
238
471
 
239
- &[disabled] {
240
- --tag-cursor: not-allowed;
241
- }
242
- }
472
+ &.c-tag--outline {
473
+ --tag-bg-color: var(--dt-color-transparent);
474
+ --tag-border-color: var(--dt-color-border-strong);
475
+ --tag-icon-bg-color: var(--dt-color-container-strong);
476
+ --tag-icon-color: var(--dt-color-content-default);
477
+ --tag-color: var(--dt-color-content-default-solid);
243
478
 
244
- // Used to size an SVG if one is passed in (when not using the component icons)
245
- ::slotted(svg) {
246
- display: block;
247
- height: var(--icon-size-override);
248
- width: var(--icon-size-override);
479
+ &.c-tag--icon-only {
480
+ --tag-icon-color: var(--dt-color-content-default-solid);
481
+ }
482
+
483
+ // Antialiasing fix - border radius and the icon container slot being flush
484
+ // can result in a seam/visual artifact letting the background page colour show between the slot and border.
485
+ // This fix uses a pseudo element to effectively 'fill in' that gap.
486
+ &.c-tag--has-icon:not(.c-tag--icon-only) slot[name="icon"] {
487
+ position: relative;
488
+ }
489
+
490
+ &.c-tag--has-icon:not(.c-tag--icon-only) slot[name="icon"]:before {
491
+ content: '';
492
+ position: absolute;
493
+ left: -0.25px;
494
+ height: var(--tag-icon-container-size);
495
+ aspect-ratio: 1;
496
+ z-index: -1;
497
+ border-radius: inherit;
498
+ box-shadow: inset 5px 0 0 0 var(--tag-icon-bg-color);
499
+ }
500
+ }
249
501
  }