@i-cell/ids-styles 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/icon-button/icon-button.plugin.js CHANGED
@@ -2,7 +2,14 @@
2
2
  module.exports = function IconButtonPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-icon-button': { padding: '0px', display: 'flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
5
+ '.ids-icon-button': {
6
+ padding: '0px',
7
+ display: 'flex',
8
+ flexShrink: 0,
9
+ alignItems: 'center',
10
+ justifyContent: 'center',
11
+ borderStyle: 'solid',
12
+ },
6
13
  '.ids-icon-button:focus': {
7
14
  outlineOffset: '2px',
8
15
  outline:
@@ -11,53 +18,53 @@ module.exports = function IconButtonPlugin() {
11
18
  '.ids-icon-button:focus.ids-icon-button-light': { outlineColor: 'var(--ids-comp-icon-button-focused-outline-color-light-focused)' },
12
19
  '.ids-icon-button:active': { outline: 'none' },
13
20
  '.ids-icon-button.ids-icon-button-compact': {
14
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-compact) var(--ids-comp-size-icon-button-size-padding-x-compact)',
15
- width: 'var(--ids-comp-size-icon-button-size-width-compact)',
16
- height: 'var(--ids-comp-size-icon-button-size-height-compact)',
17
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-compact)',
18
- border: 'var(--ids-comp-size-icon-button-size-border-compact) solid',
21
+ padding: 'var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact)',
22
+ width: 'var(--ids-comp-icon-button-size-width-compact)',
23
+ height: 'var(--ids-comp-icon-button-size-height-compact)',
24
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-compact)',
25
+ borderWidth: 'var(--ids-comp-icon-button-size-border-compact)',
19
26
  },
20
27
  '.ids-icon-button.ids-icon-button-compact *[icon]': {
21
- width: 'var(--ids-comp-size-icon-button-size-icon-compact)',
22
- height: 'var(--ids-comp-size-icon-button-size-icon-compact)',
28
+ width: 'var(--ids-comp-icon-button-size-icon-compact)',
29
+ height: 'var(--ids-comp-icon-button-size-icon-compact)',
23
30
  },
24
31
  '.ids-icon-button.ids-icon-button-comfortable': {
25
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-comfortable) var(--ids-comp-size-icon-button-size-padding-x-comfortable)',
26
- width: 'var(--ids-comp-size-icon-button-size-width-comfortable)',
27
- height: 'var(--ids-comp-size-icon-button-size-height-comfortable)',
28
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-comfortable)',
29
- border: 'var(--ids-comp-size-icon-button-size-border-comfortable) solid',
32
+ padding: 'var(--ids-comp-icon-button-size-padding-y-comfortable) var(--ids-comp-icon-button-size-padding-x-comfortable)',
33
+ width: 'var(--ids-comp-icon-button-size-width-comfortable)',
34
+ height: 'var(--ids-comp-icon-button-size-height-comfortable)',
35
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-comfortable)',
36
+ borderWidth: 'var(--ids-comp-icon-button-size-border-comfortable)',
30
37
  },
31
38
  '.ids-icon-button.ids-icon-button-comfortable *[icon]': {
32
- width: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
33
- height: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
39
+ width: 'var(--ids-comp-icon-button-size-icon-comfortable)',
40
+ height: 'var(--ids-comp-icon-button-size-icon-comfortable)',
34
41
  },
35
42
  '.ids-icon-button.ids-icon-button-spacious': {
36
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-spacious) var(--ids-comp-size-icon-button-size-padding-x-spacious)',
37
- width: 'var(--ids-comp-size-icon-button-size-width-spacious)',
38
- height: 'var(--ids-comp-size-icon-button-size-height-spacious)',
39
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-spacious)',
40
- border: 'var(--ids-comp-size-icon-button-size-border-spacious) solid',
43
+ padding: 'var(--ids-comp-icon-button-size-padding-y-spacious) var(--ids-comp-icon-button-size-padding-x-spacious)',
44
+ width: 'var(--ids-comp-icon-button-size-width-spacious)',
45
+ height: 'var(--ids-comp-icon-button-size-height-spacious)',
46
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-spacious)',
47
+ borderWidth: 'var(--ids-comp-icon-button-size-border-spacious)',
41
48
  },
42
49
  '.ids-icon-button.ids-icon-button-spacious *[icon]': {
43
- width: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
44
- height: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
50
+ width: 'var(--ids-comp-icon-button-size-icon-spacious)',
51
+ height: 'var(--ids-comp-icon-button-size-icon-spacious)',
45
52
  },
46
53
  '.ids-icon-button.ids-icon-button-dense': {
47
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-dense) var(--ids-comp-size-icon-button-size-padding-x-dense)',
48
- width: 'var(--ids-comp-size-icon-button-size-width-dense)',
49
- height: 'var(--ids-comp-size-icon-button-size-height-dense)',
50
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-dense)',
51
- border: 'var(--ids-comp-size-icon-button-size-border-dense) solid',
54
+ padding: 'var(--ids-comp-icon-button-size-padding-y-dense) var(--ids-comp-icon-button-size-padding-x-dense)',
55
+ width: 'var(--ids-comp-icon-button-size-width-dense)',
56
+ height: 'var(--ids-comp-icon-button-size-height-dense)',
57
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-dense)',
58
+ borderWidth: 'var(--ids-comp-icon-button-size-border-dense)',
52
59
  },
53
60
  '.ids-icon-button.ids-icon-button-dense *[icon]': {
54
- width: 'var(--ids-comp-size-icon-button-size-icon-dense)',
55
- height: 'var(--ids-comp-size-icon-button-size-icon-dense)',
61
+ width: 'var(--ids-comp-icon-button-size-icon-dense)',
62
+ height: 'var(--ids-comp-icon-button-size-icon-dense)',
56
63
  },
57
64
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary': {
58
- color: 'var(--ids-comp-icon-button-filled-color-fg-primary-enabled)',
59
- background: 'var(--ids-comp-icon-button-filled-color-bg-primary-enabled)',
60
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-enabled)',
65
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-default)',
66
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-default)',
67
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-default)',
61
68
  },
62
69
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover': {
63
70
  background: 'var(--ids-comp-icon-button-filled-color-bg-primary-hovered)',
@@ -79,9 +86,9 @@ module.exports = function IconButtonPlugin() {
79
86
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-disabled)',
80
87
  },
81
88
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary': {
82
- color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-enabled)',
83
- background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-enabled)',
84
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-enabled)',
89
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-default)',
90
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-default)',
91
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-default)',
85
92
  },
86
93
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover': {
87
94
  background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-hovered)',
@@ -103,9 +110,9 @@ module.exports = function IconButtonPlugin() {
103
110
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-disabled)',
104
111
  },
105
112
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand': {
106
- color: 'var(--ids-comp-icon-button-filled-color-fg-brand-enabled)',
107
- background: 'var(--ids-comp-icon-button-filled-color-bg-brand-enabled)',
108
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-enabled)',
113
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-default)',
114
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-default)',
115
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-default)',
109
116
  },
110
117
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover': {
111
118
  background: 'var(--ids-comp-icon-button-filled-color-bg-brand-hovered)',
@@ -127,9 +134,9 @@ module.exports = function IconButtonPlugin() {
127
134
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-disabled)',
128
135
  },
129
136
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error': {
130
- color: 'var(--ids-comp-icon-button-filled-color-fg-error-enabled)',
131
- background: 'var(--ids-comp-icon-button-filled-color-bg-error-enabled)',
132
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-enabled)',
137
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-default)',
138
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-default)',
139
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-default)',
133
140
  },
134
141
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover': {
135
142
  background: 'var(--ids-comp-icon-button-filled-color-bg-error-hovered)',
@@ -146,14 +153,12 @@ module.exports = function IconButtonPlugin() {
146
153
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-pressed)',
147
154
  },
148
155
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled': {
149
- background: 'var(--ids-comp-icon-button-filled-color-bg-error-disabled)',
150
- color: 'var(--ids-comp-icon-button-filled-color-fg-error-disabled)',
151
156
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-disabled)',
152
157
  },
153
158
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success': {
154
- color: 'var(--ids-comp-icon-button-filled-color-fg-success-enabled)',
155
- background: 'var(--ids-comp-icon-button-filled-color-bg-success-enabled)',
156
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-enabled)',
159
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-default)',
160
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-default)',
161
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-default)',
157
162
  },
158
163
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover': {
159
164
  background: 'var(--ids-comp-icon-button-filled-color-bg-success-hovered)',
@@ -170,14 +175,12 @@ module.exports = function IconButtonPlugin() {
170
175
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-pressed)',
171
176
  },
172
177
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled': {
173
- background: 'var(--ids-comp-icon-button-filled-color-bg-success-disabled)',
174
- color: 'var(--ids-comp-icon-button-filled-color-fg-success-disabled)',
175
178
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-disabled)',
176
179
  },
177
180
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning': {
178
- color: 'var(--ids-comp-icon-button-filled-color-fg-warning-enabled)',
179
- background: 'var(--ids-comp-icon-button-filled-color-bg-warning-enabled)',
180
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-enabled)',
181
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-default)',
182
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-default)',
183
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-default)',
181
184
  },
182
185
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover': {
183
186
  background: 'var(--ids-comp-icon-button-filled-color-bg-warning-hovered)',
@@ -194,14 +197,12 @@ module.exports = function IconButtonPlugin() {
194
197
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-pressed)',
195
198
  },
196
199
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled': {
197
- background: 'var(--ids-comp-icon-button-filled-color-bg-warning-disabled)',
198
- color: 'var(--ids-comp-icon-button-filled-color-fg-warning-disabled)',
199
200
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-disabled)',
200
201
  },
201
202
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light': {
202
- color: 'var(--ids-comp-icon-button-filled-color-fg-light-enabled)',
203
- background: 'var(--ids-comp-icon-button-filled-color-bg-light-enabled)',
204
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-enabled)',
203
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-default)',
204
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-default)',
205
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-default)',
205
206
  },
206
207
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover': {
207
208
  background: 'var(--ids-comp-icon-button-filled-color-bg-light-hovered)',
@@ -223,9 +224,9 @@ module.exports = function IconButtonPlugin() {
223
224
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-disabled)',
224
225
  },
225
226
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark': {
226
- color: 'var(--ids-comp-icon-button-filled-color-fg-dark-enabled)',
227
- background: 'var(--ids-comp-icon-button-filled-color-bg-dark-enabled)',
228
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-enabled)',
227
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-default)',
228
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-default)',
229
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-default)',
229
230
  },
230
231
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover': {
231
232
  background: 'var(--ids-comp-icon-button-filled-color-bg-dark-hovered)',
@@ -247,9 +248,9 @@ module.exports = function IconButtonPlugin() {
247
248
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-disabled)',
248
249
  },
249
250
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface': {
250
- color: 'var(--ids-comp-icon-button-filled-color-fg-surface-enabled)',
251
- background: 'var(--ids-comp-icon-button-filled-color-bg-surface-enabled)',
252
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-enabled)',
251
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-default)',
252
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-default)',
253
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-default)',
253
254
  },
254
255
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover': {
255
256
  background: 'var(--ids-comp-icon-button-filled-color-bg-surface-hovered)',
@@ -271,9 +272,9 @@ module.exports = function IconButtonPlugin() {
271
272
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-disabled)',
272
273
  },
273
274
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary': {
274
- color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-enabled)',
275
- background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-enabled)',
276
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-enabled)',
275
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-default)',
276
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-default)',
277
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-default)',
277
278
  },
278
279
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover': {
279
280
  background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-hovered)',
@@ -295,9 +296,9 @@ module.exports = function IconButtonPlugin() {
295
296
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-disabled)',
296
297
  },
297
298
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary': {
298
- color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-enabled)',
299
- background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-enabled)',
300
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-enabled)',
299
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-default)',
300
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-default)',
301
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-default)',
301
302
  },
302
303
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover': {
303
304
  background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered)',
@@ -319,9 +320,9 @@ module.exports = function IconButtonPlugin() {
319
320
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-disabled)',
320
321
  },
321
322
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand': {
322
- color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-enabled)',
323
- background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-enabled)',
324
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-enabled)',
323
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-default)',
324
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-default)',
325
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-default)',
325
326
  },
326
327
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover': {
327
328
  background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-hovered)',
@@ -343,9 +344,9 @@ module.exports = function IconButtonPlugin() {
343
344
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-disabled)',
344
345
  },
345
346
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error': {
346
- color: 'var(--ids-comp-icon-button-outlined-color-fg-error-enabled)',
347
- background: 'var(--ids-comp-icon-button-outlined-color-bg-error-enabled)',
348
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-enabled)',
347
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-default)',
348
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-default)',
349
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-default)',
349
350
  },
350
351
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover': {
351
352
  background: 'var(--ids-comp-icon-button-outlined-color-bg-error-hovered)',
@@ -362,14 +363,12 @@ module.exports = function IconButtonPlugin() {
362
363
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-pressed)',
363
364
  },
364
365
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled': {
365
- background: 'var(--ids-comp-icon-button-outlined-color-bg-error-disabled)',
366
- color: 'var(--ids-comp-icon-button-outlined-color-fg-error-disabled)',
367
366
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-disabled)',
368
367
  },
369
368
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success': {
370
- color: 'var(--ids-comp-icon-button-outlined-color-fg-success-enabled)',
371
- background: 'var(--ids-comp-icon-button-outlined-color-bg-success-enabled)',
372
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-enabled)',
369
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-default)',
370
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-default)',
371
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-default)',
373
372
  },
374
373
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover': {
375
374
  background: 'var(--ids-comp-icon-button-outlined-color-bg-success-hovered)',
@@ -386,14 +385,12 @@ module.exports = function IconButtonPlugin() {
386
385
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-pressed)',
387
386
  },
388
387
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled': {
389
- background: 'var(--ids-comp-icon-button-outlined-color-bg-success-disabled)',
390
- color: 'var(--ids-comp-icon-button-outlined-color-fg-success-disabled)',
391
388
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-disabled)',
392
389
  },
393
390
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning': {
394
- color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-enabled)',
395
- background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-enabled)',
396
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-enabled)',
391
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-default)',
392
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-default)',
393
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-default)',
397
394
  },
398
395
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover': {
399
396
  background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-hovered)',
@@ -410,14 +407,12 @@ module.exports = function IconButtonPlugin() {
410
407
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-pressed)',
411
408
  },
412
409
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled': {
413
- background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-disabled)',
414
- color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-disabled)',
415
410
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-disabled)',
416
411
  },
417
412
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light': {
418
- color: 'var(--ids-comp-icon-button-outlined-color-fg-light-enabled)',
419
- background: 'var(--ids-comp-icon-button-outlined-color-bg-light-enabled)',
420
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-enabled)',
413
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-default)',
414
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-default)',
415
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-default)',
421
416
  },
422
417
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover': {
423
418
  background: 'var(--ids-comp-icon-button-outlined-color-bg-light-hovered)',
@@ -439,9 +434,9 @@ module.exports = function IconButtonPlugin() {
439
434
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-disabled)',
440
435
  },
441
436
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark': {
442
- color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-enabled)',
443
- background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-enabled)',
444
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-enabled)',
437
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-default)',
438
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-default)',
439
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-default)',
445
440
  },
446
441
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover': {
447
442
  background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-hovered)',
@@ -463,9 +458,9 @@ module.exports = function IconButtonPlugin() {
463
458
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-disabled)',
464
459
  },
465
460
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface': {
466
- color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-enabled)',
467
- background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-enabled)',
468
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-enabled)',
461
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-default)',
462
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-default)',
463
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-default)',
469
464
  },
470
465
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover': {
471
466
  background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-hovered)',
@@ -488,8 +483,8 @@ module.exports = function IconButtonPlugin() {
488
483
  },
489
484
  '.ids-icon-button.ids-icon-button-standard': { border: 'none' },
490
485
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary': {
491
- color: 'var(--ids-comp-icon-button-standard-color-fg-primary-enabled)',
492
- background: 'var(--ids-comp-icon-button-standard-color-bg-primary-enabled)',
486
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-default)',
487
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-default)',
493
488
  },
494
489
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover': {
495
490
  background: 'var(--ids-comp-icon-button-standard-color-bg-primary-hovered)',
@@ -508,8 +503,8 @@ module.exports = function IconButtonPlugin() {
508
503
  color: 'var(--ids-comp-icon-button-standard-color-fg-primary-disabled)',
509
504
  },
510
505
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary': {
511
- color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-enabled)',
512
- background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-enabled)',
506
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-default)',
507
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-default)',
513
508
  },
514
509
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover': {
515
510
  background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-hovered)',
@@ -528,8 +523,8 @@ module.exports = function IconButtonPlugin() {
528
523
  color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-disabled)',
529
524
  },
530
525
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand': {
531
- color: 'var(--ids-comp-icon-button-standard-color-fg-brand-enabled)',
532
- background: 'var(--ids-comp-icon-button-standard-color-bg-brand-enabled)',
526
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-default)',
527
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-default)',
533
528
  },
534
529
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover': {
535
530
  background: 'var(--ids-comp-icon-button-standard-color-bg-brand-hovered)',
@@ -548,8 +543,8 @@ module.exports = function IconButtonPlugin() {
548
543
  color: 'var(--ids-comp-icon-button-standard-color-fg-brand-disabled)',
549
544
  },
550
545
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error': {
551
- color: 'var(--ids-comp-icon-button-standard-color-fg-error-enabled)',
552
- background: 'var(--ids-comp-icon-button-standard-color-bg-error-enabled)',
546
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-default)',
547
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-default)',
553
548
  },
554
549
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover': {
555
550
  background: 'var(--ids-comp-icon-button-standard-color-bg-error-hovered)',
@@ -563,13 +558,9 @@ module.exports = function IconButtonPlugin() {
563
558
  background: 'var(--ids-comp-icon-button-standard-color-bg-error-pressed)',
564
559
  color: 'var(--ids-comp-icon-button-standard-color-fg-error-pressed)',
565
560
  },
566
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:disabled': {
567
- background: 'var(--ids-comp-icon-button-standard-color-bg-error-disabled)',
568
- color: 'var(--ids-comp-icon-button-standard-color-fg-error-disabled)',
569
- },
570
561
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success': {
571
- color: 'var(--ids-comp-icon-button-standard-color-fg-success-enabled)',
572
- background: 'var(--ids-comp-icon-button-standard-color-bg-success-enabled)',
562
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-default)',
563
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-default)',
573
564
  },
574
565
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover': {
575
566
  background: 'var(--ids-comp-icon-button-standard-color-bg-success-hovered)',
@@ -583,13 +574,9 @@ module.exports = function IconButtonPlugin() {
583
574
  background: 'var(--ids-comp-icon-button-standard-color-bg-success-pressed)',
584
575
  color: 'var(--ids-comp-icon-button-standard-color-fg-success-pressed)',
585
576
  },
586
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:disabled': {
587
- background: 'var(--ids-comp-icon-button-standard-color-bg-success-disabled)',
588
- color: 'var(--ids-comp-icon-button-standard-color-fg-success-disabled)',
589
- },
590
577
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning': {
591
- color: 'var(--ids-comp-icon-button-standard-color-fg-warning-enabled)',
592
- background: 'var(--ids-comp-icon-button-standard-color-bg-warning-enabled)',
578
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-default)',
579
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-default)',
593
580
  },
594
581
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover': {
595
582
  background: 'var(--ids-comp-icon-button-standard-color-bg-warning-hovered)',
@@ -603,13 +590,9 @@ module.exports = function IconButtonPlugin() {
603
590
  background: 'var(--ids-comp-icon-button-standard-color-bg-warning-pressed)',
604
591
  color: 'var(--ids-comp-icon-button-standard-color-fg-warning-pressed)',
605
592
  },
606
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:disabled': {
607
- background: 'var(--ids-comp-icon-button-standard-color-bg-warning-disabled)',
608
- color: 'var(--ids-comp-icon-button-standard-color-fg-warning-disabled)',
609
- },
610
593
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light': {
611
- color: 'var(--ids-comp-icon-button-standard-color-fg-light-enabled)',
612
- background: 'var(--ids-comp-icon-button-standard-color-bg-light-enabled)',
594
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-default)',
595
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-default)',
613
596
  },
614
597
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover': {
615
598
  background: 'var(--ids-comp-icon-button-standard-color-bg-light-hovered)',
@@ -628,8 +611,8 @@ module.exports = function IconButtonPlugin() {
628
611
  color: 'var(--ids-comp-icon-button-standard-color-fg-light-disabled)',
629
612
  },
630
613
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark': {
631
- color: 'var(--ids-comp-icon-button-standard-color-fg-dark-enabled)',
632
- background: 'var(--ids-comp-icon-button-standard-color-bg-dark-enabled)',
614
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-default)',
615
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-default)',
633
616
  },
634
617
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover': {
635
618
  background: 'var(--ids-comp-icon-button-standard-color-bg-dark-hovered)',
@@ -648,8 +631,8 @@ module.exports = function IconButtonPlugin() {
648
631
  color: 'var(--ids-comp-icon-button-standard-color-fg-dark-disabled)',
649
632
  },
650
633
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface': {
651
- color: 'var(--ids-comp-icon-button-standard-color-fg-surface-enabled)',
652
- background: 'var(--ids-comp-icon-button-standard-color-bg-surface-enabled)',
634
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-default)',
635
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-default)',
653
636
  },
654
637
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover': {
655
638
  background: 'var(--ids-comp-icon-button-standard-color-bg-surface-hovered)',