@i-cell/ids-styles 0.0.15-beta.9 → 0.0.15

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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2284 -1615
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2619 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
package/dist/tag/tag.plugin.js CHANGED
@@ -11,18 +11,9 @@ module.exports = function TagPlugin() {
11
11
  borderStyle: 'solid',
12
12
  boxSizing: 'border-box',
13
13
  },
14
- '.ids-tag:focus': {
15
- outlineOffset: '2px',
16
- outline: 'var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused)',
17
- },
18
- '.ids-tag:focus.ids-tag-light': { outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)' },
14
+ '.ids-tag:focus,.ids-tag:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
19
15
  '.ids-tag:active': { outline: 'none' },
20
- '.ids-tag *[icon-leading],.ids-tag *[icon-trailing]': {
21
- gap: '10px',
22
- display: 'flex',
23
- alignItems: 'center',
24
- justifyContent: 'center',
25
- },
16
+ '.ids-tag .ids-icon': { color: 'inherit' },
26
17
  '.ids-tag.ids-tag-compact': {
27
18
  gap: 'var(--ids-comp-tag-size-gap-compact)',
28
19
  height: 'var(--ids-comp-tag-size-height-compact)',
@@ -30,6 +21,9 @@ module.exports = function TagPlugin() {
30
21
  borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
31
22
  border: 'var(--ids-comp-tag-size-border-width-compact)',
32
23
  },
24
+ '.ids-tag.ids-tag-compact:focus,.ids-tag.ids-tag-compact:focus-visible': {
25
+ outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-compact)',
26
+ },
33
27
  '.ids-tag.ids-tag-compact>.ids-tag-label': {
34
28
  fontFamily: 'var(--ids-comp-tag-label-typography-font-family-compact)',
35
29
  fontSize: 'var(--ids-comp-tag-label-typography-font-size-compact)',
@@ -37,9 +31,12 @@ module.exports = function TagPlugin() {
37
31
  letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-compact)',
38
32
  lineHeight: 'var(--ids-comp-tag-label-typography-line-height-compact)',
39
33
  },
40
- '.ids-tag.ids-tag-compact *[icon-leading],.ids-tag.ids-tag-compact *[icon-trailing]': {
34
+ '.ids-tag.ids-tag-compact .ids-icon': {
41
35
  width: 'var(--ids-comp-tag-size-icon-compact)',
42
36
  height: 'var(--ids-comp-tag-size-icon-compact)',
37
+ fontSize: 'var(--ids-comp-tag-icon-typography-font-size-compact)',
38
+ fontWeight: 'var(--ids-comp-tag-icon-typography-font-weight-compact)',
39
+ lineHeight: 'var(--ids-comp-tag-icon-typography-line-height-compact)',
43
40
  },
44
41
  '.ids-tag.ids-tag-comfortable': {
45
42
  gap: 'var(--ids-comp-tag-size-gap-comfortable)',
@@ -48,6 +45,9 @@ module.exports = function TagPlugin() {
48
45
  borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
49
46
  border: 'var(--ids-comp-tag-size-border-width-comfortable)',
50
47
  },
48
+ '.ids-tag.ids-tag-comfortable:focus,.ids-tag.ids-tag-comfortable:focus-visible': {
49
+ outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-comfortable)',
50
+ },
51
51
  '.ids-tag.ids-tag-comfortable>.ids-tag-label': {
52
52
  fontFamily: 'var(--ids-comp-tag-label-typography-font-family-comfortable)',
53
53
  fontSize: 'var(--ids-comp-tag-label-typography-font-size-comfortable)',
@@ -55,9 +55,12 @@ module.exports = function TagPlugin() {
55
55
  letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-comfortable)',
56
56
  lineHeight: 'var(--ids-comp-tag-label-typography-line-height-comfortable)',
57
57
  },
58
- '.ids-tag.ids-tag-comfortable *[icon-leading],.ids-tag.ids-tag-comfortable *[icon-trailing]': {
58
+ '.ids-tag.ids-tag-comfortable .ids-icon': {
59
59
  width: 'var(--ids-comp-tag-size-icon-comfortable)',
60
60
  height: 'var(--ids-comp-tag-size-icon-comfortable)',
61
+ fontSize: 'var(--ids-comp-tag-icon-typography-font-size-comfortable)',
62
+ fontWeight: 'var(--ids-comp-tag-icon-typography-font-weight-comfortable)',
63
+ lineHeight: 'var(--ids-comp-tag-icon-typography-line-height-comfortable)',
61
64
  },
62
65
  '.ids-tag.ids-tag-spacious': {
63
66
  gap: 'var(--ids-comp-tag-size-gap-spacious)',
@@ -66,6 +69,9 @@ module.exports = function TagPlugin() {
66
69
  borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
67
70
  border: 'var(--ids-comp-tag-size-border-width-spacious)',
68
71
  },
72
+ '.ids-tag.ids-tag-spacious:focus,.ids-tag.ids-tag-spacious:focus-visible': {
73
+ outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-spacious)',
74
+ },
69
75
  '.ids-tag.ids-tag-spacious>.ids-tag-label': {
70
76
  fontFamily: 'var(--ids-comp-tag-label-typography-font-family-spacious)',
71
77
  fontSize: 'var(--ids-comp-tag-label-typography-font-size-spacious)',
@@ -73,9 +79,12 @@ module.exports = function TagPlugin() {
73
79
  letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-spacious)',
74
80
  lineHeight: 'var(--ids-comp-tag-label-typography-line-height-spacious)',
75
81
  },
76
- '.ids-tag.ids-tag-spacious *[icon-leading],.ids-tag.ids-tag-spacious *[icon-trailing]': {
82
+ '.ids-tag.ids-tag-spacious .ids-icon': {
77
83
  width: 'var(--ids-comp-tag-size-icon-spacious)',
78
84
  height: 'var(--ids-comp-tag-size-icon-spacious)',
85
+ fontSize: 'var(--ids-comp-tag-icon-typography-font-size-spacious)',
86
+ fontWeight: 'var(--ids-comp-tag-icon-typography-font-weight-spacious)',
87
+ lineHeight: 'var(--ids-comp-tag-icon-typography-line-height-spacious)',
79
88
  },
80
89
  '.ids-tag.ids-tag-dense': {
81
90
  gap: 'var(--ids-comp-tag-size-gap-dense)',
@@ -84,6 +93,9 @@ module.exports = function TagPlugin() {
84
93
  borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
85
94
  border: 'var(--ids-comp-tag-size-border-width-dense)',
86
95
  },
96
+ '.ids-tag.ids-tag-dense:focus,.ids-tag.ids-tag-dense:focus-visible': {
97
+ outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-dense)',
98
+ },
87
99
  '.ids-tag.ids-tag-dense>.ids-tag-label': {
88
100
  fontFamily: 'var(--ids-comp-tag-label-typography-font-family-dense)',
89
101
  fontSize: 'var(--ids-comp-tag-label-typography-font-size-dense)',
@@ -91,9 +103,12 @@ module.exports = function TagPlugin() {
91
103
  letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-dense)',
92
104
  lineHeight: 'var(--ids-comp-tag-label-typography-line-height-dense)',
93
105
  },
94
- '.ids-tag.ids-tag-dense *[icon-leading],.ids-tag.ids-tag-dense *[icon-trailing]': {
106
+ '.ids-tag.ids-tag-dense .ids-icon': {
95
107
  width: 'var(--ids-comp-tag-size-icon-dense)',
96
108
  height: 'var(--ids-comp-tag-size-icon-dense)',
109
+ fontSize: 'var(--ids-comp-tag-icon-typography-font-size-dense)',
110
+ fontWeight: 'var(--ids-comp-tag-icon-typography-font-weight-dense)',
111
+ lineHeight: 'var(--ids-comp-tag-icon-typography-line-height-dense)',
97
112
  },
98
113
  '.ids-tag.ids-tag-filled.ids-tag-primary': {
99
114
  color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
@@ -101,19 +116,20 @@ module.exports = function TagPlugin() {
101
116
  borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
102
117
  },
103
118
  '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
104
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
105
- background: 'var(--ids-comp-tag-filled-color-bg-primary-hovered)',
106
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-hovered)',
119
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
120
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
121
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
107
122
  },
108
- '.ids-tag.ids-tag-filled.ids-tag-primary:focus': {
109
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-focused)',
110
- background: 'var(--ids-comp-tag-filled-color-bg-primary-focused)',
111
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-focused)',
123
+ '.ids-tag.ids-tag-filled.ids-tag-primary:focus,.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible': {
124
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
125
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
126
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
127
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
112
128
  },
113
129
  '.ids-tag.ids-tag-filled.ids-tag-primary:active': {
114
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-pressed)',
115
- background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
116
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
130
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
131
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
132
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
117
133
  },
118
134
  '.ids-tag.ids-tag-filled.ids-tag-secondary': {
119
135
  color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
@@ -121,19 +137,20 @@ module.exports = function TagPlugin() {
121
137
  borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
122
138
  },
123
139
  '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
124
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
125
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-hovered)',
126
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-hovered)',
140
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
141
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
142
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
127
143
  },
128
- '.ids-tag.ids-tag-filled.ids-tag-secondary:focus': {
129
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-focused)',
130
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-focused)',
131
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-focused)',
144
+ '.ids-tag.ids-tag-filled.ids-tag-secondary:focus,.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible': {
145
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
146
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
147
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
148
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
132
149
  },
133
150
  '.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
134
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-pressed)',
135
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
136
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
151
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
152
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
153
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
137
154
  },
138
155
  '.ids-tag.ids-tag-filled.ids-tag-brand': {
139
156
  color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
@@ -141,19 +158,20 @@ module.exports = function TagPlugin() {
141
158
  borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
142
159
  },
143
160
  '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
144
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
145
- background: 'var(--ids-comp-tag-filled-color-bg-brand-hovered)',
146
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-hovered)',
161
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
162
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
163
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
147
164
  },
148
- '.ids-tag.ids-tag-filled.ids-tag-brand:focus': {
149
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-focused)',
150
- background: 'var(--ids-comp-tag-filled-color-bg-brand-focused)',
151
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-focused)',
165
+ '.ids-tag.ids-tag-filled.ids-tag-brand:focus,.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible': {
166
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
167
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
168
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
169
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
152
170
  },
153
171
  '.ids-tag.ids-tag-filled.ids-tag-brand:active': {
154
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-pressed)',
155
- background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
156
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
172
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
173
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
174
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
157
175
  },
158
176
  '.ids-tag.ids-tag-filled.ids-tag-error': {
159
177
  color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
@@ -161,19 +179,20 @@ module.exports = function TagPlugin() {
161
179
  borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
162
180
  },
163
181
  '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
164
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
165
- background: 'var(--ids-comp-tag-filled-color-bg-error-hovered)',
166
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-hovered)',
182
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
183
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
184
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
167
185
  },
168
- '.ids-tag.ids-tag-filled.ids-tag-error:focus': {
169
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-focused)',
170
- background: 'var(--ids-comp-tag-filled-color-bg-error-focused)',
171
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-focused)',
186
+ '.ids-tag.ids-tag-filled.ids-tag-error:focus,.ids-tag.ids-tag-filled.ids-tag-error:focus-visible': {
187
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
188
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
189
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
190
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
172
191
  },
173
192
  '.ids-tag.ids-tag-filled.ids-tag-error:active': {
174
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-pressed)',
175
- background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
176
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
193
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
194
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
195
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
177
196
  },
178
197
  '.ids-tag.ids-tag-filled.ids-tag-success': {
179
198
  color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
@@ -181,19 +200,20 @@ module.exports = function TagPlugin() {
181
200
  borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
182
201
  },
183
202
  '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
184
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
185
- background: 'var(--ids-comp-tag-filled-color-bg-success-hovered)',
186
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-hovered)',
203
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
204
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
205
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
187
206
  },
188
- '.ids-tag.ids-tag-filled.ids-tag-success:focus': {
189
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-focused)',
190
- background: 'var(--ids-comp-tag-filled-color-bg-success-focused)',
191
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-focused)',
207
+ '.ids-tag.ids-tag-filled.ids-tag-success:focus,.ids-tag.ids-tag-filled.ids-tag-success:focus-visible': {
208
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
209
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
210
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
211
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
192
212
  },
193
213
  '.ids-tag.ids-tag-filled.ids-tag-success:active': {
194
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-pressed)',
195
- background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
196
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
214
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
215
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
216
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
197
217
  },
198
218
  '.ids-tag.ids-tag-filled.ids-tag-warning': {
199
219
  color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
@@ -201,19 +221,20 @@ module.exports = function TagPlugin() {
201
221
  borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
202
222
  },
203
223
  '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
204
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
205
- background: 'var(--ids-comp-tag-filled-color-bg-warning-hovered)',
206
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-hovered)',
224
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
225
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
226
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
207
227
  },
208
- '.ids-tag.ids-tag-filled.ids-tag-warning:focus': {
209
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-focused)',
210
- background: 'var(--ids-comp-tag-filled-color-bg-warning-focused)',
211
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-focused)',
228
+ '.ids-tag.ids-tag-filled.ids-tag-warning:focus,.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible': {
229
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
230
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
231
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
232
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
212
233
  },
213
234
  '.ids-tag.ids-tag-filled.ids-tag-warning:active': {
214
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-pressed)',
215
- background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
216
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
235
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
236
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
237
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
217
238
  },
218
239
  '.ids-tag.ids-tag-filled.ids-tag-light': {
219
240
  color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
@@ -221,19 +242,20 @@ module.exports = function TagPlugin() {
221
242
  borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
222
243
  },
223
244
  '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
224
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
225
- background: 'var(--ids-comp-tag-filled-color-bg-light-hovered)',
226
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-hovered)',
245
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
246
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
247
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
227
248
  },
228
- '.ids-tag.ids-tag-filled.ids-tag-light:focus': {
229
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-focused)',
230
- background: 'var(--ids-comp-tag-filled-color-bg-light-focused)',
231
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-focused)',
249
+ '.ids-tag.ids-tag-filled.ids-tag-light:focus,.ids-tag.ids-tag-filled.ids-tag-light:focus-visible': {
250
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
251
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
252
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
253
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
232
254
  },
233
255
  '.ids-tag.ids-tag-filled.ids-tag-light:active': {
234
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-pressed)',
235
- background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
236
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
256
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
257
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
258
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
237
259
  },
238
260
  '.ids-tag.ids-tag-filled.ids-tag-dark': {
239
261
  color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
@@ -241,19 +263,20 @@ module.exports = function TagPlugin() {
241
263
  borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
242
264
  },
243
265
  '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
244
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
245
- background: 'var(--ids-comp-tag-filled-color-bg-dark-hovered)',
246
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-hovered)',
266
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
267
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
268
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
247
269
  },
248
- '.ids-tag.ids-tag-filled.ids-tag-dark:focus': {
249
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-focused)',
250
- background: 'var(--ids-comp-tag-filled-color-bg-dark-focused)',
251
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-focused)',
270
+ '.ids-tag.ids-tag-filled.ids-tag-dark:focus,.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible': {
271
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
272
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
273
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
274
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
252
275
  },
253
276
  '.ids-tag.ids-tag-filled.ids-tag-dark:active': {
254
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-pressed)',
255
- background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
256
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
277
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
278
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
279
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
257
280
  },
258
281
  '.ids-tag.ids-tag-filled.ids-tag-surface': {
259
282
  color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
@@ -261,19 +284,20 @@ module.exports = function TagPlugin() {
261
284
  borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
262
285
  },
263
286
  '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
264
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
265
- background: 'var(--ids-comp-tag-filled-color-bg-surface-hovered)',
266
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-hovered)',
287
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
288
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
289
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
267
290
  },
268
- '.ids-tag.ids-tag-filled.ids-tag-surface:focus': {
269
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-focused)',
270
- background: 'var(--ids-comp-tag-filled-color-bg-surface-focused)',
271
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-focused)',
291
+ '.ids-tag.ids-tag-filled.ids-tag-surface:focus,.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible': {
292
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
293
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
294
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
295
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
272
296
  },
273
297
  '.ids-tag.ids-tag-filled.ids-tag-surface:active': {
274
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-pressed)',
275
- background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
276
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
298
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
299
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
300
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
277
301
  },
278
302
  '.ids-tag.ids-tag-outlined.ids-tag-primary': {
279
303
  color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
@@ -281,19 +305,20 @@ module.exports = function TagPlugin() {
281
305
  borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
282
306
  },
283
307
  '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
284
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
285
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-hovered)',
286
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-hovered)',
308
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
309
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
310
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
287
311
  },
288
- '.ids-tag.ids-tag-outlined.ids-tag-primary:focus': {
289
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-focused)',
290
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-focused)',
291
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-focused)',
312
+ '.ids-tag.ids-tag-outlined.ids-tag-primary:focus,.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible': {
313
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
314
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
315
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
316
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
292
317
  },
293
318
  '.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
294
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-pressed)',
295
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
296
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
319
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
320
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
321
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
297
322
  },
298
323
  '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
299
324
  color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
@@ -301,19 +326,20 @@ module.exports = function TagPlugin() {
301
326
  borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
302
327
  },
303
328
  '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
304
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
305
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-hovered)',
306
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-hovered)',
329
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
330
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
331
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
307
332
  },
308
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus': {
309
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-focused)',
310
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-focused)',
311
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-focused)',
333
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus,.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible': {
334
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
335
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
336
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
337
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
312
338
  },
313
339
  '.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
314
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed)',
315
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
316
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
340
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
341
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
342
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
317
343
  },
318
344
  '.ids-tag.ids-tag-outlined.ids-tag-brand': {
319
345
  color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
@@ -321,19 +347,20 @@ module.exports = function TagPlugin() {
321
347
  borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
322
348
  },
323
349
  '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
324
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
325
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-hovered)',
326
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-hovered)',
350
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
351
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
352
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
327
353
  },
328
- '.ids-tag.ids-tag-outlined.ids-tag-brand:focus': {
329
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-focused)',
330
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-focused)',
331
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-focused)',
354
+ '.ids-tag.ids-tag-outlined.ids-tag-brand:focus,.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible': {
355
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
356
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
357
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
358
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
332
359
  },
333
360
  '.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
334
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-pressed)',
335
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
336
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
361
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
362
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
363
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
337
364
  },
338
365
  '.ids-tag.ids-tag-outlined.ids-tag-error': {
339
366
  color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
@@ -341,19 +368,20 @@ module.exports = function TagPlugin() {
341
368
  borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
342
369
  },
343
370
  '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
344
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
345
- background: 'var(--ids-comp-tag-outlined-color-bg-error-hovered)',
346
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-hovered)',
371
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
372
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
373
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
347
374
  },
348
- '.ids-tag.ids-tag-outlined.ids-tag-error:focus': {
349
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-focused)',
350
- background: 'var(--ids-comp-tag-outlined-color-bg-error-focused)',
351
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-focused)',
375
+ '.ids-tag.ids-tag-outlined.ids-tag-error:focus,.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible': {
376
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
377
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
378
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
379
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
352
380
  },
353
381
  '.ids-tag.ids-tag-outlined.ids-tag-error:active': {
354
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-pressed)',
355
- background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
356
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
382
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
383
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
384
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
357
385
  },
358
386
  '.ids-tag.ids-tag-outlined.ids-tag-success': {
359
387
  color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
@@ -361,19 +389,20 @@ module.exports = function TagPlugin() {
361
389
  borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
362
390
  },
363
391
  '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
364
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
365
- background: 'var(--ids-comp-tag-outlined-color-bg-success-hovered)',
366
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-hovered)',
392
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
393
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
394
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
367
395
  },
368
- '.ids-tag.ids-tag-outlined.ids-tag-success:focus': {
369
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-focused)',
370
- background: 'var(--ids-comp-tag-outlined-color-bg-success-focused)',
371
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-focused)',
396
+ '.ids-tag.ids-tag-outlined.ids-tag-success:focus,.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible': {
397
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
398
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
399
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
400
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
372
401
  },
373
402
  '.ids-tag.ids-tag-outlined.ids-tag-success:active': {
374
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-pressed)',
375
- background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
376
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
403
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
404
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
405
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
377
406
  },
378
407
  '.ids-tag.ids-tag-outlined.ids-tag-warning': {
379
408
  color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
@@ -381,19 +410,20 @@ module.exports = function TagPlugin() {
381
410
  borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
382
411
  },
383
412
  '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
384
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
385
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-hovered)',
386
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-hovered)',
413
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
414
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
415
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
387
416
  },
388
- '.ids-tag.ids-tag-outlined.ids-tag-warning:focus': {
389
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-focused)',
390
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-focused)',
391
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-focused)',
417
+ '.ids-tag.ids-tag-outlined.ids-tag-warning:focus,.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible': {
418
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
419
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
420
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
421
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
392
422
  },
393
423
  '.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
394
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-pressed)',
395
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
396
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
424
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
425
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
426
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
397
427
  },
398
428
  '.ids-tag.ids-tag-outlined.ids-tag-light': {
399
429
  color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
@@ -401,19 +431,20 @@ module.exports = function TagPlugin() {
401
431
  borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
402
432
  },
403
433
  '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
404
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
405
- background: 'var(--ids-comp-tag-outlined-color-bg-light-hovered)',
406
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-hovered)',
434
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
435
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
436
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
407
437
  },
408
- '.ids-tag.ids-tag-outlined.ids-tag-light:focus': {
409
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-focused)',
410
- background: 'var(--ids-comp-tag-outlined-color-bg-light-focused)',
411
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-focused)',
438
+ '.ids-tag.ids-tag-outlined.ids-tag-light:focus,.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible': {
439
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
440
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
441
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
442
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
412
443
  },
413
444
  '.ids-tag.ids-tag-outlined.ids-tag-light:active': {
414
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-pressed)',
415
- background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
416
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
445
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
446
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
447
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
417
448
  },
418
449
  '.ids-tag.ids-tag-outlined.ids-tag-dark': {
419
450
  color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
@@ -421,19 +452,20 @@ module.exports = function TagPlugin() {
421
452
  borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
422
453
  },
423
454
  '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
424
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
425
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-hovered)',
426
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-hovered)',
455
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
456
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
457
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
427
458
  },
428
- '.ids-tag.ids-tag-outlined.ids-tag-dark:focus': {
429
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-focused)',
430
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-focused)',
431
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-focused)',
459
+ '.ids-tag.ids-tag-outlined.ids-tag-dark:focus,.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible': {
460
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
461
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
462
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
463
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
432
464
  },
433
465
  '.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
434
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-pressed)',
435
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
436
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
466
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
467
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
468
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
437
469
  },
438
470
  '.ids-tag.ids-tag-outlined.ids-tag-surface': {
439
471
  color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
@@ -441,19 +473,20 @@ module.exports = function TagPlugin() {
441
473
  borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
442
474
  },
443
475
  '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
444
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
445
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-hovered)',
446
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-hovered)',
476
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
477
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
478
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
447
479
  },
448
- '.ids-tag.ids-tag-outlined.ids-tag-surface:focus': {
449
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-focused)',
450
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-focused)',
451
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-focused)',
480
+ '.ids-tag.ids-tag-outlined.ids-tag-surface:focus,.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible': {
481
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
482
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
483
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
484
+ outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
452
485
  },
453
486
  '.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
454
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-pressed)',
455
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
456
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
487
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
488
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
489
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
457
490
  },
458
491
  'button.ids-tag :not(:disabled)': { cursor: 'pointer' },
459
492
  'button.ids-tag :disabled': { cursor: 'not-allowed' },