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