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

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 +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  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 +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  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/button/button.css CHANGED
@@ -6,15 +6,12 @@
6
6
  justify-content: center;
7
7
  border-style: solid;
8
8
  }
9
- .ids-button:focus {
9
+ .ids-button:focus, .ids-button:focus-visible {
10
10
  outline-offset: 2px;
11
- outline: var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused);
12
- }
13
- .ids-button:focus.ids-button-light {
14
- outline-color: var(--ids-comp-buttons-focused-outline-color-light-focused);
11
+ outline-style: solid;
15
12
  }
16
13
  .ids-button:active {
17
- outline: none;
14
+ outline-style: none;
18
15
  }
19
16
  .ids-button:not(:disabled) {
20
17
  cursor: pointer;
@@ -22,1129 +19,1264 @@
22
19
  .ids-button:disabled {
23
20
  cursor: not-allowed;
24
21
  }
25
- .ids-button .ids-icon {
22
+ .ids-button > .ids-icon {
26
23
  flex-shrink: 0;
27
24
  }
28
25
  .ids-button.ids-button-compact {
29
- gap: var(--ids-comp-buttons-size-gap-compact);
30
- height: var(--ids-comp-buttons-size-height-compact);
31
- min-width: var(--ids-comp-buttons-size-min-width-compact);
32
- padding: var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact);
33
- border-radius: var(--ids-comp-buttons-size-border-radius-compact);
34
- border-width: var(--ids-comp-buttons-size-border-width-compact);
26
+ gap: var(--ids-comp-button-size-gap-compact);
27
+ height: var(--ids-comp-button-size-height-compact);
28
+ min-width: var(--ids-comp-button-size-min-width-compact);
29
+ padding: var(--ids-comp-button-size-padding-y-compact) var(--ids-comp-button-size-padding-x-compact);
30
+ border-radius: var(--ids-comp-button-size-border-radius-compact);
31
+ border-width: var(--ids-comp-button-size-border-width-compact);
32
+ }
33
+ .ids-button.ids-button-compact:focus {
34
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
35
35
  }
36
36
  .ids-button.ids-button-compact > .ids-button-label {
37
- font-family: var(--ids-comp-buttons-label-typography-font-family-compact);
38
- font-size: var(--ids-comp-buttons-label-typography-font-size-compact);
39
- font-weight: var(--ids-comp-buttons-label-typography-font-weight-compact);
40
- letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-compact);
41
- line-height: var(--ids-comp-buttons-label-typography-line-height-compact);
37
+ font-family: var(--ids-comp-button-label-typography-font-family-compact);
38
+ font-size: var(--ids-comp-button-label-typography-font-size-compact);
39
+ font-weight: var(--ids-comp-button-label-typography-font-weight-compact);
40
+ letter-spacing: var(--ids-comp-button-label-typography-letter-spacing-compact);
41
+ line-height: var(--ids-comp-button-label-typography-line-height-compact);
42
42
  }
43
43
  .ids-button.ids-button-compact > .ids-icon {
44
- font-size: var(--ids-comp-buttons-icon-typography-font-size-compact);
45
- font-weight: var(--ids-comp-buttons-icon-typography-font-weight-compact);
46
- line-height: var(--ids-comp-buttons-icon-typography-line-height-compact);
47
- width: var(--ids-comp-buttons-size-icon-compact);
48
- height: var(--ids-comp-buttons-size-icon-compact);
44
+ width: var(--ids-comp-button-size-icon-compact);
45
+ height: var(--ids-comp-button-size-icon-compact);
46
+ font-size: var(--ids-comp-button-icon-typography-font-size-compact);
47
+ font-weight: var(--ids-comp-button-icon-typography-font-weight-compact);
48
+ line-height: var(--ids-comp-button-icon-typography-line-height-compact);
49
49
  }
50
50
  .ids-button.ids-button-comfortable {
51
- gap: var(--ids-comp-buttons-size-gap-comfortable);
52
- height: var(--ids-comp-buttons-size-height-comfortable);
53
- min-width: var(--ids-comp-buttons-size-min-width-comfortable);
54
- padding: var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable);
55
- border-radius: var(--ids-comp-buttons-size-border-radius-comfortable);
56
- border-width: var(--ids-comp-buttons-size-border-width-comfortable);
51
+ gap: var(--ids-comp-button-size-gap-comfortable);
52
+ height: var(--ids-comp-button-size-height-comfortable);
53
+ min-width: var(--ids-comp-button-size-min-width-comfortable);
54
+ padding: var(--ids-comp-button-size-padding-y-comfortable) var(--ids-comp-button-size-padding-x-comfortable);
55
+ border-radius: var(--ids-comp-button-size-border-radius-comfortable);
56
+ border-width: var(--ids-comp-button-size-border-width-comfortable);
57
+ }
58
+ .ids-button.ids-button-comfortable:focus {
59
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
57
60
  }
58
61
  .ids-button.ids-button-comfortable > .ids-button-label {
59
- font-family: var(--ids-comp-buttons-label-typography-font-family-comfortable);
60
- font-size: var(--ids-comp-buttons-label-typography-font-size-comfortable);
61
- font-weight: var(--ids-comp-buttons-label-typography-font-weight-comfortable);
62
- letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-comfortable);
63
- line-height: var(--ids-comp-buttons-label-typography-line-height-comfortable);
62
+ font-family: var(--ids-comp-button-label-typography-font-family-comfortable);
63
+ font-size: var(--ids-comp-button-label-typography-font-size-comfortable);
64
+ font-weight: var(--ids-comp-button-label-typography-font-weight-comfortable);
65
+ letter-spacing: var(--ids-comp-button-label-typography-letter-spacing-comfortable);
66
+ line-height: var(--ids-comp-button-label-typography-line-height-comfortable);
64
67
  }
65
68
  .ids-button.ids-button-comfortable > .ids-icon {
66
- font-size: var(--ids-comp-buttons-icon-typography-font-size-comfortable);
67
- font-weight: var(--ids-comp-buttons-icon-typography-font-weight-comfortable);
68
- line-height: var(--ids-comp-buttons-icon-typography-line-height-comfortable);
69
- width: var(--ids-comp-buttons-size-icon-comfortable);
70
- height: var(--ids-comp-buttons-size-icon-comfortable);
69
+ width: var(--ids-comp-button-size-icon-comfortable);
70
+ height: var(--ids-comp-button-size-icon-comfortable);
71
+ font-size: var(--ids-comp-button-icon-typography-font-size-comfortable);
72
+ font-weight: var(--ids-comp-button-icon-typography-font-weight-comfortable);
73
+ line-height: var(--ids-comp-button-icon-typography-line-height-comfortable);
71
74
  }
72
75
  .ids-button.ids-button-spacious {
73
- gap: var(--ids-comp-buttons-size-gap-spacious);
74
- height: var(--ids-comp-buttons-size-height-spacious);
75
- min-width: var(--ids-comp-buttons-size-min-width-spacious);
76
- padding: var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious);
77
- border-radius: var(--ids-comp-buttons-size-border-radius-spacious);
78
- border-width: var(--ids-comp-buttons-size-border-width-spacious);
76
+ gap: var(--ids-comp-button-size-gap-spacious);
77
+ height: var(--ids-comp-button-size-height-spacious);
78
+ min-width: var(--ids-comp-button-size-min-width-spacious);
79
+ padding: var(--ids-comp-button-size-padding-y-spacious) var(--ids-comp-button-size-padding-x-spacious);
80
+ border-radius: var(--ids-comp-button-size-border-radius-spacious);
81
+ border-width: var(--ids-comp-button-size-border-width-spacious);
82
+ }
83
+ .ids-button.ids-button-spacious:focus {
84
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
79
85
  }
80
86
  .ids-button.ids-button-spacious > .ids-button-label {
81
- font-family: var(--ids-comp-buttons-label-typography-font-family-spacious);
82
- font-size: var(--ids-comp-buttons-label-typography-font-size-spacious);
83
- font-weight: var(--ids-comp-buttons-label-typography-font-weight-spacious);
84
- letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-spacious);
85
- line-height: var(--ids-comp-buttons-label-typography-line-height-spacious);
87
+ font-family: var(--ids-comp-button-label-typography-font-family-spacious);
88
+ font-size: var(--ids-comp-button-label-typography-font-size-spacious);
89
+ font-weight: var(--ids-comp-button-label-typography-font-weight-spacious);
90
+ letter-spacing: var(--ids-comp-button-label-typography-letter-spacing-spacious);
91
+ line-height: var(--ids-comp-button-label-typography-line-height-spacious);
86
92
  }
87
93
  .ids-button.ids-button-spacious > .ids-icon {
88
- font-size: var(--ids-comp-buttons-icon-typography-font-size-spacious);
89
- font-weight: var(--ids-comp-buttons-icon-typography-font-weight-spacious);
90
- line-height: var(--ids-comp-buttons-icon-typography-line-height-spacious);
91
- width: var(--ids-comp-buttons-size-icon-spacious);
92
- height: var(--ids-comp-buttons-size-icon-spacious);
94
+ width: var(--ids-comp-button-size-icon-spacious);
95
+ height: var(--ids-comp-button-size-icon-spacious);
96
+ font-size: var(--ids-comp-button-icon-typography-font-size-spacious);
97
+ font-weight: var(--ids-comp-button-icon-typography-font-weight-spacious);
98
+ line-height: var(--ids-comp-button-icon-typography-line-height-spacious);
93
99
  }
94
100
  .ids-button.ids-button-dense {
95
- gap: var(--ids-comp-buttons-size-gap-dense);
96
- height: var(--ids-comp-buttons-size-height-dense);
97
- min-width: var(--ids-comp-buttons-size-min-width-dense);
98
- padding: var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense);
99
- border-radius: var(--ids-comp-buttons-size-border-radius-dense);
100
- border-width: var(--ids-comp-buttons-size-border-width-dense);
101
+ gap: var(--ids-comp-button-size-gap-dense);
102
+ height: var(--ids-comp-button-size-height-dense);
103
+ min-width: var(--ids-comp-button-size-min-width-dense);
104
+ padding: var(--ids-comp-button-size-padding-y-dense) var(--ids-comp-button-size-padding-x-dense);
105
+ border-radius: var(--ids-comp-button-size-border-radius-dense);
106
+ border-width: var(--ids-comp-button-size-border-width-dense);
107
+ }
108
+ .ids-button.ids-button-dense:focus {
109
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
101
110
  }
102
111
  .ids-button.ids-button-dense > .ids-button-label {
103
- font-family: var(--ids-comp-buttons-label-typography-font-family-dense);
104
- font-size: var(--ids-comp-buttons-label-typography-font-size-dense);
105
- font-weight: var(--ids-comp-buttons-label-typography-font-weight-dense);
106
- letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-dense);
107
- line-height: var(--ids-comp-buttons-label-typography-line-height-dense);
112
+ font-family: var(--ids-comp-button-label-typography-font-family-dense);
113
+ font-size: var(--ids-comp-button-label-typography-font-size-dense);
114
+ font-weight: var(--ids-comp-button-label-typography-font-weight-dense);
115
+ letter-spacing: var(--ids-comp-button-label-typography-letter-spacing-dense);
116
+ line-height: var(--ids-comp-button-label-typography-line-height-dense);
108
117
  }
109
118
  .ids-button.ids-button-dense > .ids-icon {
110
- font-size: var(--ids-comp-buttons-icon-typography-font-size-dense);
111
- font-weight: var(--ids-comp-buttons-icon-typography-font-weight-dense);
112
- line-height: var(--ids-comp-buttons-icon-typography-line-height-dense);
113
- width: var(--ids-comp-buttons-size-icon-dense);
114
- height: var(--ids-comp-buttons-size-icon-dense);
119
+ width: var(--ids-comp-button-size-icon-dense);
120
+ height: var(--ids-comp-button-size-icon-dense);
121
+ font-size: var(--ids-comp-button-icon-typography-font-size-dense);
122
+ font-weight: var(--ids-comp-button-icon-typography-font-weight-dense);
123
+ line-height: var(--ids-comp-button-icon-typography-line-height-dense);
115
124
  }
116
125
  .ids-button.ids-button-filled.ids-button-primary {
117
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-default);
118
- background: var(--ids-comp-buttons-filled-color-bg-primary-default);
119
- border-color: var(--ids-comp-buttons-filled-color-border-primary-default);
126
+ color: var(--ids-comp-button-filled-color-fg-label-primary-default);
127
+ background: var(--ids-comp-button-filled-color-bg-primary-default);
128
+ border-color: var(--ids-comp-button-filled-color-border-primary-default);
120
129
  }
121
130
  .ids-button.ids-button-filled.ids-button-primary > .ids-icon {
122
- color: var(--ids-comp-buttons-filled-color-fg-icon-primary-default);
131
+ color: var(--ids-comp-button-filled-color-fg-icon-primary-default);
123
132
  }
124
133
  .ids-button.ids-button-filled.ids-button-primary:hover {
125
- background: var(--ids-comp-buttons-filled-color-bg-primary-hovered);
126
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-hovered);
127
- border-color: var(--ids-comp-buttons-filled-color-border-primary-hovered);
134
+ color: var(--ids-comp-button-filled-color-fg-label-primary-hovered);
135
+ background: var(--ids-comp-button-filled-color-bg-primary-hovered);
136
+ border-color: var(--ids-comp-button-filled-color-border-primary-default);
128
137
  }
129
138
  .ids-button.ids-button-filled.ids-button-primary:hover > .ids-icon {
130
- color: var(--ids-comp-buttons-filled-color-fg-icon-primary-hovered);
139
+ color: var(--ids-comp-button-filled-color-fg-icon-primary-hovered);
131
140
  }
132
- .ids-button.ids-button-filled.ids-button-primary:focus {
133
- outline-offset: 2px;
134
- background: var(--ids-comp-buttons-filled-color-bg-primary-focused);
135
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-focused);
136
- border-color: var(--ids-comp-buttons-filled-color-border-primary-focused);
141
+ .ids-button.ids-button-filled.ids-button-primary:focus, .ids-button.ids-button-filled.ids-button-primary:focus-visible {
142
+ color: var(--ids-comp-button-filled-color-fg-label-primary-focused);
143
+ background: var(--ids-comp-button-filled-color-bg-primary-focused);
144
+ border-color: var(--ids-comp-button-filled-color-border-primary-default);
145
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
137
146
  }
138
- .ids-button.ids-button-filled.ids-button-primary:focus > .ids-icon {
139
- color: var(--ids-comp-buttons-filled-color-fg-icon-primary-focused);
147
+ .ids-button.ids-button-filled.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-primary:focus-visible > .ids-icon {
148
+ color: var(--ids-comp-button-filled-color-fg-icon-primary-focused);
140
149
  }
141
150
  .ids-button.ids-button-filled.ids-button-primary:active {
142
- background: var(--ids-comp-buttons-filled-color-bg-primary-pressed);
143
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-pressed);
144
- border-color: var(--ids-comp-buttons-filled-color-border-primary-pressed);
151
+ color: var(--ids-comp-button-filled-color-fg-label-primary-pressed);
152
+ background: var(--ids-comp-button-filled-color-bg-primary-pressed);
153
+ border-color: var(--ids-comp-button-filled-color-border-primary-default);
145
154
  }
146
155
  .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
147
- color: var(--ids-comp-buttons-filled-color-fg-icon-primary-pressed);
156
+ color: var(--ids-comp-button-filled-color-fg-icon-primary-pressed);
148
157
  }
149
158
  .ids-button.ids-button-filled.ids-button-primary:disabled {
150
- background: var(--ids-comp-buttons-filled-color-bg-primary-disabled);
151
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-disabled);
152
- border-color: var(--ids-comp-buttons-filled-color-border-primary-disabled);
159
+ color: var(--ids-comp-button-filled-color-fg-label-primary-disabled);
160
+ background: var(--ids-comp-button-filled-color-bg-primary-disabled);
161
+ border-color: var(--ids-comp-button-filled-color-border-primary-default);
153
162
  }
154
163
  .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
155
- color: var(--ids-comp-buttons-filled-color-fg-icon-primary-disabled);
164
+ color: var(--ids-comp-button-filled-color-fg-icon-primary-disabled);
156
165
  }
157
166
  .ids-button.ids-button-filled.ids-button-secondary {
158
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-default);
159
- background: var(--ids-comp-buttons-filled-color-bg-secondary-default);
160
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-default);
167
+ color: var(--ids-comp-button-filled-color-fg-label-secondary-default);
168
+ background: var(--ids-comp-button-filled-color-bg-secondary-default);
169
+ border-color: var(--ids-comp-button-filled-color-border-secondary-default);
161
170
  }
162
171
  .ids-button.ids-button-filled.ids-button-secondary > .ids-icon {
163
- color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-default);
172
+ color: var(--ids-comp-button-filled-color-fg-icon-secondary-default);
164
173
  }
165
174
  .ids-button.ids-button-filled.ids-button-secondary:hover {
166
- background: var(--ids-comp-buttons-filled-color-bg-secondary-hovered);
167
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered);
168
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-hovered);
175
+ color: var(--ids-comp-button-filled-color-fg-label-secondary-hovered);
176
+ background: var(--ids-comp-button-filled-color-bg-secondary-hovered);
177
+ border-color: var(--ids-comp-button-filled-color-border-secondary-default);
169
178
  }
170
179
  .ids-button.ids-button-filled.ids-button-secondary:hover > .ids-icon {
171
- color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-hovered);
180
+ color: var(--ids-comp-button-filled-color-fg-icon-secondary-hovered);
172
181
  }
173
- .ids-button.ids-button-filled.ids-button-secondary:focus {
174
- outline-offset: 2px;
175
- background: var(--ids-comp-buttons-filled-color-bg-secondary-focused);
176
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-focused);
177
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-focused);
182
+ .ids-button.ids-button-filled.ids-button-secondary:focus, .ids-button.ids-button-filled.ids-button-secondary:focus-visible {
183
+ color: var(--ids-comp-button-filled-color-fg-label-secondary-focused);
184
+ background: var(--ids-comp-button-filled-color-bg-secondary-focused);
185
+ border-color: var(--ids-comp-button-filled-color-border-secondary-default);
186
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
178
187
  }
179
- .ids-button.ids-button-filled.ids-button-secondary:focus > .ids-icon {
180
- color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-focused);
188
+ .ids-button.ids-button-filled.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-secondary:focus-visible > .ids-icon {
189
+ color: var(--ids-comp-button-filled-color-fg-icon-secondary-focused);
181
190
  }
182
191
  .ids-button.ids-button-filled.ids-button-secondary:active {
183
- background: var(--ids-comp-buttons-filled-color-bg-secondary-pressed);
184
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed);
185
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-pressed);
192
+ color: var(--ids-comp-button-filled-color-fg-label-secondary-pressed);
193
+ background: var(--ids-comp-button-filled-color-bg-secondary-pressed);
194
+ border-color: var(--ids-comp-button-filled-color-border-secondary-default);
186
195
  }
187
196
  .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
188
- color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-pressed);
197
+ color: var(--ids-comp-button-filled-color-fg-icon-secondary-pressed);
189
198
  }
190
199
  .ids-button.ids-button-filled.ids-button-secondary:disabled {
191
- background: var(--ids-comp-buttons-filled-color-bg-secondary-disabled);
192
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled);
193
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-disabled);
200
+ color: var(--ids-comp-button-filled-color-fg-label-secondary-disabled);
201
+ background: var(--ids-comp-button-filled-color-bg-secondary-disabled);
202
+ border-color: var(--ids-comp-button-filled-color-border-secondary-default);
194
203
  }
195
204
  .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
196
- color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-disabled);
205
+ color: var(--ids-comp-button-filled-color-fg-icon-secondary-disabled);
197
206
  }
198
207
  .ids-button.ids-button-filled.ids-button-brand {
199
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-default);
200
- background: var(--ids-comp-buttons-filled-color-bg-brand-default);
201
- border-color: var(--ids-comp-buttons-filled-color-border-brand-default);
208
+ color: var(--ids-comp-button-filled-color-fg-label-brand-default);
209
+ background: var(--ids-comp-button-filled-color-bg-brand-default);
210
+ border-color: var(--ids-comp-button-filled-color-border-brand-default);
202
211
  }
203
212
  .ids-button.ids-button-filled.ids-button-brand > .ids-icon {
204
- color: var(--ids-comp-buttons-filled-color-fg-icon-brand-default);
213
+ color: var(--ids-comp-button-filled-color-fg-icon-brand-default);
205
214
  }
206
215
  .ids-button.ids-button-filled.ids-button-brand:hover {
207
- background: var(--ids-comp-buttons-filled-color-bg-brand-hovered);
208
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-hovered);
209
- border-color: var(--ids-comp-buttons-filled-color-border-brand-hovered);
216
+ color: var(--ids-comp-button-filled-color-fg-label-brand-hovered);
217
+ background: var(--ids-comp-button-filled-color-bg-brand-hovered);
218
+ border-color: var(--ids-comp-button-filled-color-border-brand-default);
210
219
  }
211
220
  .ids-button.ids-button-filled.ids-button-brand:hover > .ids-icon {
212
- color: var(--ids-comp-buttons-filled-color-fg-icon-brand-hovered);
221
+ color: var(--ids-comp-button-filled-color-fg-icon-brand-hovered);
213
222
  }
214
- .ids-button.ids-button-filled.ids-button-brand:focus {
215
- outline-offset: 2px;
216
- background: var(--ids-comp-buttons-filled-color-bg-brand-focused);
217
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-focused);
218
- border-color: var(--ids-comp-buttons-filled-color-border-brand-focused);
223
+ .ids-button.ids-button-filled.ids-button-brand:focus, .ids-button.ids-button-filled.ids-button-brand:focus-visible {
224
+ color: var(--ids-comp-button-filled-color-fg-label-brand-focused);
225
+ background: var(--ids-comp-button-filled-color-bg-brand-focused);
226
+ border-color: var(--ids-comp-button-filled-color-border-brand-default);
227
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
219
228
  }
220
- .ids-button.ids-button-filled.ids-button-brand:focus > .ids-icon {
221
- color: var(--ids-comp-buttons-filled-color-fg-icon-brand-focused);
229
+ .ids-button.ids-button-filled.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-brand:focus-visible > .ids-icon {
230
+ color: var(--ids-comp-button-filled-color-fg-icon-brand-focused);
222
231
  }
223
232
  .ids-button.ids-button-filled.ids-button-brand:active {
224
- background: var(--ids-comp-buttons-filled-color-bg-brand-pressed);
225
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-pressed);
226
- border-color: var(--ids-comp-buttons-filled-color-border-brand-pressed);
233
+ color: var(--ids-comp-button-filled-color-fg-label-brand-pressed);
234
+ background: var(--ids-comp-button-filled-color-bg-brand-pressed);
235
+ border-color: var(--ids-comp-button-filled-color-border-brand-default);
227
236
  }
228
237
  .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
229
- color: var(--ids-comp-buttons-filled-color-fg-icon-brand-pressed);
238
+ color: var(--ids-comp-button-filled-color-fg-icon-brand-pressed);
230
239
  }
231
240
  .ids-button.ids-button-filled.ids-button-brand:disabled {
232
- background: var(--ids-comp-buttons-filled-color-bg-brand-disabled);
233
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-disabled);
234
- border-color: var(--ids-comp-buttons-filled-color-border-brand-disabled);
241
+ color: var(--ids-comp-button-filled-color-fg-label-brand-disabled);
242
+ background: var(--ids-comp-button-filled-color-bg-brand-disabled);
243
+ border-color: var(--ids-comp-button-filled-color-border-brand-default);
235
244
  }
236
245
  .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
237
- color: var(--ids-comp-buttons-filled-color-fg-icon-brand-disabled);
246
+ color: var(--ids-comp-button-filled-color-fg-icon-brand-disabled);
238
247
  }
239
248
  .ids-button.ids-button-filled.ids-button-error {
240
- color: var(--ids-comp-buttons-filled-color-fg-label-error-default);
241
- background: var(--ids-comp-buttons-filled-color-bg-error-default);
242
- border-color: var(--ids-comp-buttons-filled-color-border-error-default);
249
+ color: var(--ids-comp-button-filled-color-fg-label-error-default);
250
+ background: var(--ids-comp-button-filled-color-bg-error-default);
251
+ border-color: var(--ids-comp-button-filled-color-border-error-default);
243
252
  }
244
253
  .ids-button.ids-button-filled.ids-button-error > .ids-icon {
245
- color: var(--ids-comp-buttons-filled-color-fg-icon-error-default);
254
+ color: var(--ids-comp-button-filled-color-fg-icon-error-default);
246
255
  }
247
256
  .ids-button.ids-button-filled.ids-button-error:hover {
248
- background: var(--ids-comp-buttons-filled-color-bg-error-hovered);
249
- color: var(--ids-comp-buttons-filled-color-fg-label-error-hovered);
250
- border-color: var(--ids-comp-buttons-filled-color-border-error-hovered);
257
+ color: var(--ids-comp-button-filled-color-fg-label-error-hovered);
258
+ background: var(--ids-comp-button-filled-color-bg-error-hovered);
259
+ border-color: var(--ids-comp-button-filled-color-border-error-default);
251
260
  }
252
261
  .ids-button.ids-button-filled.ids-button-error:hover > .ids-icon {
253
- color: var(--ids-comp-buttons-filled-color-fg-icon-error-hovered);
262
+ color: var(--ids-comp-button-filled-color-fg-icon-error-hovered);
254
263
  }
255
- .ids-button.ids-button-filled.ids-button-error:focus {
256
- outline-offset: 2px;
257
- background: var(--ids-comp-buttons-filled-color-bg-error-focused);
258
- color: var(--ids-comp-buttons-filled-color-fg-label-error-focused);
259
- border-color: var(--ids-comp-buttons-filled-color-border-error-focused);
264
+ .ids-button.ids-button-filled.ids-button-error:focus, .ids-button.ids-button-filled.ids-button-error:focus-visible {
265
+ color: var(--ids-comp-button-filled-color-fg-label-error-focused);
266
+ background: var(--ids-comp-button-filled-color-bg-error-focused);
267
+ border-color: var(--ids-comp-button-filled-color-border-error-default);
268
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
260
269
  }
261
- .ids-button.ids-button-filled.ids-button-error:focus > .ids-icon {
262
- color: var(--ids-comp-buttons-filled-color-fg-icon-error-focused);
270
+ .ids-button.ids-button-filled.ids-button-error:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-error:focus-visible > .ids-icon {
271
+ color: var(--ids-comp-button-filled-color-fg-icon-error-focused);
263
272
  }
264
273
  .ids-button.ids-button-filled.ids-button-error:active {
265
- background: var(--ids-comp-buttons-filled-color-bg-error-pressed);
266
- color: var(--ids-comp-buttons-filled-color-fg-label-error-pressed);
267
- border-color: var(--ids-comp-buttons-filled-color-border-error-pressed);
274
+ color: var(--ids-comp-button-filled-color-fg-label-error-pressed);
275
+ background: var(--ids-comp-button-filled-color-bg-error-pressed);
276
+ border-color: var(--ids-comp-button-filled-color-border-error-default);
268
277
  }
269
278
  .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
270
- color: var(--ids-comp-buttons-filled-color-fg-icon-error-pressed);
279
+ color: var(--ids-comp-button-filled-color-fg-icon-error-pressed);
271
280
  }
272
281
  .ids-button.ids-button-filled.ids-button-success {
273
- color: var(--ids-comp-buttons-filled-color-fg-label-success-default);
274
- background: var(--ids-comp-buttons-filled-color-bg-success-default);
275
- border-color: var(--ids-comp-buttons-filled-color-border-success-default);
282
+ color: var(--ids-comp-button-filled-color-fg-label-success-default);
283
+ background: var(--ids-comp-button-filled-color-bg-success-default);
284
+ border-color: var(--ids-comp-button-filled-color-border-success-default);
276
285
  }
277
286
  .ids-button.ids-button-filled.ids-button-success > .ids-icon {
278
- color: var(--ids-comp-buttons-filled-color-fg-icon-success-default);
287
+ color: var(--ids-comp-button-filled-color-fg-icon-success-default);
279
288
  }
280
289
  .ids-button.ids-button-filled.ids-button-success:hover {
281
- background: var(--ids-comp-buttons-filled-color-bg-success-hovered);
282
- color: var(--ids-comp-buttons-filled-color-fg-label-success-hovered);
283
- border-color: var(--ids-comp-buttons-filled-color-border-success-hovered);
290
+ color: var(--ids-comp-button-filled-color-fg-label-success-hovered);
291
+ background: var(--ids-comp-button-filled-color-bg-success-hovered);
292
+ border-color: var(--ids-comp-button-filled-color-border-success-default);
284
293
  }
285
294
  .ids-button.ids-button-filled.ids-button-success:hover > .ids-icon {
286
- color: var(--ids-comp-buttons-filled-color-fg-icon-success-hovered);
295
+ color: var(--ids-comp-button-filled-color-fg-icon-success-hovered);
287
296
  }
288
- .ids-button.ids-button-filled.ids-button-success:focus {
289
- outline-offset: 2px;
290
- background: var(--ids-comp-buttons-filled-color-bg-success-focused);
291
- color: var(--ids-comp-buttons-filled-color-fg-label-success-focused);
292
- border-color: var(--ids-comp-buttons-filled-color-border-success-focused);
297
+ .ids-button.ids-button-filled.ids-button-success:focus, .ids-button.ids-button-filled.ids-button-success:focus-visible {
298
+ color: var(--ids-comp-button-filled-color-fg-label-success-focused);
299
+ background: var(--ids-comp-button-filled-color-bg-success-focused);
300
+ border-color: var(--ids-comp-button-filled-color-border-success-default);
301
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
293
302
  }
294
- .ids-button.ids-button-filled.ids-button-success:focus > .ids-icon {
295
- color: var(--ids-comp-buttons-filled-color-fg-icon-success-focused);
303
+ .ids-button.ids-button-filled.ids-button-success:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-success:focus-visible > .ids-icon {
304
+ color: var(--ids-comp-button-filled-color-fg-icon-success-focused);
296
305
  }
297
306
  .ids-button.ids-button-filled.ids-button-success:active {
298
- background: var(--ids-comp-buttons-filled-color-bg-success-pressed);
299
- color: var(--ids-comp-buttons-filled-color-fg-label-success-pressed);
300
- border-color: var(--ids-comp-buttons-filled-color-border-success-pressed);
307
+ color: var(--ids-comp-button-filled-color-fg-label-success-pressed);
308
+ background: var(--ids-comp-button-filled-color-bg-success-pressed);
309
+ border-color: var(--ids-comp-button-filled-color-border-success-default);
301
310
  }
302
311
  .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
303
- color: var(--ids-comp-buttons-filled-color-fg-icon-success-pressed);
312
+ color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
304
313
  }
305
314
  .ids-button.ids-button-filled.ids-button-warning {
306
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-default);
307
- background: var(--ids-comp-buttons-filled-color-bg-warning-default);
308
- border-color: var(--ids-comp-buttons-filled-color-border-warning-default);
315
+ color: var(--ids-comp-button-filled-color-fg-label-warning-default);
316
+ background: var(--ids-comp-button-filled-color-bg-warning-default);
317
+ border-color: var(--ids-comp-button-filled-color-border-warning-default);
309
318
  }
310
319
  .ids-button.ids-button-filled.ids-button-warning > .ids-icon {
311
- color: var(--ids-comp-buttons-filled-color-fg-icon-warning-default);
320
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-default);
312
321
  }
313
322
  .ids-button.ids-button-filled.ids-button-warning:hover {
314
- background: var(--ids-comp-buttons-filled-color-bg-warning-hovered);
315
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-hovered);
316
- border-color: var(--ids-comp-buttons-filled-color-border-warning-hovered);
323
+ color: var(--ids-comp-button-filled-color-fg-label-warning-hovered);
324
+ background: var(--ids-comp-button-filled-color-bg-warning-hovered);
325
+ border-color: var(--ids-comp-button-filled-color-border-warning-default);
317
326
  }
318
327
  .ids-button.ids-button-filled.ids-button-warning:hover > .ids-icon {
319
- color: var(--ids-comp-buttons-filled-color-fg-icon-warning-hovered);
328
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-hovered);
320
329
  }
321
- .ids-button.ids-button-filled.ids-button-warning:focus {
322
- outline-offset: 2px;
323
- background: var(--ids-comp-buttons-filled-color-bg-warning-focused);
324
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-focused);
325
- border-color: var(--ids-comp-buttons-filled-color-border-warning-focused);
330
+ .ids-button.ids-button-filled.ids-button-warning:focus, .ids-button.ids-button-filled.ids-button-warning:focus-visible {
331
+ color: var(--ids-comp-button-filled-color-fg-label-warning-focused);
332
+ background: var(--ids-comp-button-filled-color-bg-warning-focused);
333
+ border-color: var(--ids-comp-button-filled-color-border-warning-default);
334
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
326
335
  }
327
- .ids-button.ids-button-filled.ids-button-warning:focus > .ids-icon {
328
- color: var(--ids-comp-buttons-filled-color-fg-icon-warning-focused);
336
+ .ids-button.ids-button-filled.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-warning:focus-visible > .ids-icon {
337
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-focused);
329
338
  }
330
339
  .ids-button.ids-button-filled.ids-button-warning:active {
331
- background: var(--ids-comp-buttons-filled-color-bg-warning-pressed);
332
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);
333
- border-color: var(--ids-comp-buttons-filled-color-border-warning-pressed);
340
+ color: var(--ids-comp-button-filled-color-fg-label-warning-pressed);
341
+ background: var(--ids-comp-button-filled-color-bg-warning-pressed);
342
+ border-color: var(--ids-comp-button-filled-color-border-warning-default);
334
343
  }
335
344
  .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
336
- color: var(--ids-comp-buttons-filled-color-fg-icon-warning-pressed);
345
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
337
346
  }
338
347
  .ids-button.ids-button-filled.ids-button-light {
339
- color: var(--ids-comp-buttons-filled-color-fg-label-light-default);
340
- background: var(--ids-comp-buttons-filled-color-bg-light-default);
341
- border-color: var(--ids-comp-buttons-filled-color-border-light-default);
348
+ color: var(--ids-comp-button-filled-color-fg-label-light-default);
349
+ background: var(--ids-comp-button-filled-color-bg-light-default);
350
+ border-color: var(--ids-comp-button-filled-color-border-light-default);
342
351
  }
343
352
  .ids-button.ids-button-filled.ids-button-light > .ids-icon {
344
- color: var(--ids-comp-buttons-filled-color-fg-icon-light-default);
353
+ color: var(--ids-comp-button-filled-color-fg-icon-light-default);
345
354
  }
346
355
  .ids-button.ids-button-filled.ids-button-light:hover {
347
- background: var(--ids-comp-buttons-filled-color-bg-light-hovered);
348
- color: var(--ids-comp-buttons-filled-color-fg-label-light-hovered);
349
- border-color: var(--ids-comp-buttons-filled-color-border-light-hovered);
356
+ color: var(--ids-comp-button-filled-color-fg-label-light-hovered);
357
+ background: var(--ids-comp-button-filled-color-bg-light-hovered);
358
+ border-color: var(--ids-comp-button-filled-color-border-light-default);
350
359
  }
351
360
  .ids-button.ids-button-filled.ids-button-light:hover > .ids-icon {
352
- color: var(--ids-comp-buttons-filled-color-fg-icon-light-hovered);
361
+ color: var(--ids-comp-button-filled-color-fg-icon-light-hovered);
353
362
  }
354
- .ids-button.ids-button-filled.ids-button-light:focus {
355
- outline-offset: 2px;
356
- background: var(--ids-comp-buttons-filled-color-bg-light-focused);
357
- color: var(--ids-comp-buttons-filled-color-fg-label-light-focused);
358
- border-color: var(--ids-comp-buttons-filled-color-border-light-focused);
363
+ .ids-button.ids-button-filled.ids-button-light:focus, .ids-button.ids-button-filled.ids-button-light:focus-visible {
364
+ color: var(--ids-comp-button-filled-color-fg-label-light-focused);
365
+ background: var(--ids-comp-button-filled-color-bg-light-focused);
366
+ border-color: var(--ids-comp-button-filled-color-border-light-default);
367
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
359
368
  }
360
- .ids-button.ids-button-filled.ids-button-light:focus > .ids-icon {
361
- color: var(--ids-comp-buttons-filled-color-fg-icon-light-focused);
369
+ .ids-button.ids-button-filled.ids-button-light:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light:focus-visible > .ids-icon {
370
+ color: var(--ids-comp-button-filled-color-fg-icon-light-focused);
362
371
  }
363
372
  .ids-button.ids-button-filled.ids-button-light:active {
364
- background: var(--ids-comp-buttons-filled-color-bg-light-pressed);
365
- color: var(--ids-comp-buttons-filled-color-fg-label-light-pressed);
366
- border-color: var(--ids-comp-buttons-filled-color-border-light-pressed);
373
+ color: var(--ids-comp-button-filled-color-fg-label-light-pressed);
374
+ background: var(--ids-comp-button-filled-color-bg-light-pressed);
375
+ border-color: var(--ids-comp-button-filled-color-border-light-default);
367
376
  }
368
377
  .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
369
- color: var(--ids-comp-buttons-filled-color-fg-icon-light-pressed);
378
+ color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
370
379
  }
371
380
  .ids-button.ids-button-filled.ids-button-light:disabled {
372
- background: var(--ids-comp-buttons-filled-color-bg-light-disabled);
373
- color: var(--ids-comp-buttons-filled-color-fg-label-light-disabled);
374
- border-color: var(--ids-comp-buttons-filled-color-border-light-disabled);
381
+ color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
382
+ background: var(--ids-comp-button-filled-color-bg-light-disabled);
383
+ border-color: var(--ids-comp-button-filled-color-border-light-default);
375
384
  }
376
385
  .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
377
- color: var(--ids-comp-buttons-filled-color-fg-icon-light-disabled);
386
+ color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
387
+ }
388
+ .ids-button.ids-button-filled.ids-button-light-fixed {
389
+ color: var(--ids-comp-button-filled-color-fg-label-light-fixed-default);
390
+ background: var(--ids-comp-button-filled-color-bg-light-fixed-default);
391
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
392
+ }
393
+ .ids-button.ids-button-filled.ids-button-light-fixed > .ids-icon {
394
+ color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-default);
395
+ }
396
+ .ids-button.ids-button-filled.ids-button-light-fixed:hover {
397
+ color: var(--ids-comp-button-filled-color-fg-label-light-fixed-hovered);
398
+ background: var(--ids-comp-button-filled-color-bg-light-fixed-hovered);
399
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
400
+ }
401
+ .ids-button.ids-button-filled.ids-button-light-fixed:hover > .ids-icon {
402
+ color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-hovered);
403
+ }
404
+ .ids-button.ids-button-filled.ids-button-light-fixed:focus, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible {
405
+ color: var(--ids-comp-button-filled-color-fg-label-light-fixed-focused);
406
+ background: var(--ids-comp-button-filled-color-bg-light-fixed-focused);
407
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
408
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
409
+ }
410
+ .ids-button.ids-button-filled.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible > .ids-icon {
411
+ color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-focused);
412
+ }
413
+ .ids-button.ids-button-filled.ids-button-light-fixed:active {
414
+ color: var(--ids-comp-button-filled-color-fg-label-light-fixed-pressed);
415
+ background: var(--ids-comp-button-filled-color-bg-light-fixed-pressed);
416
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
417
+ }
418
+ .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
419
+ color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
420
+ }
421
+ .ids-button.ids-button-filled.ids-button-light-fixed:disabled {
422
+ color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
423
+ background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
424
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
425
+ }
426
+ .ids-button.ids-button-filled.ids-button-light-fixed:disabled > .ids-icon {
427
+ color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
378
428
  }
379
429
  .ids-button.ids-button-filled.ids-button-dark {
380
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-default);
381
- background: var(--ids-comp-buttons-filled-color-bg-dark-default);
382
- border-color: var(--ids-comp-buttons-filled-color-border-dark-default);
430
+ color: var(--ids-comp-button-filled-color-fg-label-dark-default);
431
+ background: var(--ids-comp-button-filled-color-bg-dark-default);
432
+ border-color: var(--ids-comp-button-filled-color-border-dark-default);
383
433
  }
384
434
  .ids-button.ids-button-filled.ids-button-dark > .ids-icon {
385
- color: var(--ids-comp-buttons-filled-color-fg-icon-dark-default);
435
+ color: var(--ids-comp-button-filled-color-fg-icon-dark-default);
386
436
  }
387
437
  .ids-button.ids-button-filled.ids-button-dark:hover {
388
- background: var(--ids-comp-buttons-filled-color-bg-dark-hovered);
389
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-hovered);
390
- border-color: var(--ids-comp-buttons-filled-color-border-dark-hovered);
438
+ color: var(--ids-comp-button-filled-color-fg-label-dark-hovered);
439
+ background: var(--ids-comp-button-filled-color-bg-dark-hovered);
440
+ border-color: var(--ids-comp-button-filled-color-border-dark-default);
391
441
  }
392
442
  .ids-button.ids-button-filled.ids-button-dark:hover > .ids-icon {
393
- color: var(--ids-comp-buttons-filled-color-fg-icon-dark-hovered);
443
+ color: var(--ids-comp-button-filled-color-fg-icon-dark-hovered);
394
444
  }
395
- .ids-button.ids-button-filled.ids-button-dark:focus {
396
- outline-offset: 2px;
397
- background: var(--ids-comp-buttons-filled-color-bg-dark-focused);
398
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-focused);
399
- border-color: var(--ids-comp-buttons-filled-color-border-dark-focused);
445
+ .ids-button.ids-button-filled.ids-button-dark:focus, .ids-button.ids-button-filled.ids-button-dark:focus-visible {
446
+ color: var(--ids-comp-button-filled-color-fg-label-dark-focused);
447
+ background: var(--ids-comp-button-filled-color-bg-dark-focused);
448
+ border-color: var(--ids-comp-button-filled-color-border-dark-default);
449
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
400
450
  }
401
- .ids-button.ids-button-filled.ids-button-dark:focus > .ids-icon {
402
- color: var(--ids-comp-buttons-filled-color-fg-icon-dark-focused);
451
+ .ids-button.ids-button-filled.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-dark:focus-visible > .ids-icon {
452
+ color: var(--ids-comp-button-filled-color-fg-icon-dark-focused);
403
453
  }
404
454
  .ids-button.ids-button-filled.ids-button-dark:active {
405
- background: var(--ids-comp-buttons-filled-color-bg-dark-pressed);
406
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-pressed);
407
- border-color: var(--ids-comp-buttons-filled-color-border-dark-pressed);
455
+ color: var(--ids-comp-button-filled-color-fg-label-dark-pressed);
456
+ background: var(--ids-comp-button-filled-color-bg-dark-pressed);
457
+ border-color: var(--ids-comp-button-filled-color-border-dark-default);
408
458
  }
409
459
  .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
410
- color: var(--ids-comp-buttons-filled-color-fg-icon-dark-pressed);
460
+ color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
411
461
  }
412
462
  .ids-button.ids-button-filled.ids-button-dark:disabled {
413
- background: var(--ids-comp-buttons-filled-color-bg-dark-disabled);
414
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-disabled);
415
- border-color: var(--ids-comp-buttons-filled-color-border-dark-disabled);
463
+ color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
464
+ background: var(--ids-comp-button-filled-color-bg-dark-disabled);
465
+ border-color: var(--ids-comp-button-filled-color-border-dark-default);
416
466
  }
417
467
  .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
418
- color: var(--ids-comp-buttons-filled-color-fg-icon-dark-disabled);
468
+ color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
419
469
  }
420
470
  .ids-button.ids-button-filled.ids-button-surface {
421
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-default);
422
- background: var(--ids-comp-buttons-filled-color-bg-surface-default);
423
- border-color: var(--ids-comp-buttons-filled-color-border-surface-default);
471
+ color: var(--ids-comp-button-filled-color-fg-label-surface-default);
472
+ background: var(--ids-comp-button-filled-color-bg-surface-default);
473
+ border-color: var(--ids-comp-button-filled-color-border-surface-default);
424
474
  }
425
475
  .ids-button.ids-button-filled.ids-button-surface > .ids-icon {
426
- color: var(--ids-comp-buttons-filled-color-fg-icon-surface-default);
476
+ color: var(--ids-comp-button-filled-color-fg-icon-surface-default);
427
477
  }
428
478
  .ids-button.ids-button-filled.ids-button-surface:hover {
429
- background: var(--ids-comp-buttons-filled-color-bg-surface-hovered);
430
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-hovered);
431
- border-color: var(--ids-comp-buttons-filled-color-border-surface-hovered);
479
+ color: var(--ids-comp-button-filled-color-fg-label-surface-hovered);
480
+ background: var(--ids-comp-button-filled-color-bg-surface-hovered);
481
+ border-color: var(--ids-comp-button-filled-color-border-surface-default);
432
482
  }
433
483
  .ids-button.ids-button-filled.ids-button-surface:hover > .ids-icon {
434
- color: var(--ids-comp-buttons-filled-color-fg-icon-surface-hovered);
484
+ color: var(--ids-comp-button-filled-color-fg-icon-surface-hovered);
435
485
  }
436
- .ids-button.ids-button-filled.ids-button-surface:focus {
437
- outline-offset: 2px;
438
- background: var(--ids-comp-buttons-filled-color-bg-surface-focused);
439
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-focused);
440
- border-color: var(--ids-comp-buttons-filled-color-border-surface-focused);
486
+ .ids-button.ids-button-filled.ids-button-surface:focus, .ids-button.ids-button-filled.ids-button-surface:focus-visible {
487
+ color: var(--ids-comp-button-filled-color-fg-label-surface-focused);
488
+ background: var(--ids-comp-button-filled-color-bg-surface-focused);
489
+ border-color: var(--ids-comp-button-filled-color-border-surface-default);
490
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
441
491
  }
442
- .ids-button.ids-button-filled.ids-button-surface:focus > .ids-icon {
443
- color: var(--ids-comp-buttons-filled-color-fg-icon-surface-focused);
492
+ .ids-button.ids-button-filled.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-surface:focus-visible > .ids-icon {
493
+ color: var(--ids-comp-button-filled-color-fg-icon-surface-focused);
444
494
  }
445
495
  .ids-button.ids-button-filled.ids-button-surface:active {
446
- background: var(--ids-comp-buttons-filled-color-bg-surface-pressed);
447
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-pressed);
448
- border-color: var(--ids-comp-buttons-filled-color-border-surface-pressed);
496
+ color: var(--ids-comp-button-filled-color-fg-label-surface-pressed);
497
+ background: var(--ids-comp-button-filled-color-bg-surface-pressed);
498
+ border-color: var(--ids-comp-button-filled-color-border-surface-default);
449
499
  }
450
500
  .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
451
- color: var(--ids-comp-buttons-filled-color-fg-icon-surface-pressed);
501
+ color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
452
502
  }
453
503
  .ids-button.ids-button-filled.ids-button-surface:disabled {
454
- background: var(--ids-comp-buttons-filled-color-bg-surface-disabled);
455
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-disabled);
456
- border-color: var(--ids-comp-buttons-filled-color-border-surface-disabled);
504
+ color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
505
+ background: var(--ids-comp-button-filled-color-bg-surface-disabled);
506
+ border-color: var(--ids-comp-button-filled-color-border-surface-default);
457
507
  }
458
508
  .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
459
- color: var(--ids-comp-buttons-filled-color-fg-icon-surface-disabled);
509
+ color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
460
510
  }
461
511
  .ids-button.ids-button-outlined.ids-button-primary {
462
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-default);
463
- background: var(--ids-comp-buttons-outlined-color-bg-primary-default);
464
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-default);
512
+ color: var(--ids-comp-button-outlined-color-fg-label-primary-default);
513
+ background: var(--ids-comp-button-outlined-color-bg-primary-default);
514
+ border-color: var(--ids-comp-button-outlined-color-border-primary-default);
465
515
  }
466
516
  .ids-button.ids-button-outlined.ids-button-primary > .ids-icon {
467
- color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-default);
517
+ color: var(--ids-comp-button-outlined-color-fg-icon-primary-default);
468
518
  }
469
519
  .ids-button.ids-button-outlined.ids-button-primary:hover {
470
- background: var(--ids-comp-buttons-outlined-color-bg-primary-hovered);
471
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered);
472
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-hovered);
520
+ color: var(--ids-comp-button-outlined-color-fg-label-primary-hovered);
521
+ background: var(--ids-comp-button-outlined-color-bg-primary-hovered);
522
+ border-color: var(--ids-comp-button-outlined-color-border-primary-default);
473
523
  }
474
524
  .ids-button.ids-button-outlined.ids-button-primary:hover > .ids-icon {
475
- color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-hovered);
525
+ color: var(--ids-comp-button-outlined-color-fg-icon-primary-hovered);
476
526
  }
477
- .ids-button.ids-button-outlined.ids-button-primary:focus {
478
- outline-offset: 2px;
479
- background: var(--ids-comp-buttons-outlined-color-bg-primary-focused);
480
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-focused);
481
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-focused);
527
+ .ids-button.ids-button-outlined.ids-button-primary:focus, .ids-button.ids-button-outlined.ids-button-primary:focus-visible {
528
+ color: var(--ids-comp-button-outlined-color-fg-label-primary-focused);
529
+ background: var(--ids-comp-button-outlined-color-bg-primary-focused);
530
+ border-color: var(--ids-comp-button-outlined-color-border-primary-default);
531
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
482
532
  }
483
- .ids-button.ids-button-outlined.ids-button-primary:focus > .ids-icon {
484
- color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-focused);
533
+ .ids-button.ids-button-outlined.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-primary:focus-visible > .ids-icon {
534
+ color: var(--ids-comp-button-outlined-color-fg-icon-primary-focused);
485
535
  }
486
536
  .ids-button.ids-button-outlined.ids-button-primary:active {
487
- background: var(--ids-comp-buttons-outlined-color-bg-primary-pressed);
488
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed);
489
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-pressed);
537
+ color: var(--ids-comp-button-outlined-color-fg-label-primary-pressed);
538
+ background: var(--ids-comp-button-outlined-color-bg-primary-pressed);
539
+ border-color: var(--ids-comp-button-outlined-color-border-primary-default);
490
540
  }
491
541
  .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
492
- color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-pressed);
542
+ color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
493
543
  }
494
544
  .ids-button.ids-button-outlined.ids-button-primary:disabled {
495
- background: var(--ids-comp-buttons-outlined-color-bg-primary-disabled);
496
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled);
497
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-disabled);
545
+ color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
546
+ background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
547
+ border-color: var(--ids-comp-button-outlined-color-border-primary-default);
498
548
  }
499
549
  .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
500
- color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-disabled);
550
+ color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
501
551
  }
502
552
  .ids-button.ids-button-outlined.ids-button-secondary {
503
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-default);
504
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-default);
505
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-default);
553
+ color: var(--ids-comp-button-outlined-color-fg-label-secondary-default);
554
+ background: var(--ids-comp-button-outlined-color-bg-secondary-default);
555
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
506
556
  }
507
557
  .ids-button.ids-button-outlined.ids-button-secondary > .ids-icon {
508
- color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-default);
558
+ color: var(--ids-comp-button-outlined-color-fg-icon-secondary-default);
509
559
  }
510
560
  .ids-button.ids-button-outlined.ids-button-secondary:hover {
511
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);
512
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered);
513
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-hovered);
561
+ color: var(--ids-comp-button-outlined-color-fg-label-secondary-hovered);
562
+ background: var(--ids-comp-button-outlined-color-bg-secondary-hovered);
563
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
514
564
  }
515
565
  .ids-button.ids-button-outlined.ids-button-secondary:hover > .ids-icon {
516
- color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-hovered);
566
+ color: var(--ids-comp-button-outlined-color-fg-icon-secondary-hovered);
517
567
  }
518
- .ids-button.ids-button-outlined.ids-button-secondary:focus {
519
- outline-offset: 2px;
520
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-focused);
521
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused);
522
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-focused);
568
+ .ids-button.ids-button-outlined.ids-button-secondary:focus, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible {
569
+ color: var(--ids-comp-button-outlined-color-fg-label-secondary-focused);
570
+ background: var(--ids-comp-button-outlined-color-bg-secondary-focused);
571
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
572
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
523
573
  }
524
- .ids-button.ids-button-outlined.ids-button-secondary:focus > .ids-icon {
525
- color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-focused);
574
+ .ids-button.ids-button-outlined.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible > .ids-icon {
575
+ color: var(--ids-comp-button-outlined-color-fg-icon-secondary-focused);
526
576
  }
527
577
  .ids-button.ids-button-outlined.ids-button-secondary:active {
528
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-pressed);
529
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed);
530
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-pressed);
578
+ color: var(--ids-comp-button-outlined-color-fg-label-secondary-pressed);
579
+ background: var(--ids-comp-button-outlined-color-bg-secondary-pressed);
580
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
531
581
  }
532
582
  .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
533
- color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-pressed);
583
+ color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
534
584
  }
535
585
  .ids-button.ids-button-outlined.ids-button-secondary:disabled {
536
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-disabled);
537
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled);
538
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-disabled);
586
+ color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
587
+ background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
588
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
539
589
  }
540
590
  .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
541
- color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-disabled);
591
+ color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
542
592
  }
543
593
  .ids-button.ids-button-outlined.ids-button-brand {
544
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-default);
545
- background: var(--ids-comp-buttons-outlined-color-bg-brand-default);
546
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-default);
594
+ color: var(--ids-comp-button-outlined-color-fg-label-brand-default);
595
+ background: var(--ids-comp-button-outlined-color-bg-brand-default);
596
+ border-color: var(--ids-comp-button-outlined-color-border-brand-default);
547
597
  }
548
598
  .ids-button.ids-button-outlined.ids-button-brand > .ids-icon {
549
- color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-default);
599
+ color: var(--ids-comp-button-outlined-color-fg-icon-brand-default);
550
600
  }
551
601
  .ids-button.ids-button-outlined.ids-button-brand:hover {
552
- background: var(--ids-comp-buttons-outlined-color-bg-brand-hovered);
553
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered);
554
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-hovered);
602
+ color: var(--ids-comp-button-outlined-color-fg-label-brand-hovered);
603
+ background: var(--ids-comp-button-outlined-color-bg-brand-hovered);
604
+ border-color: var(--ids-comp-button-outlined-color-border-brand-default);
555
605
  }
556
606
  .ids-button.ids-button-outlined.ids-button-brand:hover > .ids-icon {
557
- color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-hovered);
607
+ color: var(--ids-comp-button-outlined-color-fg-icon-brand-hovered);
558
608
  }
559
- .ids-button.ids-button-outlined.ids-button-brand:focus {
560
- outline-offset: 2px;
561
- background: var(--ids-comp-buttons-outlined-color-bg-brand-focused);
562
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-focused);
563
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-focused);
609
+ .ids-button.ids-button-outlined.ids-button-brand:focus, .ids-button.ids-button-outlined.ids-button-brand:focus-visible {
610
+ color: var(--ids-comp-button-outlined-color-fg-label-brand-focused);
611
+ background: var(--ids-comp-button-outlined-color-bg-brand-focused);
612
+ border-color: var(--ids-comp-button-outlined-color-border-brand-default);
613
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
564
614
  }
565
- .ids-button.ids-button-outlined.ids-button-brand:focus > .ids-icon {
566
- color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-focused);
615
+ .ids-button.ids-button-outlined.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-brand:focus-visible > .ids-icon {
616
+ color: var(--ids-comp-button-outlined-color-fg-icon-brand-focused);
567
617
  }
568
618
  .ids-button.ids-button-outlined.ids-button-brand:active {
569
- background: var(--ids-comp-buttons-outlined-color-bg-brand-pressed);
570
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed);
571
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-pressed);
619
+ color: var(--ids-comp-button-outlined-color-fg-label-brand-pressed);
620
+ background: var(--ids-comp-button-outlined-color-bg-brand-pressed);
621
+ border-color: var(--ids-comp-button-outlined-color-border-brand-default);
572
622
  }
573
623
  .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
574
- color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-pressed);
624
+ color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
575
625
  }
576
626
  .ids-button.ids-button-outlined.ids-button-brand:disabled {
577
- background: var(--ids-comp-buttons-outlined-color-bg-brand-disabled);
578
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled);
579
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-disabled);
627
+ color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
628
+ background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
629
+ border-color: var(--ids-comp-button-outlined-color-border-brand-default);
580
630
  }
581
631
  .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
582
- color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-disabled);
632
+ color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
583
633
  }
584
634
  .ids-button.ids-button-outlined.ids-button-error {
585
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-default);
586
- background: var(--ids-comp-buttons-outlined-color-bg-error-default);
587
- border-color: var(--ids-comp-buttons-outlined-color-border-error-default);
635
+ color: var(--ids-comp-button-outlined-color-fg-label-error-default);
636
+ background: var(--ids-comp-button-outlined-color-bg-error-default);
637
+ border-color: var(--ids-comp-button-outlined-color-border-error-default);
588
638
  }
589
639
  .ids-button.ids-button-outlined.ids-button-error > .ids-icon {
590
- color: var(--ids-comp-buttons-outlined-color-fg-icon-error-default);
640
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-default);
591
641
  }
592
642
  .ids-button.ids-button-outlined.ids-button-error:hover {
593
- background: var(--ids-comp-buttons-outlined-color-bg-error-hovered);
594
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-hovered);
595
- border-color: var(--ids-comp-buttons-outlined-color-border-error-hovered);
643
+ color: var(--ids-comp-button-outlined-color-fg-label-error-hovered);
644
+ background: var(--ids-comp-button-outlined-color-bg-error-hovered);
645
+ border-color: var(--ids-comp-button-outlined-color-border-error-default);
596
646
  }
597
647
  .ids-button.ids-button-outlined.ids-button-error:hover > .ids-icon {
598
- color: var(--ids-comp-buttons-outlined-color-fg-icon-error-hovered);
648
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-hovered);
599
649
  }
600
- .ids-button.ids-button-outlined.ids-button-error:focus {
601
- outline-offset: 2px;
602
- background: var(--ids-comp-buttons-outlined-color-bg-error-focused);
603
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-focused);
604
- border-color: var(--ids-comp-buttons-outlined-color-border-error-focused);
650
+ .ids-button.ids-button-outlined.ids-button-error:focus, .ids-button.ids-button-outlined.ids-button-error:focus-visible {
651
+ color: var(--ids-comp-button-outlined-color-fg-label-error-focused);
652
+ background: var(--ids-comp-button-outlined-color-bg-error-focused);
653
+ border-color: var(--ids-comp-button-outlined-color-border-error-default);
654
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
605
655
  }
606
- .ids-button.ids-button-outlined.ids-button-error:focus > .ids-icon {
607
- color: var(--ids-comp-buttons-outlined-color-fg-icon-error-focused);
656
+ .ids-button.ids-button-outlined.ids-button-error:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-error:focus-visible > .ids-icon {
657
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-focused);
608
658
  }
609
659
  .ids-button.ids-button-outlined.ids-button-error:active {
610
- background: var(--ids-comp-buttons-outlined-color-bg-error-pressed);
611
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);
612
- border-color: var(--ids-comp-buttons-outlined-color-border-error-pressed);
660
+ color: var(--ids-comp-button-outlined-color-fg-label-error-pressed);
661
+ background: var(--ids-comp-button-outlined-color-bg-error-pressed);
662
+ border-color: var(--ids-comp-button-outlined-color-border-error-default);
613
663
  }
614
664
  .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
615
- color: var(--ids-comp-buttons-outlined-color-fg-icon-error-pressed);
665
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
616
666
  }
617
667
  .ids-button.ids-button-outlined.ids-button-success {
618
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-default);
619
- background: var(--ids-comp-buttons-outlined-color-bg-success-default);
620
- border-color: var(--ids-comp-buttons-outlined-color-border-success-default);
668
+ color: var(--ids-comp-button-outlined-color-fg-label-success-default);
669
+ background: var(--ids-comp-button-outlined-color-bg-success-default);
670
+ border-color: var(--ids-comp-button-outlined-color-border-success-default);
621
671
  }
622
672
  .ids-button.ids-button-outlined.ids-button-success > .ids-icon {
623
- color: var(--ids-comp-buttons-outlined-color-fg-icon-success-default);
673
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-default);
624
674
  }
625
675
  .ids-button.ids-button-outlined.ids-button-success:hover {
626
- background: var(--ids-comp-buttons-outlined-color-bg-success-hovered);
627
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-hovered);
628
- border-color: var(--ids-comp-buttons-outlined-color-border-success-hovered);
676
+ color: var(--ids-comp-button-outlined-color-fg-label-success-hovered);
677
+ background: var(--ids-comp-button-outlined-color-bg-success-hovered);
678
+ border-color: var(--ids-comp-button-outlined-color-border-success-default);
629
679
  }
630
680
  .ids-button.ids-button-outlined.ids-button-success:hover > .ids-icon {
631
- color: var(--ids-comp-buttons-outlined-color-fg-icon-success-hovered);
681
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-hovered);
632
682
  }
633
- .ids-button.ids-button-outlined.ids-button-success:focus {
634
- outline-offset: 2px;
635
- background: var(--ids-comp-buttons-outlined-color-bg-success-focused);
636
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-focused);
637
- border-color: var(--ids-comp-buttons-outlined-color-border-success-focused);
683
+ .ids-button.ids-button-outlined.ids-button-success:focus, .ids-button.ids-button-outlined.ids-button-success:focus-visible {
684
+ color: var(--ids-comp-button-outlined-color-fg-label-success-focused);
685
+ background: var(--ids-comp-button-outlined-color-bg-success-focused);
686
+ border-color: var(--ids-comp-button-outlined-color-border-success-default);
687
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
638
688
  }
639
- .ids-button.ids-button-outlined.ids-button-success:focus > .ids-icon {
640
- color: var(--ids-comp-buttons-outlined-color-fg-icon-success-focused);
689
+ .ids-button.ids-button-outlined.ids-button-success:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-success:focus-visible > .ids-icon {
690
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-focused);
641
691
  }
642
692
  .ids-button.ids-button-outlined.ids-button-success:active {
643
- background: var(--ids-comp-buttons-outlined-color-bg-success-pressed);
644
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);
645
- border-color: var(--ids-comp-buttons-outlined-color-border-success-pressed);
693
+ color: var(--ids-comp-button-outlined-color-fg-label-success-pressed);
694
+ background: var(--ids-comp-button-outlined-color-bg-success-pressed);
695
+ border-color: var(--ids-comp-button-outlined-color-border-success-default);
646
696
  }
647
697
  .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
648
- color: var(--ids-comp-buttons-outlined-color-fg-icon-success-pressed);
698
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
649
699
  }
650
700
  .ids-button.ids-button-outlined.ids-button-warning {
651
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-default);
652
- background: var(--ids-comp-buttons-outlined-color-bg-warning-default);
653
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-default);
701
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-default);
702
+ background: var(--ids-comp-button-outlined-color-bg-warning-default);
703
+ border-color: var(--ids-comp-button-outlined-color-border-warning-default);
654
704
  }
655
705
  .ids-button.ids-button-outlined.ids-button-warning > .ids-icon {
656
- color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-default);
706
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-default);
657
707
  }
658
708
  .ids-button.ids-button-outlined.ids-button-warning:hover {
659
- background: var(--ids-comp-buttons-outlined-color-bg-warning-hovered);
660
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered);
661
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-hovered);
709
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-hovered);
710
+ background: var(--ids-comp-button-outlined-color-bg-warning-hovered);
711
+ border-color: var(--ids-comp-button-outlined-color-border-warning-default);
662
712
  }
663
713
  .ids-button.ids-button-outlined.ids-button-warning:hover > .ids-icon {
664
- color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-hovered);
714
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-hovered);
665
715
  }
666
- .ids-button.ids-button-outlined.ids-button-warning:focus {
667
- outline-offset: 2px;
668
- background: var(--ids-comp-buttons-outlined-color-bg-warning-focused);
669
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-focused);
670
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-focused);
716
+ .ids-button.ids-button-outlined.ids-button-warning:focus, .ids-button.ids-button-outlined.ids-button-warning:focus-visible {
717
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-focused);
718
+ background: var(--ids-comp-button-outlined-color-bg-warning-focused);
719
+ border-color: var(--ids-comp-button-outlined-color-border-warning-default);
720
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
671
721
  }
672
- .ids-button.ids-button-outlined.ids-button-warning:focus > .ids-icon {
673
- color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-focused);
722
+ .ids-button.ids-button-outlined.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-warning:focus-visible > .ids-icon {
723
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-focused);
674
724
  }
675
725
  .ids-button.ids-button-outlined.ids-button-warning:active {
676
- background: var(--ids-comp-buttons-outlined-color-bg-warning-pressed);
677
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);
678
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-pressed);
726
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-pressed);
727
+ background: var(--ids-comp-button-outlined-color-bg-warning-pressed);
728
+ border-color: var(--ids-comp-button-outlined-color-border-warning-default);
679
729
  }
680
730
  .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
681
- color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-pressed);
731
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
682
732
  }
683
733
  .ids-button.ids-button-outlined.ids-button-light {
684
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-default);
685
- background: var(--ids-comp-buttons-outlined-color-bg-light-default);
686
- border-color: var(--ids-comp-buttons-outlined-color-border-light-default);
734
+ color: var(--ids-comp-button-outlined-color-fg-label-light-default);
735
+ background: var(--ids-comp-button-outlined-color-bg-light-default);
736
+ border-color: var(--ids-comp-button-outlined-color-border-light-default);
687
737
  }
688
738
  .ids-button.ids-button-outlined.ids-button-light > .ids-icon {
689
- color: var(--ids-comp-buttons-outlined-color-fg-icon-light-default);
739
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-default);
690
740
  }
691
741
  .ids-button.ids-button-outlined.ids-button-light:hover {
692
- background: var(--ids-comp-buttons-outlined-color-bg-light-hovered);
693
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-hovered);
694
- border-color: var(--ids-comp-buttons-outlined-color-border-light-hovered);
742
+ color: var(--ids-comp-button-outlined-color-fg-label-light-hovered);
743
+ background: var(--ids-comp-button-outlined-color-bg-light-hovered);
744
+ border-color: var(--ids-comp-button-outlined-color-border-light-default);
695
745
  }
696
746
  .ids-button.ids-button-outlined.ids-button-light:hover > .ids-icon {
697
- color: var(--ids-comp-buttons-outlined-color-fg-icon-light-hovered);
747
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-hovered);
698
748
  }
699
- .ids-button.ids-button-outlined.ids-button-light:focus {
700
- outline-offset: 2px;
701
- background: var(--ids-comp-buttons-outlined-color-bg-light-focused);
702
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-focused);
703
- border-color: var(--ids-comp-buttons-outlined-color-border-light-focused);
749
+ .ids-button.ids-button-outlined.ids-button-light:focus, .ids-button.ids-button-outlined.ids-button-light:focus-visible {
750
+ color: var(--ids-comp-button-outlined-color-fg-label-light-focused);
751
+ background: var(--ids-comp-button-outlined-color-bg-light-focused);
752
+ border-color: var(--ids-comp-button-outlined-color-border-light-default);
753
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
704
754
  }
705
- .ids-button.ids-button-outlined.ids-button-light:focus > .ids-icon {
706
- color: var(--ids-comp-buttons-outlined-color-fg-icon-light-focused);
755
+ .ids-button.ids-button-outlined.ids-button-light:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light:focus-visible > .ids-icon {
756
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-focused);
707
757
  }
708
758
  .ids-button.ids-button-outlined.ids-button-light:active {
709
- background: var(--ids-comp-buttons-outlined-color-bg-light-pressed);
710
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-pressed);
711
- border-color: var(--ids-comp-buttons-outlined-color-border-light-pressed);
759
+ color: var(--ids-comp-button-outlined-color-fg-label-light-pressed);
760
+ background: var(--ids-comp-button-outlined-color-bg-light-pressed);
761
+ border-color: var(--ids-comp-button-outlined-color-border-light-default);
712
762
  }
713
763
  .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
714
- color: var(--ids-comp-buttons-outlined-color-fg-icon-light-pressed);
764
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
715
765
  }
716
766
  .ids-button.ids-button-outlined.ids-button-light:disabled {
717
- background: var(--ids-comp-buttons-outlined-color-bg-light-disabled);
718
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-disabled);
719
- border-color: var(--ids-comp-buttons-outlined-color-border-light-disabled);
767
+ color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
768
+ background: var(--ids-comp-button-outlined-color-bg-light-disabled);
769
+ border-color: var(--ids-comp-button-outlined-color-border-light-default);
720
770
  }
721
771
  .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
722
- color: var(--ids-comp-buttons-outlined-color-fg-icon-light-disabled);
772
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
773
+ }
774
+ .ids-button.ids-button-outlined.ids-button-light-fixed {
775
+ color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-default);
776
+ background: var(--ids-comp-button-outlined-color-bg-light-fixed-default);
777
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
778
+ }
779
+ .ids-button.ids-button-outlined.ids-button-light-fixed > .ids-icon {
780
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-default);
781
+ }
782
+ .ids-button.ids-button-outlined.ids-button-light-fixed:hover {
783
+ color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-hovered);
784
+ background: var(--ids-comp-button-outlined-color-bg-light-fixed-hovered);
785
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
786
+ }
787
+ .ids-button.ids-button-outlined.ids-button-light-fixed:hover > .ids-icon {
788
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-hovered);
789
+ }
790
+ .ids-button.ids-button-outlined.ids-button-light-fixed:focus, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible {
791
+ color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-focused);
792
+ background: var(--ids-comp-button-outlined-color-bg-light-fixed-focused);
793
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
794
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
795
+ }
796
+ .ids-button.ids-button-outlined.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible > .ids-icon {
797
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-focused);
798
+ }
799
+ .ids-button.ids-button-outlined.ids-button-light-fixed:active {
800
+ color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-pressed);
801
+ background: var(--ids-comp-button-outlined-color-bg-light-fixed-pressed);
802
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
803
+ }
804
+ .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
805
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
806
+ }
807
+ .ids-button.ids-button-outlined.ids-button-light-fixed:disabled {
808
+ color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
809
+ background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
810
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
811
+ }
812
+ .ids-button.ids-button-outlined.ids-button-light-fixed:disabled > .ids-icon {
813
+ color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
723
814
  }
724
815
  .ids-button.ids-button-outlined.ids-button-dark {
725
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-default);
726
- background: var(--ids-comp-buttons-outlined-color-bg-dark-default);
727
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-default);
816
+ color: var(--ids-comp-button-outlined-color-fg-label-dark-default);
817
+ background: var(--ids-comp-button-outlined-color-bg-dark-default);
818
+ border-color: var(--ids-comp-button-outlined-color-border-dark-default);
728
819
  }
729
820
  .ids-button.ids-button-outlined.ids-button-dark > .ids-icon {
730
- color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-default);
821
+ color: var(--ids-comp-button-outlined-color-fg-icon-dark-default);
731
822
  }
732
823
  .ids-button.ids-button-outlined.ids-button-dark:hover {
733
- background: var(--ids-comp-buttons-outlined-color-bg-dark-hovered);
734
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered);
735
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-hovered);
824
+ color: var(--ids-comp-button-outlined-color-fg-label-dark-hovered);
825
+ background: var(--ids-comp-button-outlined-color-bg-dark-hovered);
826
+ border-color: var(--ids-comp-button-outlined-color-border-dark-default);
736
827
  }
737
828
  .ids-button.ids-button-outlined.ids-button-dark:hover > .ids-icon {
738
- color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-hovered);
829
+ color: var(--ids-comp-button-outlined-color-fg-icon-dark-hovered);
739
830
  }
740
- .ids-button.ids-button-outlined.ids-button-dark:focus {
741
- outline-offset: 2px;
742
- background: var(--ids-comp-buttons-outlined-color-bg-dark-focused);
743
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-focused);
744
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-focused);
831
+ .ids-button.ids-button-outlined.ids-button-dark:focus, .ids-button.ids-button-outlined.ids-button-dark:focus-visible {
832
+ color: var(--ids-comp-button-outlined-color-fg-label-dark-focused);
833
+ background: var(--ids-comp-button-outlined-color-bg-dark-focused);
834
+ border-color: var(--ids-comp-button-outlined-color-border-dark-default);
835
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
745
836
  }
746
- .ids-button.ids-button-outlined.ids-button-dark:focus > .ids-icon {
747
- color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-focused);
837
+ .ids-button.ids-button-outlined.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-dark:focus-visible > .ids-icon {
838
+ color: var(--ids-comp-button-outlined-color-fg-icon-dark-focused);
748
839
  }
749
840
  .ids-button.ids-button-outlined.ids-button-dark:active {
750
- background: var(--ids-comp-buttons-outlined-color-bg-dark-pressed);
751
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed);
752
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-pressed);
841
+ color: var(--ids-comp-button-outlined-color-fg-label-dark-pressed);
842
+ background: var(--ids-comp-button-outlined-color-bg-dark-pressed);
843
+ border-color: var(--ids-comp-button-outlined-color-border-dark-default);
753
844
  }
754
845
  .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
755
- color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-pressed);
846
+ color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
756
847
  }
757
848
  .ids-button.ids-button-outlined.ids-button-dark:disabled {
758
- background: var(--ids-comp-buttons-outlined-color-bg-dark-disabled);
759
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled);
760
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-disabled);
849
+ color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
850
+ background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
851
+ border-color: var(--ids-comp-button-outlined-color-border-dark-default);
761
852
  }
762
853
  .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
763
- color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-disabled);
854
+ color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
764
855
  }
765
856
  .ids-button.ids-button-outlined.ids-button-surface {
766
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-default);
767
- background: var(--ids-comp-buttons-outlined-color-bg-surface-default);
768
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-default);
857
+ color: var(--ids-comp-button-outlined-color-fg-label-surface-default);
858
+ background: var(--ids-comp-button-outlined-color-bg-surface-default);
859
+ border-color: var(--ids-comp-button-outlined-color-border-surface-default);
769
860
  }
770
861
  .ids-button.ids-button-outlined.ids-button-surface > .ids-icon {
771
- color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-default);
862
+ color: var(--ids-comp-button-outlined-color-fg-icon-surface-default);
772
863
  }
773
864
  .ids-button.ids-button-outlined.ids-button-surface:hover {
774
- background: var(--ids-comp-buttons-outlined-color-bg-surface-hovered);
775
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered);
776
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-hovered);
865
+ color: var(--ids-comp-button-outlined-color-fg-label-surface-hovered);
866
+ background: var(--ids-comp-button-outlined-color-bg-surface-hovered);
867
+ border-color: var(--ids-comp-button-outlined-color-border-surface-default);
777
868
  }
778
869
  .ids-button.ids-button-outlined.ids-button-surface:hover > .ids-icon {
779
- color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-hovered);
870
+ color: var(--ids-comp-button-outlined-color-fg-icon-surface-hovered);
780
871
  }
781
- .ids-button.ids-button-outlined.ids-button-surface:focus {
782
- outline-offset: 2px;
783
- background: var(--ids-comp-buttons-outlined-color-bg-surface-focused);
784
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-focused);
785
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-focused);
872
+ .ids-button.ids-button-outlined.ids-button-surface:focus, .ids-button.ids-button-outlined.ids-button-surface:focus-visible {
873
+ color: var(--ids-comp-button-outlined-color-fg-label-surface-focused);
874
+ background: var(--ids-comp-button-outlined-color-bg-surface-focused);
875
+ border-color: var(--ids-comp-button-outlined-color-border-surface-default);
876
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
786
877
  }
787
- .ids-button.ids-button-outlined.ids-button-surface:focus > .ids-icon {
788
- color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-focused);
878
+ .ids-button.ids-button-outlined.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-surface:focus-visible > .ids-icon {
879
+ color: var(--ids-comp-button-outlined-color-fg-icon-surface-focused);
789
880
  }
790
881
  .ids-button.ids-button-outlined.ids-button-surface:active {
791
- background: var(--ids-comp-buttons-outlined-color-bg-surface-pressed);
792
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed);
793
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-pressed);
882
+ color: var(--ids-comp-button-outlined-color-fg-label-surface-pressed);
883
+ background: var(--ids-comp-button-outlined-color-bg-surface-pressed);
884
+ border-color: var(--ids-comp-button-outlined-color-border-surface-default);
794
885
  }
795
886
  .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
796
- color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-pressed);
887
+ color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
797
888
  }
798
889
  .ids-button.ids-button-outlined.ids-button-surface:disabled {
799
- background: var(--ids-comp-buttons-outlined-color-bg-surface-disabled);
800
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled);
801
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-disabled);
890
+ color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
891
+ background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
892
+ border-color: var(--ids-comp-button-outlined-color-border-surface-default);
802
893
  }
803
894
  .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
804
- color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-disabled);
895
+ color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);
805
896
  }
806
897
  .ids-button.ids-button-text.ids-button-primary {
807
- color: var(--ids-comp-buttons-text-color-fg-label-primary-default);
808
- background: var(--ids-comp-buttons-text-color-bg-primary-default);
809
- border-color: var(--ids-comp-buttons-text-color-border-primary-default);
898
+ color: var(--ids-comp-button-text-color-fg-label-primary-default);
899
+ background: var(--ids-comp-button-text-color-bg-primary-default);
900
+ border-color: var(--ids-comp-button-text-color-border-primary-default);
810
901
  }
811
902
  .ids-button.ids-button-text.ids-button-primary > .ids-icon {
812
- color: var(--ids-comp-buttons-text-color-fg-icon-primary-default);
903
+ color: var(--ids-comp-button-text-color-fg-icon-primary-default);
813
904
  }
814
905
  .ids-button.ids-button-text.ids-button-primary:hover {
815
- background: var(--ids-comp-buttons-text-color-bg-primary-hovered);
816
- color: var(--ids-comp-buttons-text-color-fg-label-primary-hovered);
817
- border-color: var(--ids-comp-buttons-text-color-border-primary-hovered);
906
+ color: var(--ids-comp-button-text-color-fg-label-primary-hovered);
907
+ background: var(--ids-comp-button-text-color-bg-primary-hovered);
908
+ border-color: var(--ids-comp-button-text-color-border-primary-default);
818
909
  }
819
910
  .ids-button.ids-button-text.ids-button-primary:hover > .ids-icon {
820
- color: var(--ids-comp-buttons-text-color-fg-icon-primary-hovered);
911
+ color: var(--ids-comp-button-text-color-fg-icon-primary-hovered);
821
912
  }
822
- .ids-button.ids-button-text.ids-button-primary:focus {
823
- outline-offset: 2px;
824
- background: var(--ids-comp-buttons-text-color-bg-primary-focused);
825
- color: var(--ids-comp-buttons-text-color-fg-label-primary-focused);
826
- border-color: var(--ids-comp-buttons-text-color-border-primary-focused);
913
+ .ids-button.ids-button-text.ids-button-primary:focus, .ids-button.ids-button-text.ids-button-primary:focus-visible {
914
+ color: var(--ids-comp-button-text-color-fg-label-primary-focused);
915
+ background: var(--ids-comp-button-text-color-bg-primary-focused);
916
+ border-color: var(--ids-comp-button-text-color-border-primary-default);
917
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
827
918
  }
828
- .ids-button.ids-button-text.ids-button-primary:focus > .ids-icon {
829
- color: var(--ids-comp-buttons-text-color-fg-icon-primary-focused);
919
+ .ids-button.ids-button-text.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-text.ids-button-primary:focus-visible > .ids-icon {
920
+ color: var(--ids-comp-button-text-color-fg-icon-primary-focused);
830
921
  }
831
922
  .ids-button.ids-button-text.ids-button-primary:active {
832
- background: var(--ids-comp-buttons-text-color-bg-primary-pressed);
833
- color: var(--ids-comp-buttons-text-color-fg-label-primary-pressed);
834
- border-color: var(--ids-comp-buttons-text-color-border-primary-pressed);
923
+ color: var(--ids-comp-button-text-color-fg-label-primary-pressed);
924
+ background: var(--ids-comp-button-text-color-bg-primary-pressed);
925
+ border-color: var(--ids-comp-button-text-color-border-primary-default);
835
926
  }
836
927
  .ids-button.ids-button-text.ids-button-primary:active > .ids-icon {
837
- color: var(--ids-comp-buttons-text-color-fg-icon-primary-pressed);
928
+ color: var(--ids-comp-button-text-color-fg-icon-primary-pressed);
838
929
  }
839
930
  .ids-button.ids-button-text.ids-button-primary:disabled {
840
- background: var(--ids-comp-buttons-text-color-bg-primary-disabled);
841
- color: var(--ids-comp-buttons-text-color-fg-label-primary-disabled);
842
- border-color: var(--ids-comp-buttons-text-color-border-primary-disabled);
931
+ color: var(--ids-comp-button-text-color-fg-label-primary-disabled);
932
+ background: var(--ids-comp-button-text-color-bg-primary-disabled);
933
+ border-color: var(--ids-comp-button-text-color-border-primary-default);
843
934
  }
844
935
  .ids-button.ids-button-text.ids-button-primary:disabled > .ids-icon {
845
- color: var(--ids-comp-buttons-text-color-fg-icon-primary-disabled);
936
+ color: var(--ids-comp-button-text-color-fg-icon-primary-disabled);
846
937
  }
847
938
  .ids-button.ids-button-text.ids-button-secondary {
848
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-default);
849
- background: var(--ids-comp-buttons-text-color-bg-secondary-default);
850
- border-color: var(--ids-comp-buttons-text-color-border-secondary-default);
939
+ color: var(--ids-comp-button-text-color-fg-label-secondary-default);
940
+ background: var(--ids-comp-button-text-color-bg-secondary-default);
941
+ border-color: var(--ids-comp-button-text-color-border-secondary-default);
851
942
  }
852
943
  .ids-button.ids-button-text.ids-button-secondary > .ids-icon {
853
- color: var(--ids-comp-buttons-text-color-fg-icon-secondary-default);
944
+ color: var(--ids-comp-button-text-color-fg-icon-secondary-default);
854
945
  }
855
946
  .ids-button.ids-button-text.ids-button-secondary:hover {
856
- background: var(--ids-comp-buttons-text-color-bg-secondary-hovered);
857
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-hovered);
858
- border-color: var(--ids-comp-buttons-text-color-border-secondary-hovered);
947
+ color: var(--ids-comp-button-text-color-fg-label-secondary-hovered);
948
+ background: var(--ids-comp-button-text-color-bg-secondary-hovered);
949
+ border-color: var(--ids-comp-button-text-color-border-secondary-default);
859
950
  }
860
951
  .ids-button.ids-button-text.ids-button-secondary:hover > .ids-icon {
861
- color: var(--ids-comp-buttons-text-color-fg-icon-secondary-hovered);
952
+ color: var(--ids-comp-button-text-color-fg-icon-secondary-hovered);
862
953
  }
863
- .ids-button.ids-button-text.ids-button-secondary:focus {
864
- outline-offset: 2px;
865
- background: var(--ids-comp-buttons-text-color-bg-secondary-focused);
866
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-focused);
867
- border-color: var(--ids-comp-buttons-text-color-border-secondary-focused);
954
+ .ids-button.ids-button-text.ids-button-secondary:focus, .ids-button.ids-button-text.ids-button-secondary:focus-visible {
955
+ color: var(--ids-comp-button-text-color-fg-label-secondary-focused);
956
+ background: var(--ids-comp-button-text-color-bg-secondary-focused);
957
+ border-color: var(--ids-comp-button-text-color-border-secondary-default);
958
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
868
959
  }
869
- .ids-button.ids-button-text.ids-button-secondary:focus > .ids-icon {
870
- color: var(--ids-comp-buttons-text-color-fg-icon-secondary-focused);
960
+ .ids-button.ids-button-text.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-text.ids-button-secondary:focus-visible > .ids-icon {
961
+ color: var(--ids-comp-button-text-color-fg-icon-secondary-focused);
871
962
  }
872
963
  .ids-button.ids-button-text.ids-button-secondary:active {
873
- background: var(--ids-comp-buttons-text-color-bg-secondary-pressed);
874
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-pressed);
875
- border-color: var(--ids-comp-buttons-text-color-border-secondary-pressed);
964
+ color: var(--ids-comp-button-text-color-fg-label-secondary-pressed);
965
+ background: var(--ids-comp-button-text-color-bg-secondary-pressed);
966
+ border-color: var(--ids-comp-button-text-color-border-secondary-default);
876
967
  }
877
968
  .ids-button.ids-button-text.ids-button-secondary:active > .ids-icon {
878
- color: var(--ids-comp-buttons-text-color-fg-icon-secondary-pressed);
969
+ color: var(--ids-comp-button-text-color-fg-icon-secondary-pressed);
879
970
  }
880
971
  .ids-button.ids-button-text.ids-button-secondary:disabled {
881
- background: var(--ids-comp-buttons-text-color-bg-secondary-disabled);
882
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-disabled);
883
- border-color: var(--ids-comp-buttons-text-color-border-secondary-disabled);
972
+ color: var(--ids-comp-button-text-color-fg-label-secondary-disabled);
973
+ background: var(--ids-comp-button-text-color-bg-secondary-disabled);
974
+ border-color: var(--ids-comp-button-text-color-border-secondary-default);
884
975
  }
885
976
  .ids-button.ids-button-text.ids-button-secondary:disabled > .ids-icon {
886
- color: var(--ids-comp-buttons-text-color-fg-icon-secondary-disabled);
977
+ color: var(--ids-comp-button-text-color-fg-icon-secondary-disabled);
887
978
  }
888
979
  .ids-button.ids-button-text.ids-button-brand {
889
- color: var(--ids-comp-buttons-text-color-fg-label-brand-default);
890
- background: var(--ids-comp-buttons-text-color-bg-brand-default);
891
- border-color: var(--ids-comp-buttons-text-color-border-brand-default);
980
+ color: var(--ids-comp-button-text-color-fg-label-brand-default);
981
+ background: var(--ids-comp-button-text-color-bg-brand-default);
982
+ border-color: var(--ids-comp-button-text-color-border-brand-default);
892
983
  }
893
984
  .ids-button.ids-button-text.ids-button-brand > .ids-icon {
894
- color: var(--ids-comp-buttons-text-color-fg-icon-brand-default);
985
+ color: var(--ids-comp-button-text-color-fg-icon-brand-default);
895
986
  }
896
987
  .ids-button.ids-button-text.ids-button-brand:hover {
897
- background: var(--ids-comp-buttons-text-color-bg-brand-hovered);
898
- color: var(--ids-comp-buttons-text-color-fg-label-brand-hovered);
899
- border-color: var(--ids-comp-buttons-text-color-border-brand-hovered);
988
+ color: var(--ids-comp-button-text-color-fg-label-brand-hovered);
989
+ background: var(--ids-comp-button-text-color-bg-brand-hovered);
990
+ border-color: var(--ids-comp-button-text-color-border-brand-default);
900
991
  }
901
992
  .ids-button.ids-button-text.ids-button-brand:hover > .ids-icon {
902
- color: var(--ids-comp-buttons-text-color-fg-icon-brand-hovered);
993
+ color: var(--ids-comp-button-text-color-fg-icon-brand-hovered);
903
994
  }
904
- .ids-button.ids-button-text.ids-button-brand:focus {
905
- outline-offset: 2px;
906
- background: var(--ids-comp-buttons-text-color-bg-brand-focused);
907
- color: var(--ids-comp-buttons-text-color-fg-label-brand-focused);
908
- border-color: var(--ids-comp-buttons-text-color-border-brand-focused);
995
+ .ids-button.ids-button-text.ids-button-brand:focus, .ids-button.ids-button-text.ids-button-brand:focus-visible {
996
+ color: var(--ids-comp-button-text-color-fg-label-brand-focused);
997
+ background: var(--ids-comp-button-text-color-bg-brand-focused);
998
+ border-color: var(--ids-comp-button-text-color-border-brand-default);
999
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
909
1000
  }
910
- .ids-button.ids-button-text.ids-button-brand:focus > .ids-icon {
911
- color: var(--ids-comp-buttons-text-color-fg-icon-brand-focused);
1001
+ .ids-button.ids-button-text.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-text.ids-button-brand:focus-visible > .ids-icon {
1002
+ color: var(--ids-comp-button-text-color-fg-icon-brand-focused);
912
1003
  }
913
1004
  .ids-button.ids-button-text.ids-button-brand:active {
914
- background: var(--ids-comp-buttons-text-color-bg-brand-pressed);
915
- color: var(--ids-comp-buttons-text-color-fg-label-brand-pressed);
916
- border-color: var(--ids-comp-buttons-text-color-border-brand-pressed);
1005
+ color: var(--ids-comp-button-text-color-fg-label-brand-pressed);
1006
+ background: var(--ids-comp-button-text-color-bg-brand-pressed);
1007
+ border-color: var(--ids-comp-button-text-color-border-brand-default);
917
1008
  }
918
1009
  .ids-button.ids-button-text.ids-button-brand:active > .ids-icon {
919
- color: var(--ids-comp-buttons-text-color-fg-icon-brand-pressed);
1010
+ color: var(--ids-comp-button-text-color-fg-icon-brand-pressed);
920
1011
  }
921
1012
  .ids-button.ids-button-text.ids-button-brand:disabled {
922
- background: var(--ids-comp-buttons-text-color-bg-brand-disabled);
923
- color: var(--ids-comp-buttons-text-color-fg-label-brand-disabled);
924
- border-color: var(--ids-comp-buttons-text-color-border-brand-disabled);
1013
+ color: var(--ids-comp-button-text-color-fg-label-brand-disabled);
1014
+ background: var(--ids-comp-button-text-color-bg-brand-disabled);
1015
+ border-color: var(--ids-comp-button-text-color-border-brand-default);
925
1016
  }
926
1017
  .ids-button.ids-button-text.ids-button-brand:disabled > .ids-icon {
927
- color: var(--ids-comp-buttons-text-color-fg-icon-brand-disabled);
1018
+ color: var(--ids-comp-button-text-color-fg-icon-brand-disabled);
928
1019
  }
929
1020
  .ids-button.ids-button-text.ids-button-error {
930
- color: var(--ids-comp-buttons-text-color-fg-label-error-default);
931
- background: var(--ids-comp-buttons-text-color-bg-error-default);
932
- border-color: var(--ids-comp-buttons-text-color-border-error-default);
1021
+ color: var(--ids-comp-button-text-color-fg-label-error-default);
1022
+ background: var(--ids-comp-button-text-color-bg-error-default);
1023
+ border-color: var(--ids-comp-button-text-color-border-error-default);
933
1024
  }
934
1025
  .ids-button.ids-button-text.ids-button-error > .ids-icon {
935
- color: var(--ids-comp-buttons-text-color-fg-icon-error-default);
1026
+ color: var(--ids-comp-button-text-color-fg-icon-error-default);
936
1027
  }
937
1028
  .ids-button.ids-button-text.ids-button-error:hover {
938
- background: var(--ids-comp-buttons-text-color-bg-error-hovered);
939
- color: var(--ids-comp-buttons-text-color-fg-label-error-hovered);
940
- border-color: var(--ids-comp-buttons-text-color-border-error-hovered);
1029
+ color: var(--ids-comp-button-text-color-fg-label-error-hovered);
1030
+ background: var(--ids-comp-button-text-color-bg-error-hovered);
1031
+ border-color: var(--ids-comp-button-text-color-border-error-default);
941
1032
  }
942
1033
  .ids-button.ids-button-text.ids-button-error:hover > .ids-icon {
943
- color: var(--ids-comp-buttons-text-color-fg-icon-error-hovered);
1034
+ color: var(--ids-comp-button-text-color-fg-icon-error-hovered);
944
1035
  }
945
- .ids-button.ids-button-text.ids-button-error:focus {
946
- outline-offset: 2px;
947
- background: var(--ids-comp-buttons-text-color-bg-error-focused);
948
- color: var(--ids-comp-buttons-text-color-fg-label-error-focused);
949
- border-color: var(--ids-comp-buttons-text-color-border-error-focused);
1036
+ .ids-button.ids-button-text.ids-button-error:focus, .ids-button.ids-button-text.ids-button-error:focus-visible {
1037
+ color: var(--ids-comp-button-text-color-fg-label-error-focused);
1038
+ background: var(--ids-comp-button-text-color-bg-error-focused);
1039
+ border-color: var(--ids-comp-button-text-color-border-error-default);
1040
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
950
1041
  }
951
- .ids-button.ids-button-text.ids-button-error:focus > .ids-icon {
952
- color: var(--ids-comp-buttons-text-color-fg-icon-error-focused);
1042
+ .ids-button.ids-button-text.ids-button-error:focus > .ids-icon, .ids-button.ids-button-text.ids-button-error:focus-visible > .ids-icon {
1043
+ color: var(--ids-comp-button-text-color-fg-icon-error-focused);
953
1044
  }
954
1045
  .ids-button.ids-button-text.ids-button-error:active {
955
- background: var(--ids-comp-buttons-text-color-bg-error-pressed);
956
- color: var(--ids-comp-buttons-text-color-fg-label-error-pressed);
957
- border-color: var(--ids-comp-buttons-text-color-border-error-pressed);
1046
+ color: var(--ids-comp-button-text-color-fg-label-error-pressed);
1047
+ background: var(--ids-comp-button-text-color-bg-error-pressed);
1048
+ border-color: var(--ids-comp-button-text-color-border-error-default);
958
1049
  }
959
1050
  .ids-button.ids-button-text.ids-button-error:active > .ids-icon {
960
- color: var(--ids-comp-buttons-text-color-fg-icon-error-pressed);
1051
+ color: var(--ids-comp-button-text-color-fg-icon-error-pressed);
961
1052
  }
962
1053
  .ids-button.ids-button-text.ids-button-success {
963
- color: var(--ids-comp-buttons-text-color-fg-label-success-default);
964
- background: var(--ids-comp-buttons-text-color-bg-success-default);
965
- border-color: var(--ids-comp-buttons-text-color-border-success-default);
1054
+ color: var(--ids-comp-button-text-color-fg-label-success-default);
1055
+ background: var(--ids-comp-button-text-color-bg-success-default);
1056
+ border-color: var(--ids-comp-button-text-color-border-success-default);
966
1057
  }
967
1058
  .ids-button.ids-button-text.ids-button-success > .ids-icon {
968
- color: var(--ids-comp-buttons-text-color-fg-icon-success-default);
1059
+ color: var(--ids-comp-button-text-color-fg-icon-success-default);
969
1060
  }
970
1061
  .ids-button.ids-button-text.ids-button-success:hover {
971
- background: var(--ids-comp-buttons-text-color-bg-success-hovered);
972
- color: var(--ids-comp-buttons-text-color-fg-label-success-hovered);
973
- border-color: var(--ids-comp-buttons-text-color-border-success-hovered);
1062
+ color: var(--ids-comp-button-text-color-fg-label-success-hovered);
1063
+ background: var(--ids-comp-button-text-color-bg-success-hovered);
1064
+ border-color: var(--ids-comp-button-text-color-border-success-default);
974
1065
  }
975
1066
  .ids-button.ids-button-text.ids-button-success:hover > .ids-icon {
976
- color: var(--ids-comp-buttons-text-color-fg-icon-success-hovered);
1067
+ color: var(--ids-comp-button-text-color-fg-icon-success-hovered);
977
1068
  }
978
- .ids-button.ids-button-text.ids-button-success:focus {
979
- outline-offset: 2px;
980
- background: var(--ids-comp-buttons-text-color-bg-success-focused);
981
- color: var(--ids-comp-buttons-text-color-fg-label-success-focused);
982
- border-color: var(--ids-comp-buttons-text-color-border-success-focused);
1069
+ .ids-button.ids-button-text.ids-button-success:focus, .ids-button.ids-button-text.ids-button-success:focus-visible {
1070
+ color: var(--ids-comp-button-text-color-fg-label-success-focused);
1071
+ background: var(--ids-comp-button-text-color-bg-success-focused);
1072
+ border-color: var(--ids-comp-button-text-color-border-success-default);
1073
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
983
1074
  }
984
- .ids-button.ids-button-text.ids-button-success:focus > .ids-icon {
985
- color: var(--ids-comp-buttons-text-color-fg-icon-success-focused);
1075
+ .ids-button.ids-button-text.ids-button-success:focus > .ids-icon, .ids-button.ids-button-text.ids-button-success:focus-visible > .ids-icon {
1076
+ color: var(--ids-comp-button-text-color-fg-icon-success-focused);
986
1077
  }
987
1078
  .ids-button.ids-button-text.ids-button-success:active {
988
- background: var(--ids-comp-buttons-text-color-bg-success-pressed);
989
- color: var(--ids-comp-buttons-text-color-fg-label-success-pressed);
990
- border-color: var(--ids-comp-buttons-text-color-border-success-pressed);
1079
+ color: var(--ids-comp-button-text-color-fg-label-success-pressed);
1080
+ background: var(--ids-comp-button-text-color-bg-success-pressed);
1081
+ border-color: var(--ids-comp-button-text-color-border-success-default);
991
1082
  }
992
1083
  .ids-button.ids-button-text.ids-button-success:active > .ids-icon {
993
- color: var(--ids-comp-buttons-text-color-fg-icon-success-pressed);
1084
+ color: var(--ids-comp-button-text-color-fg-icon-success-pressed);
994
1085
  }
995
1086
  .ids-button.ids-button-text.ids-button-warning {
996
- color: var(--ids-comp-buttons-text-color-fg-label-warning-default);
997
- background: var(--ids-comp-buttons-text-color-bg-warning-default);
998
- border-color: var(--ids-comp-buttons-text-color-border-warning-default);
1087
+ color: var(--ids-comp-button-text-color-fg-label-warning-default);
1088
+ background: var(--ids-comp-button-text-color-bg-warning-default);
1089
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
999
1090
  }
1000
1091
  .ids-button.ids-button-text.ids-button-warning > .ids-icon {
1001
- color: var(--ids-comp-buttons-text-color-fg-icon-warning-default);
1092
+ color: var(--ids-comp-button-text-color-fg-icon-warning-default);
1002
1093
  }
1003
1094
  .ids-button.ids-button-text.ids-button-warning:hover {
1004
- background: var(--ids-comp-buttons-text-color-bg-warning-hovered);
1005
- color: var(--ids-comp-buttons-text-color-fg-label-warning-hovered);
1006
- border-color: var(--ids-comp-buttons-text-color-border-warning-hovered);
1095
+ color: var(--ids-comp-button-text-color-fg-label-warning-hovered);
1096
+ background: var(--ids-comp-button-text-color-bg-warning-hovered);
1097
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
1007
1098
  }
1008
1099
  .ids-button.ids-button-text.ids-button-warning:hover > .ids-icon {
1009
- color: var(--ids-comp-buttons-text-color-fg-icon-warning-hovered);
1100
+ color: var(--ids-comp-button-text-color-fg-icon-warning-hovered);
1010
1101
  }
1011
- .ids-button.ids-button-text.ids-button-warning:focus {
1012
- outline-offset: 2px;
1013
- background: var(--ids-comp-buttons-text-color-bg-warning-focused);
1014
- color: var(--ids-comp-buttons-text-color-fg-label-warning-focused);
1015
- border-color: var(--ids-comp-buttons-text-color-border-warning-focused);
1102
+ .ids-button.ids-button-text.ids-button-warning:focus, .ids-button.ids-button-text.ids-button-warning:focus-visible {
1103
+ color: var(--ids-comp-button-text-color-fg-label-warning-focused);
1104
+ background: var(--ids-comp-button-text-color-bg-warning-focused);
1105
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
1106
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
1016
1107
  }
1017
- .ids-button.ids-button-text.ids-button-warning:focus > .ids-icon {
1018
- color: var(--ids-comp-buttons-text-color-fg-icon-warning-focused);
1108
+ .ids-button.ids-button-text.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-text.ids-button-warning:focus-visible > .ids-icon {
1109
+ color: var(--ids-comp-button-text-color-fg-icon-warning-focused);
1019
1110
  }
1020
1111
  .ids-button.ids-button-text.ids-button-warning:active {
1021
- background: var(--ids-comp-buttons-text-color-bg-warning-pressed);
1022
- color: var(--ids-comp-buttons-text-color-fg-label-warning-pressed);
1023
- border-color: var(--ids-comp-buttons-text-color-border-warning-pressed);
1112
+ color: var(--ids-comp-button-text-color-fg-label-warning-pressed);
1113
+ background: var(--ids-comp-button-text-color-bg-warning-pressed);
1114
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
1024
1115
  }
1025
1116
  .ids-button.ids-button-text.ids-button-warning:active > .ids-icon {
1026
- color: var(--ids-comp-buttons-text-color-fg-icon-warning-pressed);
1117
+ color: var(--ids-comp-button-text-color-fg-icon-warning-pressed);
1027
1118
  }
1028
1119
  .ids-button.ids-button-text.ids-button-light {
1029
- color: var(--ids-comp-buttons-text-color-fg-label-light-default);
1030
- background: var(--ids-comp-buttons-text-color-bg-light-default);
1031
- border-color: var(--ids-comp-buttons-text-color-border-light-default);
1120
+ color: var(--ids-comp-button-text-color-fg-label-light-default);
1121
+ background: var(--ids-comp-button-text-color-bg-light-default);
1122
+ border-color: var(--ids-comp-button-text-color-border-light-default);
1032
1123
  }
1033
1124
  .ids-button.ids-button-text.ids-button-light > .ids-icon {
1034
- color: var(--ids-comp-buttons-text-color-fg-icon-light-default);
1125
+ color: var(--ids-comp-button-text-color-fg-icon-light-default);
1035
1126
  }
1036
1127
  .ids-button.ids-button-text.ids-button-light:hover {
1037
- background: var(--ids-comp-buttons-text-color-bg-light-hovered);
1038
- color: var(--ids-comp-buttons-text-color-fg-label-light-hovered);
1039
- border-color: var(--ids-comp-buttons-text-color-border-light-hovered);
1128
+ color: var(--ids-comp-button-text-color-fg-label-light-hovered);
1129
+ background: var(--ids-comp-button-text-color-bg-light-hovered);
1130
+ border-color: var(--ids-comp-button-text-color-border-light-default);
1040
1131
  }
1041
1132
  .ids-button.ids-button-text.ids-button-light:hover > .ids-icon {
1042
- color: var(--ids-comp-buttons-text-color-fg-icon-light-hovered);
1133
+ color: var(--ids-comp-button-text-color-fg-icon-light-hovered);
1043
1134
  }
1044
- .ids-button.ids-button-text.ids-button-light:focus {
1045
- outline-offset: 2px;
1046
- background: var(--ids-comp-buttons-text-color-bg-light-focused);
1047
- color: var(--ids-comp-buttons-text-color-fg-label-light-focused);
1048
- border-color: var(--ids-comp-buttons-text-color-border-light-focused);
1135
+ .ids-button.ids-button-text.ids-button-light:focus, .ids-button.ids-button-text.ids-button-light:focus-visible {
1136
+ color: var(--ids-comp-button-text-color-fg-label-light-focused);
1137
+ background: var(--ids-comp-button-text-color-bg-light-focused);
1138
+ border-color: var(--ids-comp-button-text-color-border-light-default);
1139
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
1049
1140
  }
1050
- .ids-button.ids-button-text.ids-button-light:focus > .ids-icon {
1051
- color: var(--ids-comp-buttons-text-color-fg-icon-light-focused);
1141
+ .ids-button.ids-button-text.ids-button-light:focus > .ids-icon, .ids-button.ids-button-text.ids-button-light:focus-visible > .ids-icon {
1142
+ color: var(--ids-comp-button-text-color-fg-icon-light-focused);
1052
1143
  }
1053
1144
  .ids-button.ids-button-text.ids-button-light:active {
1054
- background: var(--ids-comp-buttons-text-color-bg-light-pressed);
1055
- color: var(--ids-comp-buttons-text-color-fg-label-light-pressed);
1056
- border-color: var(--ids-comp-buttons-text-color-border-light-pressed);
1145
+ color: var(--ids-comp-button-text-color-fg-label-light-pressed);
1146
+ background: var(--ids-comp-button-text-color-bg-light-pressed);
1147
+ border-color: var(--ids-comp-button-text-color-border-light-default);
1057
1148
  }
1058
1149
  .ids-button.ids-button-text.ids-button-light:active > .ids-icon {
1059
- color: var(--ids-comp-buttons-text-color-fg-icon-light-pressed);
1150
+ color: var(--ids-comp-button-text-color-fg-icon-light-pressed);
1060
1151
  }
1061
1152
  .ids-button.ids-button-text.ids-button-light:disabled {
1062
- background: var(--ids-comp-buttons-text-color-bg-light-disabled);
1063
- color: var(--ids-comp-buttons-text-color-fg-label-light-disabled);
1064
- border-color: var(--ids-comp-buttons-text-color-border-light-disabled);
1153
+ color: var(--ids-comp-button-text-color-fg-label-light-disabled);
1154
+ background: var(--ids-comp-button-text-color-bg-light-disabled);
1155
+ border-color: var(--ids-comp-button-text-color-border-light-default);
1065
1156
  }
1066
1157
  .ids-button.ids-button-text.ids-button-light:disabled > .ids-icon {
1067
- color: var(--ids-comp-buttons-text-color-fg-icon-light-disabled);
1158
+ color: var(--ids-comp-button-text-color-fg-icon-light-disabled);
1159
+ }
1160
+ .ids-button.ids-button-text.ids-button-light-fixed {
1161
+ color: var(--ids-comp-button-text-color-fg-label-light-fixed-default);
1162
+ background: var(--ids-comp-button-text-color-bg-light-fixed-default);
1163
+ border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1164
+ }
1165
+ .ids-button.ids-button-text.ids-button-light-fixed > .ids-icon {
1166
+ color: var(--ids-comp-button-text-color-fg-icon-light-fixed-default);
1167
+ }
1168
+ .ids-button.ids-button-text.ids-button-light-fixed:hover {
1169
+ color: var(--ids-comp-button-text-color-fg-label-light-fixed-hovered);
1170
+ background: var(--ids-comp-button-text-color-bg-light-fixed-hovered);
1171
+ border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1172
+ }
1173
+ .ids-button.ids-button-text.ids-button-light-fixed:hover > .ids-icon {
1174
+ color: var(--ids-comp-button-text-color-fg-icon-light-fixed-hovered);
1175
+ }
1176
+ .ids-button.ids-button-text.ids-button-light-fixed:focus, .ids-button.ids-button-text.ids-button-light-fixed:focus-visible {
1177
+ color: var(--ids-comp-button-text-color-fg-label-light-fixed-focused);
1178
+ background: var(--ids-comp-button-text-color-bg-light-fixed-focused);
1179
+ border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1180
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
1181
+ }
1182
+ .ids-button.ids-button-text.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-text.ids-button-light-fixed:focus-visible > .ids-icon {
1183
+ color: var(--ids-comp-button-text-color-fg-icon-light-fixed-focused);
1184
+ }
1185
+ .ids-button.ids-button-text.ids-button-light-fixed:active {
1186
+ color: var(--ids-comp-button-text-color-fg-label-light-fixed-pressed);
1187
+ background: var(--ids-comp-button-text-color-bg-light-fixed-pressed);
1188
+ border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1189
+ }
1190
+ .ids-button.ids-button-text.ids-button-light-fixed:active > .ids-icon {
1191
+ color: var(--ids-comp-button-text-color-fg-icon-light-fixed-pressed);
1192
+ }
1193
+ .ids-button.ids-button-text.ids-button-light-fixed:disabled {
1194
+ color: var(--ids-comp-button-text-color-fg-label-light-fixed-disabled);
1195
+ background: var(--ids-comp-button-text-color-bg-light-fixed-disabled);
1196
+ border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1197
+ }
1198
+ .ids-button.ids-button-text.ids-button-light-fixed:disabled > .ids-icon {
1199
+ color: var(--ids-comp-button-text-color-fg-icon-light-fixed-disabled);
1068
1200
  }
1069
1201
  .ids-button.ids-button-text.ids-button-dark {
1070
- color: var(--ids-comp-buttons-text-color-fg-label-dark-default);
1071
- background: var(--ids-comp-buttons-text-color-bg-dark-default);
1072
- border-color: var(--ids-comp-buttons-text-color-border-dark-default);
1202
+ color: var(--ids-comp-button-text-color-fg-label-dark-default);
1203
+ background: var(--ids-comp-button-text-color-bg-dark-default);
1204
+ border-color: var(--ids-comp-button-text-color-border-dark-default);
1073
1205
  }
1074
1206
  .ids-button.ids-button-text.ids-button-dark > .ids-icon {
1075
- color: var(--ids-comp-buttons-text-color-fg-icon-dark-default);
1207
+ color: var(--ids-comp-button-text-color-fg-icon-dark-default);
1076
1208
  }
1077
1209
  .ids-button.ids-button-text.ids-button-dark:hover {
1078
- background: var(--ids-comp-buttons-text-color-bg-dark-hovered);
1079
- color: var(--ids-comp-buttons-text-color-fg-label-dark-hovered);
1080
- border-color: var(--ids-comp-buttons-text-color-border-dark-hovered);
1210
+ color: var(--ids-comp-button-text-color-fg-label-dark-hovered);
1211
+ background: var(--ids-comp-button-text-color-bg-dark-hovered);
1212
+ border-color: var(--ids-comp-button-text-color-border-dark-default);
1081
1213
  }
1082
1214
  .ids-button.ids-button-text.ids-button-dark:hover > .ids-icon {
1083
- color: var(--ids-comp-buttons-text-color-fg-icon-dark-hovered);
1215
+ color: var(--ids-comp-button-text-color-fg-icon-dark-hovered);
1084
1216
  }
1085
- .ids-button.ids-button-text.ids-button-dark:focus {
1086
- outline-offset: 2px;
1087
- background: var(--ids-comp-buttons-text-color-bg-dark-focused);
1088
- color: var(--ids-comp-buttons-text-color-fg-label-dark-focused);
1089
- border-color: var(--ids-comp-buttons-text-color-border-dark-focused);
1217
+ .ids-button.ids-button-text.ids-button-dark:focus, .ids-button.ids-button-text.ids-button-dark:focus-visible {
1218
+ color: var(--ids-comp-button-text-color-fg-label-dark-focused);
1219
+ background: var(--ids-comp-button-text-color-bg-dark-focused);
1220
+ border-color: var(--ids-comp-button-text-color-border-dark-default);
1221
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
1090
1222
  }
1091
- .ids-button.ids-button-text.ids-button-dark:focus > .ids-icon {
1092
- color: var(--ids-comp-buttons-text-color-fg-icon-dark-focused);
1223
+ .ids-button.ids-button-text.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-text.ids-button-dark:focus-visible > .ids-icon {
1224
+ color: var(--ids-comp-button-text-color-fg-icon-dark-focused);
1093
1225
  }
1094
1226
  .ids-button.ids-button-text.ids-button-dark:active {
1095
- background: var(--ids-comp-buttons-text-color-bg-dark-pressed);
1096
- color: var(--ids-comp-buttons-text-color-fg-label-dark-pressed);
1097
- border-color: var(--ids-comp-buttons-text-color-border-dark-pressed);
1227
+ color: var(--ids-comp-button-text-color-fg-label-dark-pressed);
1228
+ background: var(--ids-comp-button-text-color-bg-dark-pressed);
1229
+ border-color: var(--ids-comp-button-text-color-border-dark-default);
1098
1230
  }
1099
1231
  .ids-button.ids-button-text.ids-button-dark:active > .ids-icon {
1100
- color: var(--ids-comp-buttons-text-color-fg-icon-dark-pressed);
1232
+ color: var(--ids-comp-button-text-color-fg-icon-dark-pressed);
1101
1233
  }
1102
1234
  .ids-button.ids-button-text.ids-button-dark:disabled {
1103
- background: var(--ids-comp-buttons-text-color-bg-dark-disabled);
1104
- color: var(--ids-comp-buttons-text-color-fg-label-dark-disabled);
1105
- border-color: var(--ids-comp-buttons-text-color-border-dark-disabled);
1235
+ color: var(--ids-comp-button-text-color-fg-label-dark-disabled);
1236
+ background: var(--ids-comp-button-text-color-bg-dark-disabled);
1237
+ border-color: var(--ids-comp-button-text-color-border-dark-default);
1106
1238
  }
1107
1239
  .ids-button.ids-button-text.ids-button-dark:disabled > .ids-icon {
1108
- color: var(--ids-comp-buttons-text-color-fg-icon-dark-disabled);
1240
+ color: var(--ids-comp-button-text-color-fg-icon-dark-disabled);
1109
1241
  }
1110
1242
  .ids-button.ids-button-text.ids-button-surface {
1111
- color: var(--ids-comp-buttons-text-color-fg-label-surface-default);
1112
- background: var(--ids-comp-buttons-text-color-bg-surface-default);
1113
- border-color: var(--ids-comp-buttons-text-color-border-surface-default);
1243
+ color: var(--ids-comp-button-text-color-fg-label-surface-default);
1244
+ background: var(--ids-comp-button-text-color-bg-surface-default);
1245
+ border-color: var(--ids-comp-button-text-color-border-surface-default);
1114
1246
  }
1115
1247
  .ids-button.ids-button-text.ids-button-surface > .ids-icon {
1116
- color: var(--ids-comp-buttons-text-color-fg-icon-surface-default);
1248
+ color: var(--ids-comp-button-text-color-fg-icon-surface-default);
1117
1249
  }
1118
1250
  .ids-button.ids-button-text.ids-button-surface:hover {
1119
- background: var(--ids-comp-buttons-text-color-bg-surface-hovered);
1120
- color: var(--ids-comp-buttons-text-color-fg-label-surface-hovered);
1121
- border-color: var(--ids-comp-buttons-text-color-border-surface-hovered);
1251
+ color: var(--ids-comp-button-text-color-fg-label-surface-hovered);
1252
+ background: var(--ids-comp-button-text-color-bg-surface-hovered);
1253
+ border-color: var(--ids-comp-button-text-color-border-surface-default);
1122
1254
  }
1123
1255
  .ids-button.ids-button-text.ids-button-surface:hover > .ids-icon {
1124
- color: var(--ids-comp-buttons-text-color-fg-icon-surface-hovered);
1256
+ color: var(--ids-comp-button-text-color-fg-icon-surface-hovered);
1125
1257
  }
1126
- .ids-button.ids-button-text.ids-button-surface:focus {
1127
- outline-offset: 2px;
1128
- background: var(--ids-comp-buttons-text-color-bg-surface-focused);
1129
- color: var(--ids-comp-buttons-text-color-fg-label-surface-focused);
1130
- border-color: var(--ids-comp-buttons-text-color-border-surface-focused);
1258
+ .ids-button.ids-button-text.ids-button-surface:focus, .ids-button.ids-button-text.ids-button-surface:focus-visible {
1259
+ color: var(--ids-comp-button-text-color-fg-label-surface-focused);
1260
+ background: var(--ids-comp-button-text-color-bg-surface-focused);
1261
+ border-color: var(--ids-comp-button-text-color-border-surface-default);
1262
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
1131
1263
  }
1132
- .ids-button.ids-button-text.ids-button-surface:focus > .ids-icon {
1133
- color: var(--ids-comp-buttons-text-color-fg-icon-surface-focused);
1264
+ .ids-button.ids-button-text.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-text.ids-button-surface:focus-visible > .ids-icon {
1265
+ color: var(--ids-comp-button-text-color-fg-icon-surface-focused);
1134
1266
  }
1135
1267
  .ids-button.ids-button-text.ids-button-surface:active {
1136
- background: var(--ids-comp-buttons-text-color-bg-surface-pressed);
1137
- color: var(--ids-comp-buttons-text-color-fg-label-surface-pressed);
1138
- border-color: var(--ids-comp-buttons-text-color-border-surface-pressed);
1268
+ color: var(--ids-comp-button-text-color-fg-label-surface-pressed);
1269
+ background: var(--ids-comp-button-text-color-bg-surface-pressed);
1270
+ border-color: var(--ids-comp-button-text-color-border-surface-default);
1139
1271
  }
1140
1272
  .ids-button.ids-button-text.ids-button-surface:active > .ids-icon {
1141
- color: var(--ids-comp-buttons-text-color-fg-icon-surface-pressed);
1273
+ color: var(--ids-comp-button-text-color-fg-icon-surface-pressed);
1142
1274
  }
1143
1275
  .ids-button.ids-button-text.ids-button-surface:disabled {
1144
- background: var(--ids-comp-buttons-text-color-bg-surface-disabled);
1145
- color: var(--ids-comp-buttons-text-color-fg-label-surface-disabled);
1146
- border-color: var(--ids-comp-buttons-text-color-border-surface-disabled);
1276
+ color: var(--ids-comp-button-text-color-fg-label-surface-disabled);
1277
+ background: var(--ids-comp-button-text-color-bg-surface-disabled);
1278
+ border-color: var(--ids-comp-button-text-color-border-surface-default);
1147
1279
  }
1148
1280
  .ids-button.ids-button-text.ids-button-surface:disabled > .ids-icon {
1149
- color: var(--ids-comp-buttons-text-color-fg-icon-surface-disabled);
1281
+ color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
1150
1282
  }