@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/tag/tag.plugin.js CHANGED
@@ -2,7 +2,15 @@
2
2
  module.exports = function TagPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-tag': { flexShrink: 0, width: 'fit-content', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
5
+ '.ids-tag': {
6
+ flexShrink: 0,
7
+ width: 'fit-content',
8
+ display: 'inline-flex',
9
+ alignItems: 'center',
10
+ justifyContent: 'center',
11
+ borderStyle: 'solid',
12
+ boxSizing: 'border-box',
13
+ },
6
14
  '.ids-tag:focus': {
7
15
  outlineOffset: '2px',
8
16
  outline: 'var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused)',
@@ -16,81 +24,81 @@ module.exports = function TagPlugin() {
16
24
  justifyContent: 'center',
17
25
  },
18
26
  '.ids-tag.ids-tag-compact': {
19
- gap: 'var(--ids-comp-size-tag-size-gap-compact)',
20
- height: 'var(--ids-comp-size-tag-size-height-compact)',
21
- padding: 'var(--ids-comp-size-tag-size-padding-y-compact) var(--ids-comp-size-tag-size-padding-x-compact)',
22
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-compact)',
23
- border: 'var(--ids-comp-size-tag-size-border-compact) solid',
27
+ gap: 'var(--ids-comp-tag-size-gap-compact)',
28
+ height: 'var(--ids-comp-tag-size-height-compact)',
29
+ padding: 'var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact)',
30
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
31
+ border: 'var(--ids-comp-tag-size-border-width-compact)',
24
32
  },
25
33
  '.ids-tag.ids-tag-compact>.ids-tag-label': {
26
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-compact)',
27
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-compact)',
28
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-compact)',
29
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-compact)',
30
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-compact)',
34
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-compact)',
35
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-compact)',
36
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-compact)',
37
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-compact)',
38
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-compact)',
31
39
  },
32
40
  '.ids-tag.ids-tag-compact *[icon-leading],.ids-tag.ids-tag-compact *[icon-trailing]': {
33
- width: 'var(--ids-comp-size-tag-size-icon-compact)',
34
- height: 'var(--ids-comp-size-tag-size-icon-compact)',
41
+ width: 'var(--ids-comp-tag-size-icon-compact)',
42
+ height: 'var(--ids-comp-tag-size-icon-compact)',
35
43
  },
36
44
  '.ids-tag.ids-tag-comfortable': {
37
- gap: 'var(--ids-comp-size-tag-size-gap-comfortable)',
38
- height: 'var(--ids-comp-size-tag-size-height-comfortable)',
39
- padding: 'var(--ids-comp-size-tag-size-padding-y-comfortable) var(--ids-comp-size-tag-size-padding-x-comfortable)',
40
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-comfortable)',
41
- border: 'var(--ids-comp-size-tag-size-border-comfortable) solid',
45
+ gap: 'var(--ids-comp-tag-size-gap-comfortable)',
46
+ height: 'var(--ids-comp-tag-size-height-comfortable)',
47
+ padding: 'var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable)',
48
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
49
+ border: 'var(--ids-comp-tag-size-border-width-comfortable)',
42
50
  },
43
51
  '.ids-tag.ids-tag-comfortable>.ids-tag-label': {
44
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-comfortable)',
45
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-comfortable)',
46
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-comfortable)',
47
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-comfortable)',
48
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-comfortable)',
52
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-comfortable)',
53
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-comfortable)',
54
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-comfortable)',
55
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-comfortable)',
56
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-comfortable)',
49
57
  },
50
58
  '.ids-tag.ids-tag-comfortable *[icon-leading],.ids-tag.ids-tag-comfortable *[icon-trailing]': {
51
- width: 'var(--ids-comp-size-tag-size-icon-comfortable)',
52
- height: 'var(--ids-comp-size-tag-size-icon-comfortable)',
59
+ width: 'var(--ids-comp-tag-size-icon-comfortable)',
60
+ height: 'var(--ids-comp-tag-size-icon-comfortable)',
53
61
  },
54
62
  '.ids-tag.ids-tag-spacious': {
55
- gap: 'var(--ids-comp-size-tag-size-gap-spacious)',
56
- height: 'var(--ids-comp-size-tag-size-height-spacious)',
57
- padding: 'var(--ids-comp-size-tag-size-padding-y-spacious) var(--ids-comp-size-tag-size-padding-x-spacious)',
58
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-spacious)',
59
- border: 'var(--ids-comp-size-tag-size-border-spacious) solid',
63
+ gap: 'var(--ids-comp-tag-size-gap-spacious)',
64
+ height: 'var(--ids-comp-tag-size-height-spacious)',
65
+ padding: 'var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious)',
66
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
67
+ border: 'var(--ids-comp-tag-size-border-width-spacious)',
60
68
  },
61
69
  '.ids-tag.ids-tag-spacious>.ids-tag-label': {
62
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-spacious)',
63
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-spacious)',
64
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-spacious)',
65
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-spacious)',
66
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-spacious)',
70
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-spacious)',
71
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-spacious)',
72
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-spacious)',
73
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-spacious)',
74
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-spacious)',
67
75
  },
68
76
  '.ids-tag.ids-tag-spacious *[icon-leading],.ids-tag.ids-tag-spacious *[icon-trailing]': {
69
- width: 'var(--ids-comp-size-tag-size-icon-spacious)',
70
- height: 'var(--ids-comp-size-tag-size-icon-spacious)',
77
+ width: 'var(--ids-comp-tag-size-icon-spacious)',
78
+ height: 'var(--ids-comp-tag-size-icon-spacious)',
71
79
  },
72
80
  '.ids-tag.ids-tag-dense': {
73
- gap: 'var(--ids-comp-size-tag-size-gap-dense)',
74
- height: 'var(--ids-comp-size-tag-size-height-dense)',
75
- padding: 'var(--ids-comp-size-tag-size-padding-y-dense) var(--ids-comp-size-tag-size-padding-x-dense)',
76
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-dense)',
77
- border: 'var(--ids-comp-size-tag-size-border-dense) solid',
81
+ gap: 'var(--ids-comp-tag-size-gap-dense)',
82
+ height: 'var(--ids-comp-tag-size-height-dense)',
83
+ padding: 'var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense)',
84
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
85
+ border: 'var(--ids-comp-tag-size-border-width-dense)',
78
86
  },
79
87
  '.ids-tag.ids-tag-dense>.ids-tag-label': {
80
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-dense)',
81
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-dense)',
82
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-dense)',
83
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-dense)',
84
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-dense)',
88
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-dense)',
89
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-dense)',
90
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-dense)',
91
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-dense)',
92
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-dense)',
85
93
  },
86
94
  '.ids-tag.ids-tag-dense *[icon-leading],.ids-tag.ids-tag-dense *[icon-trailing]': {
87
- width: 'var(--ids-comp-size-tag-size-icon-dense)',
88
- height: 'var(--ids-comp-size-tag-size-icon-dense)',
95
+ width: 'var(--ids-comp-tag-size-icon-dense)',
96
+ height: 'var(--ids-comp-tag-size-icon-dense)',
89
97
  },
90
98
  '.ids-tag.ids-tag-filled.ids-tag-primary': {
91
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-enabled)',
92
- background: 'var(--ids-comp-tag-filled-color-bg-primary-enabled)',
93
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-enabled)',
99
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
100
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
101
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
94
102
  },
95
103
  '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
96
104
  color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
@@ -107,15 +115,10 @@ module.exports = function TagPlugin() {
107
115
  background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
108
116
  borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
109
117
  },
110
- '.ids-tag.ids-tag-filled.ids-tag-primary:disabled': {
111
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-disabled)',
112
- background: 'var(--ids-comp-tag-filled-color-bg-primary-disabled)',
113
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-disabled)',
114
- },
115
118
  '.ids-tag.ids-tag-filled.ids-tag-secondary': {
116
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-enabled)',
117
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-enabled)',
118
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-enabled)',
119
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
120
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
121
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
119
122
  },
120
123
  '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
121
124
  color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
@@ -132,15 +135,10 @@ module.exports = function TagPlugin() {
132
135
  background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
133
136
  borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
134
137
  },
135
- '.ids-tag.ids-tag-filled.ids-tag-secondary:disabled': {
136
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-disabled)',
137
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-disabled)',
138
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-disabled)',
139
- },
140
138
  '.ids-tag.ids-tag-filled.ids-tag-brand': {
141
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-enabled)',
142
- background: 'var(--ids-comp-tag-filled-color-bg-brand-enabled)',
143
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-enabled)',
139
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
140
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
141
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
144
142
  },
145
143
  '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
146
144
  color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
@@ -157,15 +155,10 @@ module.exports = function TagPlugin() {
157
155
  background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
158
156
  borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
159
157
  },
160
- '.ids-tag.ids-tag-filled.ids-tag-brand:disabled': {
161
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-disabled)',
162
- background: 'var(--ids-comp-tag-filled-color-bg-brand-disabled)',
163
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-disabled)',
164
- },
165
158
  '.ids-tag.ids-tag-filled.ids-tag-error': {
166
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-enabled)',
167
- background: 'var(--ids-comp-tag-filled-color-bg-error-enabled)',
168
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-enabled)',
159
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
160
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
161
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
169
162
  },
170
163
  '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
171
164
  color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
@@ -182,15 +175,10 @@ module.exports = function TagPlugin() {
182
175
  background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
183
176
  borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
184
177
  },
185
- '.ids-tag.ids-tag-filled.ids-tag-error:disabled': {
186
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-disabled)',
187
- background: 'var(--ids-comp-tag-filled-color-bg-error-disabled)',
188
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-disabled)',
189
- },
190
178
  '.ids-tag.ids-tag-filled.ids-tag-success': {
191
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-enabled)',
192
- background: 'var(--ids-comp-tag-filled-color-bg-success-enabled)',
193
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-enabled)',
179
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
180
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
181
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
194
182
  },
195
183
  '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
196
184
  color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
@@ -207,15 +195,10 @@ module.exports = function TagPlugin() {
207
195
  background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
208
196
  borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
209
197
  },
210
- '.ids-tag.ids-tag-filled.ids-tag-success:disabled': {
211
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-disabled)',
212
- background: 'var(--ids-comp-tag-filled-color-bg-success-disabled)',
213
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-disabled)',
214
- },
215
198
  '.ids-tag.ids-tag-filled.ids-tag-warning': {
216
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-enabled)',
217
- background: 'var(--ids-comp-tag-filled-color-bg-warning-enabled)',
218
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-enabled)',
199
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
200
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
201
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
219
202
  },
220
203
  '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
221
204
  color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
@@ -232,15 +215,10 @@ module.exports = function TagPlugin() {
232
215
  background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
233
216
  borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
234
217
  },
235
- '.ids-tag.ids-tag-filled.ids-tag-warning:disabled': {
236
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-disabled)',
237
- background: 'var(--ids-comp-tag-filled-color-bg-warning-disabled)',
238
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-disabled)',
239
- },
240
218
  '.ids-tag.ids-tag-filled.ids-tag-light': {
241
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-enabled)',
242
- background: 'var(--ids-comp-tag-filled-color-bg-light-enabled)',
243
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-enabled)',
219
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
220
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
221
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
244
222
  },
245
223
  '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
246
224
  color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
@@ -257,15 +235,10 @@ module.exports = function TagPlugin() {
257
235
  background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
258
236
  borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
259
237
  },
260
- '.ids-tag.ids-tag-filled.ids-tag-light:disabled': {
261
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-disabled)',
262
- background: 'var(--ids-comp-tag-filled-color-bg-light-disabled)',
263
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-disabled)',
264
- },
265
238
  '.ids-tag.ids-tag-filled.ids-tag-dark': {
266
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-enabled)',
267
- background: 'var(--ids-comp-tag-filled-color-bg-dark-enabled)',
268
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-enabled)',
239
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
240
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
241
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
269
242
  },
270
243
  '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
271
244
  color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
@@ -282,15 +255,10 @@ module.exports = function TagPlugin() {
282
255
  background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
283
256
  borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
284
257
  },
285
- '.ids-tag.ids-tag-filled.ids-tag-dark:disabled': {
286
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-disabled)',
287
- background: 'var(--ids-comp-tag-filled-color-bg-dark-disabled)',
288
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-disabled)',
289
- },
290
258
  '.ids-tag.ids-tag-filled.ids-tag-surface': {
291
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-enabled)',
292
- background: 'var(--ids-comp-tag-filled-color-bg-surface-enabled)',
293
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-enabled)',
259
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
260
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
261
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
294
262
  },
295
263
  '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
296
264
  color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
@@ -307,15 +275,10 @@ module.exports = function TagPlugin() {
307
275
  background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
308
276
  borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
309
277
  },
310
- '.ids-tag.ids-tag-filled.ids-tag-surface:disabled': {
311
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-disabled)',
312
- background: 'var(--ids-comp-tag-filled-color-bg-surface-disabled)',
313
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-disabled)',
314
- },
315
278
  '.ids-tag.ids-tag-outlined.ids-tag-primary': {
316
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-enabled)',
317
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-enabled)',
318
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-enabled)',
279
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
280
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
281
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
319
282
  },
320
283
  '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
321
284
  color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
@@ -332,15 +295,10 @@ module.exports = function TagPlugin() {
332
295
  background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
333
296
  borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
334
297
  },
335
- '.ids-tag.ids-tag-outlined.ids-tag-primary:disabled': {
336
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-disabled)',
337
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-disabled)',
338
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-disabled)',
339
- },
340
298
  '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
341
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled)',
342
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-enabled)',
343
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-enabled)',
299
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
300
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
301
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
344
302
  },
345
303
  '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
346
304
  color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
@@ -357,15 +315,10 @@ module.exports = function TagPlugin() {
357
315
  background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
358
316
  borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
359
317
  },
360
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:disabled': {
361
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled)',
362
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-disabled)',
363
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-disabled)',
364
- },
365
318
  '.ids-tag.ids-tag-outlined.ids-tag-brand': {
366
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-enabled)',
367
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-enabled)',
368
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-enabled)',
319
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
320
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
321
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
369
322
  },
370
323
  '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
371
324
  color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
@@ -382,15 +335,10 @@ module.exports = function TagPlugin() {
382
335
  background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
383
336
  borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
384
337
  },
385
- '.ids-tag.ids-tag-outlined.ids-tag-brand:disabled': {
386
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-disabled)',
387
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-disabled)',
388
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-disabled)',
389
- },
390
338
  '.ids-tag.ids-tag-outlined.ids-tag-error': {
391
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-enabled)',
392
- background: 'var(--ids-comp-tag-outlined-color-bg-error-enabled)',
393
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-enabled)',
339
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
340
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
341
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
394
342
  },
395
343
  '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
396
344
  color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
@@ -407,15 +355,10 @@ module.exports = function TagPlugin() {
407
355
  background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
408
356
  borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
409
357
  },
410
- '.ids-tag.ids-tag-outlined.ids-tag-error:disabled': {
411
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-disabled)',
412
- background: 'var(--ids-comp-tag-outlined-color-bg-error-disabled)',
413
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-disabled)',
414
- },
415
358
  '.ids-tag.ids-tag-outlined.ids-tag-success': {
416
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-enabled)',
417
- background: 'var(--ids-comp-tag-outlined-color-bg-success-enabled)',
418
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-enabled)',
359
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
360
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
361
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
419
362
  },
420
363
  '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
421
364
  color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
@@ -432,15 +375,10 @@ module.exports = function TagPlugin() {
432
375
  background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
433
376
  borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
434
377
  },
435
- '.ids-tag.ids-tag-outlined.ids-tag-success:disabled': {
436
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-disabled)',
437
- background: 'var(--ids-comp-tag-outlined-color-bg-success-disabled)',
438
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-disabled)',
439
- },
440
378
  '.ids-tag.ids-tag-outlined.ids-tag-warning': {
441
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-enabled)',
442
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-enabled)',
443
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-enabled)',
379
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
380
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
381
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
444
382
  },
445
383
  '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
446
384
  color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
@@ -457,15 +395,10 @@ module.exports = function TagPlugin() {
457
395
  background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
458
396
  borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
459
397
  },
460
- '.ids-tag.ids-tag-outlined.ids-tag-warning:disabled': {
461
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-disabled)',
462
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-disabled)',
463
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-disabled)',
464
- },
465
398
  '.ids-tag.ids-tag-outlined.ids-tag-light': {
466
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-enabled)',
467
- background: 'var(--ids-comp-tag-outlined-color-bg-light-enabled)',
468
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-enabled)',
399
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
400
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
401
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
469
402
  },
470
403
  '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
471
404
  color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
@@ -482,15 +415,10 @@ module.exports = function TagPlugin() {
482
415
  background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
483
416
  borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
484
417
  },
485
- '.ids-tag.ids-tag-outlined.ids-tag-light:disabled': {
486
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-disabled)',
487
- background: 'var(--ids-comp-tag-outlined-color-bg-light-disabled)',
488
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-disabled)',
489
- },
490
418
  '.ids-tag.ids-tag-outlined.ids-tag-dark': {
491
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-enabled)',
492
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-enabled)',
493
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-enabled)',
419
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
420
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
421
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
494
422
  },
495
423
  '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
496
424
  color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
@@ -507,15 +435,10 @@ module.exports = function TagPlugin() {
507
435
  background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
508
436
  borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
509
437
  },
510
- '.ids-tag.ids-tag-outlined.ids-tag-dark:disabled': {
511
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-disabled)',
512
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-disabled)',
513
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-disabled)',
514
- },
515
438
  '.ids-tag.ids-tag-outlined.ids-tag-surface': {
516
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-enabled)',
517
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-enabled)',
518
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-enabled)',
439
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
440
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
441
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
519
442
  },
520
443
  '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
521
444
  color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
@@ -532,236 +455,6 @@ module.exports = function TagPlugin() {
532
455
  background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
533
456
  borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
534
457
  },
535
- '.ids-tag.ids-tag-outlined.ids-tag-surface:disabled': {
536
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-disabled)',
537
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-disabled)',
538
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-disabled)',
539
- },
540
- '.ids-tag.ids-tag-text.ids-tag-primary': {
541
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-enabled)',
542
- background: 'var(--ids-comp-tag-text-color-bg-primary-enabled)',
543
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-enabled)',
544
- },
545
- '.ids-tag.ids-tag-text.ids-tag-primary:hover': {
546
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-hovered)',
547
- background: 'var(--ids-comp-tag-text-color-bg-primary-hovered)',
548
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-hovered)',
549
- },
550
- '.ids-tag.ids-tag-text.ids-tag-primary:focus': {
551
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-focused)',
552
- background: 'var(--ids-comp-tag-text-color-bg-primary-focused)',
553
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-focused)',
554
- },
555
- '.ids-tag.ids-tag-text.ids-tag-primary:active': {
556
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-pressed)',
557
- background: 'var(--ids-comp-tag-text-color-bg-primary-pressed)',
558
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-pressed)',
559
- },
560
- '.ids-tag.ids-tag-text.ids-tag-primary:disabled': {
561
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-disabled)',
562
- background: 'var(--ids-comp-tag-text-color-bg-primary-disabled)',
563
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-disabled)',
564
- },
565
- '.ids-tag.ids-tag-text.ids-tag-secondary': {
566
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-enabled)',
567
- background: 'var(--ids-comp-tag-text-color-bg-secondary-enabled)',
568
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-enabled)',
569
- },
570
- '.ids-tag.ids-tag-text.ids-tag-secondary:hover': {
571
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-hovered)',
572
- background: 'var(--ids-comp-tag-text-color-bg-secondary-hovered)',
573
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-hovered)',
574
- },
575
- '.ids-tag.ids-tag-text.ids-tag-secondary:focus': {
576
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-focused)',
577
- background: 'var(--ids-comp-tag-text-color-bg-secondary-focused)',
578
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-focused)',
579
- },
580
- '.ids-tag.ids-tag-text.ids-tag-secondary:active': {
581
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-pressed)',
582
- background: 'var(--ids-comp-tag-text-color-bg-secondary-pressed)',
583
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-pressed)',
584
- },
585
- '.ids-tag.ids-tag-text.ids-tag-secondary:disabled': {
586
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-disabled)',
587
- background: 'var(--ids-comp-tag-text-color-bg-secondary-disabled)',
588
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-disabled)',
589
- },
590
- '.ids-tag.ids-tag-text.ids-tag-brand': {
591
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-enabled)',
592
- background: 'var(--ids-comp-tag-text-color-bg-brand-enabled)',
593
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-enabled)',
594
- },
595
- '.ids-tag.ids-tag-text.ids-tag-brand:hover': {
596
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-hovered)',
597
- background: 'var(--ids-comp-tag-text-color-bg-brand-hovered)',
598
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-hovered)',
599
- },
600
- '.ids-tag.ids-tag-text.ids-tag-brand:focus': {
601
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-focused)',
602
- background: 'var(--ids-comp-tag-text-color-bg-brand-focused)',
603
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-focused)',
604
- },
605
- '.ids-tag.ids-tag-text.ids-tag-brand:active': {
606
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-pressed)',
607
- background: 'var(--ids-comp-tag-text-color-bg-brand-pressed)',
608
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-pressed)',
609
- },
610
- '.ids-tag.ids-tag-text.ids-tag-brand:disabled': {
611
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-disabled)',
612
- background: 'var(--ids-comp-tag-text-color-bg-brand-disabled)',
613
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-disabled)',
614
- },
615
- '.ids-tag.ids-tag-text.ids-tag-error': {
616
- color: 'var(--ids-comp-tag-text-color-fg-label-error-enabled)',
617
- background: 'var(--ids-comp-tag-text-color-bg-error-enabled)',
618
- borderColor: 'var(--ids-comp-tag-text-color-border-error-enabled)',
619
- },
620
- '.ids-tag.ids-tag-text.ids-tag-error:hover': {
621
- color: 'var(--ids-comp-tag-text-color-fg-label-error-hovered)',
622
- background: 'var(--ids-comp-tag-text-color-bg-error-hovered)',
623
- borderColor: 'var(--ids-comp-tag-text-color-border-error-hovered)',
624
- },
625
- '.ids-tag.ids-tag-text.ids-tag-error:focus': {
626
- color: 'var(--ids-comp-tag-text-color-fg-label-error-focused)',
627
- background: 'var(--ids-comp-tag-text-color-bg-error-focused)',
628
- borderColor: 'var(--ids-comp-tag-text-color-border-error-focused)',
629
- },
630
- '.ids-tag.ids-tag-text.ids-tag-error:active': {
631
- color: 'var(--ids-comp-tag-text-color-fg-label-error-pressed)',
632
- background: 'var(--ids-comp-tag-text-color-bg-error-pressed)',
633
- borderColor: 'var(--ids-comp-tag-text-color-border-error-pressed)',
634
- },
635
- '.ids-tag.ids-tag-text.ids-tag-error:disabled': {
636
- color: 'var(--ids-comp-tag-text-color-fg-label-error-disabled)',
637
- background: 'var(--ids-comp-tag-text-color-bg-error-disabled)',
638
- borderColor: 'var(--ids-comp-tag-text-color-border-error-disabled)',
639
- },
640
- '.ids-tag.ids-tag-text.ids-tag-success': {
641
- color: 'var(--ids-comp-tag-text-color-fg-label-success-enabled)',
642
- background: 'var(--ids-comp-tag-text-color-bg-success-enabled)',
643
- borderColor: 'var(--ids-comp-tag-text-color-border-success-enabled)',
644
- },
645
- '.ids-tag.ids-tag-text.ids-tag-success:hover': {
646
- color: 'var(--ids-comp-tag-text-color-fg-label-success-hovered)',
647
- background: 'var(--ids-comp-tag-text-color-bg-success-hovered)',
648
- borderColor: 'var(--ids-comp-tag-text-color-border-success-hovered)',
649
- },
650
- '.ids-tag.ids-tag-text.ids-tag-success:focus': {
651
- color: 'var(--ids-comp-tag-text-color-fg-label-success-focused)',
652
- background: 'var(--ids-comp-tag-text-color-bg-success-focused)',
653
- borderColor: 'var(--ids-comp-tag-text-color-border-success-focused)',
654
- },
655
- '.ids-tag.ids-tag-text.ids-tag-success:active': {
656
- color: 'var(--ids-comp-tag-text-color-fg-label-success-pressed)',
657
- background: 'var(--ids-comp-tag-text-color-bg-success-pressed)',
658
- borderColor: 'var(--ids-comp-tag-text-color-border-success-pressed)',
659
- },
660
- '.ids-tag.ids-tag-text.ids-tag-success:disabled': {
661
- color: 'var(--ids-comp-tag-text-color-fg-label-success-disabled)',
662
- background: 'var(--ids-comp-tag-text-color-bg-success-disabled)',
663
- borderColor: 'var(--ids-comp-tag-text-color-border-success-disabled)',
664
- },
665
- '.ids-tag.ids-tag-text.ids-tag-warning': {
666
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-enabled)',
667
- background: 'var(--ids-comp-tag-text-color-bg-warning-enabled)',
668
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-enabled)',
669
- },
670
- '.ids-tag.ids-tag-text.ids-tag-warning:hover': {
671
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-hovered)',
672
- background: 'var(--ids-comp-tag-text-color-bg-warning-hovered)',
673
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-hovered)',
674
- },
675
- '.ids-tag.ids-tag-text.ids-tag-warning:focus': {
676
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-focused)',
677
- background: 'var(--ids-comp-tag-text-color-bg-warning-focused)',
678
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-focused)',
679
- },
680
- '.ids-tag.ids-tag-text.ids-tag-warning:active': {
681
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-pressed)',
682
- background: 'var(--ids-comp-tag-text-color-bg-warning-pressed)',
683
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-pressed)',
684
- },
685
- '.ids-tag.ids-tag-text.ids-tag-warning:disabled': {
686
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-disabled)',
687
- background: 'var(--ids-comp-tag-text-color-bg-warning-disabled)',
688
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-disabled)',
689
- },
690
- '.ids-tag.ids-tag-text.ids-tag-light': {
691
- color: 'var(--ids-comp-tag-text-color-fg-label-light-enabled)',
692
- background: 'var(--ids-comp-tag-text-color-bg-light-enabled)',
693
- borderColor: 'var(--ids-comp-tag-text-color-border-light-enabled)',
694
- },
695
- '.ids-tag.ids-tag-text.ids-tag-light:hover': {
696
- color: 'var(--ids-comp-tag-text-color-fg-label-light-hovered)',
697
- background: 'var(--ids-comp-tag-text-color-bg-light-hovered)',
698
- borderColor: 'var(--ids-comp-tag-text-color-border-light-hovered)',
699
- },
700
- '.ids-tag.ids-tag-text.ids-tag-light:focus': {
701
- color: 'var(--ids-comp-tag-text-color-fg-label-light-focused)',
702
- background: 'var(--ids-comp-tag-text-color-bg-light-focused)',
703
- borderColor: 'var(--ids-comp-tag-text-color-border-light-focused)',
704
- },
705
- '.ids-tag.ids-tag-text.ids-tag-light:active': {
706
- color: 'var(--ids-comp-tag-text-color-fg-label-light-pressed)',
707
- background: 'var(--ids-comp-tag-text-color-bg-light-pressed)',
708
- borderColor: 'var(--ids-comp-tag-text-color-border-light-pressed)',
709
- },
710
- '.ids-tag.ids-tag-text.ids-tag-light:disabled': {
711
- color: 'var(--ids-comp-tag-text-color-fg-label-light-disabled)',
712
- background: 'var(--ids-comp-tag-text-color-bg-light-disabled)',
713
- borderColor: 'var(--ids-comp-tag-text-color-border-light-disabled)',
714
- },
715
- '.ids-tag.ids-tag-text.ids-tag-dark': {
716
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-enabled)',
717
- background: 'var(--ids-comp-tag-text-color-bg-dark-enabled)',
718
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-enabled)',
719
- },
720
- '.ids-tag.ids-tag-text.ids-tag-dark:hover': {
721
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-hovered)',
722
- background: 'var(--ids-comp-tag-text-color-bg-dark-hovered)',
723
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-hovered)',
724
- },
725
- '.ids-tag.ids-tag-text.ids-tag-dark:focus': {
726
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-focused)',
727
- background: 'var(--ids-comp-tag-text-color-bg-dark-focused)',
728
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-focused)',
729
- },
730
- '.ids-tag.ids-tag-text.ids-tag-dark:active': {
731
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-pressed)',
732
- background: 'var(--ids-comp-tag-text-color-bg-dark-pressed)',
733
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-pressed)',
734
- },
735
- '.ids-tag.ids-tag-text.ids-tag-dark:disabled': {
736
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-disabled)',
737
- background: 'var(--ids-comp-tag-text-color-bg-dark-disabled)',
738
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-disabled)',
739
- },
740
- '.ids-tag.ids-tag-text.ids-tag-surface': {
741
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-enabled)',
742
- background: 'var(--ids-comp-tag-text-color-bg-surface-enabled)',
743
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-enabled)',
744
- },
745
- '.ids-tag.ids-tag-text.ids-tag-surface:hover': {
746
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-hovered)',
747
- background: 'var(--ids-comp-tag-text-color-bg-surface-hovered)',
748
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-hovered)',
749
- },
750
- '.ids-tag.ids-tag-text.ids-tag-surface:focus': {
751
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-focused)',
752
- background: 'var(--ids-comp-tag-text-color-bg-surface-focused)',
753
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-focused)',
754
- },
755
- '.ids-tag.ids-tag-text.ids-tag-surface:active': {
756
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-pressed)',
757
- background: 'var(--ids-comp-tag-text-color-bg-surface-pressed)',
758
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-pressed)',
759
- },
760
- '.ids-tag.ids-tag-text.ids-tag-surface:disabled': {
761
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-disabled)',
762
- background: 'var(--ids-comp-tag-text-color-bg-surface-disabled)',
763
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-disabled)',
764
- },
765
458
  };
766
459
 
767
460
  addComponents(cssObj);