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

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