@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/button/button.plugin.js CHANGED
@@ -2,7 +2,14 @@
2
2
  module.exports = function ButtonPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-button': { flexShrink: 0, width: 'fit-content', alignItems: 'center', display: 'inline-flex', justifyContent: 'center' },
5
+ '.ids-button': {
6
+ flexShrink: 0,
7
+ width: 'fit-content',
8
+ alignItems: 'center',
9
+ display: 'inline-flex',
10
+ justifyContent: 'center',
11
+ borderStyle: 'solid',
12
+ },
6
13
  '.ids-button:focus': {
7
14
  outlineOffset: '2px',
8
15
  outline: 'var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)',
@@ -16,85 +23,85 @@ module.exports = function ButtonPlugin() {
16
23
  justifyContent: 'center',
17
24
  },
18
25
  '.ids-button.ids-button-compact': {
19
- gap: 'var(--ids-comp-size-buttons-size-gap-compact)',
20
- height: 'var(--ids-comp-size-buttons-size-height-compact)',
21
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-compact)',
22
- padding: 'var(--ids-comp-size-buttons-size-padding-y-compact) var(--ids-comp-size-buttons-size-padding-x-compact)',
23
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-compact)',
24
- border: 'var(--ids-comp-size-buttons-size-border-width-compact) solid',
26
+ gap: 'var(--ids-comp-buttons-size-gap-compact)',
27
+ height: 'var(--ids-comp-buttons-size-height-compact)',
28
+ minWidth: 'var(--ids-comp-buttons-size-min-width-compact)',
29
+ padding: 'var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact)',
30
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-compact)',
31
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-compact)',
25
32
  },
26
33
  '.ids-button.ids-button-compact>.ids-button-label': {
27
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-compact)',
28
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-compact)',
29
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-compact)',
30
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-compact)',
31
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-compact)',
34
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-compact)',
35
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-compact)',
36
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-compact)',
37
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-compact)',
38
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-compact)',
32
39
  },
33
40
  '.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]': {
34
- width: 'var(--ids-comp-size-buttons-size-icon-compact)',
35
- height: 'var(--ids-comp-size-buttons-size-icon-compact)',
41
+ width: 'var(--ids-comp-buttons-size-icon-compact)',
42
+ height: 'var(--ids-comp-buttons-size-icon-compact)',
36
43
  },
37
44
  '.ids-button.ids-button-comfortable': {
38
- gap: 'var(--ids-comp-size-buttons-size-gap-comfortable)',
39
- height: 'var(--ids-comp-size-buttons-size-height-comfortable)',
40
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-comfortable)',
41
- padding: 'var(--ids-comp-size-buttons-size-padding-y-comfortable) var(--ids-comp-size-buttons-size-padding-x-comfortable)',
42
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-comfortable)',
43
- border: 'var(--ids-comp-size-buttons-size-border-width-comfortable) solid',
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)',
44
51
  },
45
52
  '.ids-button.ids-button-comfortable>.ids-button-label': {
46
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-comfortable)',
47
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-comfortable)',
48
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-comfortable)',
49
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-comfortable)',
50
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-comfortable)',
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
58
  },
52
59
  '.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]': {
53
- width: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
54
- height: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
60
+ width: 'var(--ids-comp-buttons-size-icon-comfortable)',
61
+ height: 'var(--ids-comp-buttons-size-icon-comfortable)',
55
62
  },
56
63
  '.ids-button.ids-button-spacious': {
57
- gap: 'var(--ids-comp-size-buttons-size-gap-spacious)',
58
- height: 'var(--ids-comp-size-buttons-size-height-spacious)',
59
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-spacious)',
60
- padding: 'var(--ids-comp-size-buttons-size-padding-y-spacious) var(--ids-comp-size-buttons-size-padding-x-spacious)',
61
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-spacious)',
62
- border: 'var(--ids-comp-size-buttons-size-border-width-spacious) solid',
64
+ gap: 'var(--ids-comp-buttons-size-gap-spacious)',
65
+ height: 'var(--ids-comp-buttons-size-height-spacious)',
66
+ minWidth: 'var(--ids-comp-buttons-size-min-width-spacious)',
67
+ padding: 'var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious)',
68
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-spacious)',
69
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-spacious)',
63
70
  },
64
71
  '.ids-button.ids-button-spacious>.ids-button-label': {
65
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-spacious)',
66
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-spacious)',
67
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-spacious)',
68
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-spacious)',
69
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-spacious)',
72
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-spacious)',
73
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-spacious)',
74
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-spacious)',
75
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-spacious)',
76
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-spacious)',
70
77
  },
71
78
  '.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]': {
72
- width: 'var(--ids-comp-size-buttons-size-icon-spacious)',
73
- height: 'var(--ids-comp-size-buttons-size-icon-spacious)',
79
+ width: 'var(--ids-comp-buttons-size-icon-spacious)',
80
+ height: 'var(--ids-comp-buttons-size-icon-spacious)',
74
81
  },
75
82
  '.ids-button.ids-button-dense': {
76
- gap: 'var(--ids-comp-size-buttons-size-gap-dense)',
77
- height: 'var(--ids-comp-size-buttons-size-height-dense)',
78
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-dense)',
79
- padding: 'var(--ids-comp-size-buttons-size-padding-y-dense) var(--ids-comp-size-buttons-size-padding-x-dense)',
80
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-dense)',
81
- border: 'var(--ids-comp-size-buttons-size-border-width-dense) solid',
83
+ gap: 'var(--ids-comp-buttons-size-gap-dense)',
84
+ height: 'var(--ids-comp-buttons-size-height-dense)',
85
+ minWidth: 'var(--ids-comp-buttons-size-min-width-dense)',
86
+ padding: 'var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense)',
87
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-dense)',
88
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-dense)',
82
89
  },
83
90
  '.ids-button.ids-button-dense>.ids-button-label': {
84
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-dense)',
85
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-dense)',
86
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-dense)',
87
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-dense)',
88
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-dense)',
91
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-dense)',
92
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-dense)',
93
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-dense)',
94
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-dense)',
95
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-dense)',
89
96
  },
90
97
  '.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]': {
91
- width: 'var(--ids-comp-size-buttons-size-icon-dense)',
92
- height: 'var(--ids-comp-size-buttons-size-icon-dense)',
98
+ width: 'var(--ids-comp-buttons-size-icon-dense)',
99
+ height: 'var(--ids-comp-buttons-size-icon-dense)',
93
100
  },
94
101
  '.ids-button.ids-button-filled.ids-button-primary': {
95
- color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-enabled)',
96
- background: 'var(--ids-comp-buttons-filled-color-bg-primary-enabled)',
97
- borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-enabled)',
102
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-default)',
103
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-default)',
104
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-default)',
98
105
  },
99
106
  '.ids-button.ids-button-filled.ids-button-primary:hover': {
100
107
  background: 'var(--ids-comp-buttons-filled-color-bg-primary-hovered)',
@@ -118,9 +125,9 @@ module.exports = function ButtonPlugin() {
118
125
  borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-disabled)',
119
126
  },
120
127
  '.ids-button.ids-button-filled.ids-button-secondary': {
121
- color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-enabled)',
122
- background: 'var(--ids-comp-buttons-filled-color-bg-secondary-enabled)',
123
- borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-enabled)',
128
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-default)',
129
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-default)',
130
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-default)',
124
131
  },
125
132
  '.ids-button.ids-button-filled.ids-button-secondary:hover': {
126
133
  background: 'var(--ids-comp-buttons-filled-color-bg-secondary-hovered)',
@@ -144,9 +151,9 @@ module.exports = function ButtonPlugin() {
144
151
  borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-disabled)',
145
152
  },
146
153
  '.ids-button.ids-button-filled.ids-button-brand': {
147
- color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-enabled)',
148
- background: 'var(--ids-comp-buttons-filled-color-bg-brand-enabled)',
149
- borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-enabled)',
154
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-default)',
155
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-default)',
156
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-default)',
150
157
  },
151
158
  '.ids-button.ids-button-filled.ids-button-brand:hover': {
152
159
  background: 'var(--ids-comp-buttons-filled-color-bg-brand-hovered)',
@@ -170,9 +177,9 @@ module.exports = function ButtonPlugin() {
170
177
  borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-disabled)',
171
178
  },
172
179
  '.ids-button.ids-button-filled.ids-button-error': {
173
- color: 'var(--ids-comp-buttons-filled-color-fg-label-error-enabled)',
174
- background: 'var(--ids-comp-buttons-filled-color-bg-error-enabled)',
175
- borderColor: 'var(--ids-comp-buttons-filled-color-border-error-enabled)',
180
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-default)',
181
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-default)',
182
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-default)',
176
183
  },
177
184
  '.ids-button.ids-button-filled.ids-button-error:hover': {
178
185
  background: 'var(--ids-comp-buttons-filled-color-bg-error-hovered)',
@@ -190,15 +197,10 @@ module.exports = function ButtonPlugin() {
190
197
  color: 'var(--ids-comp-buttons-filled-color-fg-label-error-pressed)',
191
198
  borderColor: 'var(--ids-comp-buttons-filled-color-border-error-pressed)',
192
199
  },
193
- '.ids-button.ids-button-filled.ids-button-error:disabled': {
194
- background: 'var(--ids-comp-buttons-filled-color-bg-error-disabled)',
195
- color: 'var(--ids-comp-buttons-filled-color-fg-label-error-disabled)',
196
- borderColor: 'var(--ids-comp-buttons-filled-color-border-error-disabled)',
197
- },
198
200
  '.ids-button.ids-button-filled.ids-button-success': {
199
- color: 'var(--ids-comp-buttons-filled-color-fg-label-success-enabled)',
200
- background: 'var(--ids-comp-buttons-filled-color-bg-success-enabled)',
201
- borderColor: 'var(--ids-comp-buttons-filled-color-border-success-enabled)',
201
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-default)',
202
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-default)',
203
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-default)',
202
204
  },
203
205
  '.ids-button.ids-button-filled.ids-button-success:hover': {
204
206
  background: 'var(--ids-comp-buttons-filled-color-bg-success-hovered)',
@@ -216,15 +218,10 @@ module.exports = function ButtonPlugin() {
216
218
  color: 'var(--ids-comp-buttons-filled-color-fg-label-success-pressed)',
217
219
  borderColor: 'var(--ids-comp-buttons-filled-color-border-success-pressed)',
218
220
  },
219
- '.ids-button.ids-button-filled.ids-button-success:disabled': {
220
- background: 'var(--ids-comp-buttons-filled-color-bg-success-disabled)',
221
- color: 'var(--ids-comp-buttons-filled-color-fg-label-success-disabled)',
222
- borderColor: 'var(--ids-comp-buttons-filled-color-border-success-disabled)',
223
- },
224
221
  '.ids-button.ids-button-filled.ids-button-warning': {
225
- color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-enabled)',
226
- background: 'var(--ids-comp-buttons-filled-color-bg-warning-enabled)',
227
- borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-enabled)',
222
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-default)',
223
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-default)',
224
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-default)',
228
225
  },
229
226
  '.ids-button.ids-button-filled.ids-button-warning:hover': {
230
227
  background: 'var(--ids-comp-buttons-filled-color-bg-warning-hovered)',
@@ -242,15 +239,10 @@ module.exports = function ButtonPlugin() {
242
239
  color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-pressed)',
243
240
  borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-pressed)',
244
241
  },
245
- '.ids-button.ids-button-filled.ids-button-warning:disabled': {
246
- background: 'var(--ids-comp-buttons-filled-color-bg-warning-disabled)',
247
- color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-disabled)',
248
- borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-disabled)',
249
- },
250
242
  '.ids-button.ids-button-filled.ids-button-light': {
251
- color: 'var(--ids-comp-buttons-filled-color-fg-label-light-enabled)',
252
- background: 'var(--ids-comp-buttons-filled-color-bg-light-enabled)',
253
- borderColor: 'var(--ids-comp-buttons-filled-color-border-light-enabled)',
243
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-default)',
244
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-default)',
245
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-default)',
254
246
  },
255
247
  '.ids-button.ids-button-filled.ids-button-light:hover': {
256
248
  background: 'var(--ids-comp-buttons-filled-color-bg-light-hovered)',
@@ -274,9 +266,9 @@ module.exports = function ButtonPlugin() {
274
266
  borderColor: 'var(--ids-comp-buttons-filled-color-border-light-disabled)',
275
267
  },
276
268
  '.ids-button.ids-button-filled.ids-button-dark': {
277
- color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-enabled)',
278
- background: 'var(--ids-comp-buttons-filled-color-bg-dark-enabled)',
279
- borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-enabled)',
269
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-default)',
270
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-default)',
271
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-default)',
280
272
  },
281
273
  '.ids-button.ids-button-filled.ids-button-dark:hover': {
282
274
  background: 'var(--ids-comp-buttons-filled-color-bg-dark-hovered)',
@@ -300,9 +292,9 @@ module.exports = function ButtonPlugin() {
300
292
  borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-disabled)',
301
293
  },
302
294
  '.ids-button.ids-button-filled.ids-button-surface': {
303
- color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-enabled)',
304
- background: 'var(--ids-comp-buttons-filled-color-bg-surface-enabled)',
305
- borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-enabled)',
295
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-default)',
296
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-default)',
297
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-default)',
306
298
  },
307
299
  '.ids-button.ids-button-filled.ids-button-surface:hover': {
308
300
  background: 'var(--ids-comp-buttons-filled-color-bg-surface-hovered)',
@@ -326,9 +318,9 @@ module.exports = function ButtonPlugin() {
326
318
  borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-disabled)',
327
319
  },
328
320
  '.ids-button.ids-button-outlined.ids-button-primary': {
329
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-enabled)',
330
- background: 'var(--ids-comp-buttons-outlined-color-bg-primary-enabled)',
331
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-enabled)',
321
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-default)',
322
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-default)',
323
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-default)',
332
324
  },
333
325
  '.ids-button.ids-button-outlined.ids-button-primary:hover': {
334
326
  background: 'var(--ids-comp-buttons-outlined-color-bg-primary-hovered)',
@@ -352,9 +344,9 @@ module.exports = function ButtonPlugin() {
352
344
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-disabled)',
353
345
  },
354
346
  '.ids-button.ids-button-outlined.ids-button-secondary': {
355
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-enabled)',
356
- background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-enabled)',
357
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-enabled)',
347
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-default)',
348
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-default)',
349
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-default)',
358
350
  },
359
351
  '.ids-button.ids-button-outlined.ids-button-secondary:hover': {
360
352
  background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-hovered)',
@@ -378,9 +370,9 @@ module.exports = function ButtonPlugin() {
378
370
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-disabled)',
379
371
  },
380
372
  '.ids-button.ids-button-outlined.ids-button-brand': {
381
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-enabled)',
382
- background: 'var(--ids-comp-buttons-outlined-color-bg-brand-enabled)',
383
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-enabled)',
373
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-default)',
374
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-default)',
375
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-default)',
384
376
  },
385
377
  '.ids-button.ids-button-outlined.ids-button-brand:hover': {
386
378
  background: 'var(--ids-comp-buttons-outlined-color-bg-brand-hovered)',
@@ -404,9 +396,9 @@ module.exports = function ButtonPlugin() {
404
396
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-disabled)',
405
397
  },
406
398
  '.ids-button.ids-button-outlined.ids-button-error': {
407
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-enabled)',
408
- background: 'var(--ids-comp-buttons-outlined-color-bg-error-enabled)',
409
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-enabled)',
399
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-default)',
400
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-default)',
401
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-default)',
410
402
  },
411
403
  '.ids-button.ids-button-outlined.ids-button-error:hover': {
412
404
  background: 'var(--ids-comp-buttons-outlined-color-bg-error-hovered)',
@@ -424,15 +416,10 @@ module.exports = function ButtonPlugin() {
424
416
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-pressed)',
425
417
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-pressed)',
426
418
  },
427
- '.ids-button.ids-button-outlined.ids-button-error:disabled': {
428
- background: 'var(--ids-comp-buttons-outlined-color-bg-error-disabled)',
429
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-disabled)',
430
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-disabled)',
431
- },
432
419
  '.ids-button.ids-button-outlined.ids-button-success': {
433
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-enabled)',
434
- background: 'var(--ids-comp-buttons-outlined-color-bg-success-enabled)',
435
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-enabled)',
420
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-default)',
421
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-default)',
422
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-default)',
436
423
  },
437
424
  '.ids-button.ids-button-outlined.ids-button-success:hover': {
438
425
  background: 'var(--ids-comp-buttons-outlined-color-bg-success-hovered)',
@@ -450,15 +437,10 @@ module.exports = function ButtonPlugin() {
450
437
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-pressed)',
451
438
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-pressed)',
452
439
  },
453
- '.ids-button.ids-button-outlined.ids-button-success:disabled': {
454
- background: 'var(--ids-comp-buttons-outlined-color-bg-success-disabled)',
455
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-disabled)',
456
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-disabled)',
457
- },
458
440
  '.ids-button.ids-button-outlined.ids-button-warning': {
459
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-enabled)',
460
- background: 'var(--ids-comp-buttons-outlined-color-bg-warning-enabled)',
461
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-enabled)',
441
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-default)',
442
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-default)',
443
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-default)',
462
444
  },
463
445
  '.ids-button.ids-button-outlined.ids-button-warning:hover': {
464
446
  background: 'var(--ids-comp-buttons-outlined-color-bg-warning-hovered)',
@@ -476,15 +458,10 @@ module.exports = function ButtonPlugin() {
476
458
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed)',
477
459
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-pressed)',
478
460
  },
479
- '.ids-button.ids-button-outlined.ids-button-warning:disabled': {
480
- background: 'var(--ids-comp-buttons-outlined-color-bg-warning-disabled)',
481
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-disabled)',
482
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-disabled)',
483
- },
484
461
  '.ids-button.ids-button-outlined.ids-button-light': {
485
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-enabled)',
486
- background: 'var(--ids-comp-buttons-outlined-color-bg-light-enabled)',
487
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-enabled)',
462
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-default)',
463
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-default)',
464
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-default)',
488
465
  },
489
466
  '.ids-button.ids-button-outlined.ids-button-light:hover': {
490
467
  background: 'var(--ids-comp-buttons-outlined-color-bg-light-hovered)',
@@ -508,9 +485,9 @@ module.exports = function ButtonPlugin() {
508
485
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-disabled)',
509
486
  },
510
487
  '.ids-button.ids-button-outlined.ids-button-dark': {
511
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-enabled)',
512
- background: 'var(--ids-comp-buttons-outlined-color-bg-dark-enabled)',
513
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-enabled)',
488
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-default)',
489
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-default)',
490
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-default)',
514
491
  },
515
492
  '.ids-button.ids-button-outlined.ids-button-dark:hover': {
516
493
  background: 'var(--ids-comp-buttons-outlined-color-bg-dark-hovered)',
@@ -534,9 +511,9 @@ module.exports = function ButtonPlugin() {
534
511
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-disabled)',
535
512
  },
536
513
  '.ids-button.ids-button-outlined.ids-button-surface': {
537
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-enabled)',
538
- background: 'var(--ids-comp-buttons-outlined-color-bg-surface-enabled)',
539
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-enabled)',
514
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-default)',
515
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-default)',
516
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-default)',
540
517
  },
541
518
  '.ids-button.ids-button-outlined.ids-button-surface:hover': {
542
519
  background: 'var(--ids-comp-buttons-outlined-color-bg-surface-hovered)',
@@ -560,9 +537,9 @@ module.exports = function ButtonPlugin() {
560
537
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-disabled)',
561
538
  },
562
539
  '.ids-button.ids-button-text.ids-button-primary': {
563
- color: 'var(--ids-comp-buttons-text-color-fg-label-primary-enabled)',
564
- background: 'var(--ids-comp-buttons-text-color-bg-primary-enabled)',
565
- borderColor: 'var(--ids-comp-buttons-text-color-border-primary-enabled)',
540
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-default)',
541
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-default)',
542
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-default)',
566
543
  },
567
544
  '.ids-button.ids-button-text.ids-button-primary:hover': {
568
545
  background: 'var(--ids-comp-buttons-text-color-bg-primary-hovered)',
@@ -586,9 +563,9 @@ module.exports = function ButtonPlugin() {
586
563
  borderColor: 'var(--ids-comp-buttons-text-color-border-primary-disabled)',
587
564
  },
588
565
  '.ids-button.ids-button-text.ids-button-secondary': {
589
- color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-enabled)',
590
- background: 'var(--ids-comp-buttons-text-color-bg-secondary-enabled)',
591
- borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-enabled)',
566
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-default)',
567
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-default)',
568
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-default)',
592
569
  },
593
570
  '.ids-button.ids-button-text.ids-button-secondary:hover': {
594
571
  background: 'var(--ids-comp-buttons-text-color-bg-secondary-hovered)',
@@ -612,9 +589,9 @@ module.exports = function ButtonPlugin() {
612
589
  borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-disabled)',
613
590
  },
614
591
  '.ids-button.ids-button-text.ids-button-brand': {
615
- color: 'var(--ids-comp-buttons-text-color-fg-label-brand-enabled)',
616
- background: 'var(--ids-comp-buttons-text-color-bg-brand-enabled)',
617
- borderColor: 'var(--ids-comp-buttons-text-color-border-brand-enabled)',
592
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-default)',
593
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-default)',
594
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-default)',
618
595
  },
619
596
  '.ids-button.ids-button-text.ids-button-brand:hover': {
620
597
  background: 'var(--ids-comp-buttons-text-color-bg-brand-hovered)',
@@ -638,9 +615,9 @@ module.exports = function ButtonPlugin() {
638
615
  borderColor: 'var(--ids-comp-buttons-text-color-border-brand-disabled)',
639
616
  },
640
617
  '.ids-button.ids-button-text.ids-button-error': {
641
- color: 'var(--ids-comp-buttons-text-color-fg-label-error-enabled)',
642
- background: 'var(--ids-comp-buttons-text-color-bg-error-enabled)',
643
- borderColor: 'var(--ids-comp-buttons-text-color-border-error-enabled)',
618
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-default)',
619
+ background: 'var(--ids-comp-buttons-text-color-bg-error-default)',
620
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-default)',
644
621
  },
645
622
  '.ids-button.ids-button-text.ids-button-error:hover': {
646
623
  background: 'var(--ids-comp-buttons-text-color-bg-error-hovered)',
@@ -658,15 +635,10 @@ module.exports = function ButtonPlugin() {
658
635
  color: 'var(--ids-comp-buttons-text-color-fg-label-error-pressed)',
659
636
  borderColor: 'var(--ids-comp-buttons-text-color-border-error-pressed)',
660
637
  },
661
- '.ids-button.ids-button-text.ids-button-error:disabled': {
662
- background: 'var(--ids-comp-buttons-text-color-bg-error-disabled)',
663
- color: 'var(--ids-comp-buttons-text-color-fg-label-error-disabled)',
664
- borderColor: 'var(--ids-comp-buttons-text-color-border-error-disabled)',
665
- },
666
638
  '.ids-button.ids-button-text.ids-button-success': {
667
- color: 'var(--ids-comp-buttons-text-color-fg-label-success-enabled)',
668
- background: 'var(--ids-comp-buttons-text-color-bg-success-enabled)',
669
- borderColor: 'var(--ids-comp-buttons-text-color-border-success-enabled)',
639
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-default)',
640
+ background: 'var(--ids-comp-buttons-text-color-bg-success-default)',
641
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-default)',
670
642
  },
671
643
  '.ids-button.ids-button-text.ids-button-success:hover': {
672
644
  background: 'var(--ids-comp-buttons-text-color-bg-success-hovered)',
@@ -684,15 +656,10 @@ module.exports = function ButtonPlugin() {
684
656
  color: 'var(--ids-comp-buttons-text-color-fg-label-success-pressed)',
685
657
  borderColor: 'var(--ids-comp-buttons-text-color-border-success-pressed)',
686
658
  },
687
- '.ids-button.ids-button-text.ids-button-success:disabled': {
688
- background: 'var(--ids-comp-buttons-text-color-bg-success-disabled)',
689
- color: 'var(--ids-comp-buttons-text-color-fg-label-success-disabled)',
690
- borderColor: 'var(--ids-comp-buttons-text-color-border-success-disabled)',
691
- },
692
659
  '.ids-button.ids-button-text.ids-button-warning': {
693
- color: 'var(--ids-comp-buttons-text-color-fg-label-warning-enabled)',
694
- background: 'var(--ids-comp-buttons-text-color-bg-warning-enabled)',
695
- borderColor: 'var(--ids-comp-buttons-text-color-border-warning-enabled)',
660
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-default)',
661
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-default)',
662
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-default)',
696
663
  },
697
664
  '.ids-button.ids-button-text.ids-button-warning:hover': {
698
665
  background: 'var(--ids-comp-buttons-text-color-bg-warning-hovered)',
@@ -710,15 +677,10 @@ module.exports = function ButtonPlugin() {
710
677
  color: 'var(--ids-comp-buttons-text-color-fg-label-warning-pressed)',
711
678
  borderColor: 'var(--ids-comp-buttons-text-color-border-warning-pressed)',
712
679
  },
713
- '.ids-button.ids-button-text.ids-button-warning:disabled': {
714
- background: 'var(--ids-comp-buttons-text-color-bg-warning-disabled)',
715
- color: 'var(--ids-comp-buttons-text-color-fg-label-warning-disabled)',
716
- borderColor: 'var(--ids-comp-buttons-text-color-border-warning-disabled)',
717
- },
718
680
  '.ids-button.ids-button-text.ids-button-light': {
719
- color: 'var(--ids-comp-buttons-text-color-fg-label-light-enabled)',
720
- background: 'var(--ids-comp-buttons-text-color-bg-light-enabled)',
721
- borderColor: 'var(--ids-comp-buttons-text-color-border-light-enabled)',
681
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-default)',
682
+ background: 'var(--ids-comp-buttons-text-color-bg-light-default)',
683
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-default)',
722
684
  },
723
685
  '.ids-button.ids-button-text.ids-button-light:hover': {
724
686
  background: 'var(--ids-comp-buttons-text-color-bg-light-hovered)',
@@ -742,9 +704,9 @@ module.exports = function ButtonPlugin() {
742
704
  borderColor: 'var(--ids-comp-buttons-text-color-border-light-disabled)',
743
705
  },
744
706
  '.ids-button.ids-button-text.ids-button-dark': {
745
- color: 'var(--ids-comp-buttons-text-color-fg-label-dark-enabled)',
746
- background: 'var(--ids-comp-buttons-text-color-bg-dark-enabled)',
747
- borderColor: 'var(--ids-comp-buttons-text-color-border-dark-enabled)',
707
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-default)',
708
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-default)',
709
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-default)',
748
710
  },
749
711
  '.ids-button.ids-button-text.ids-button-dark:hover': {
750
712
  background: 'var(--ids-comp-buttons-text-color-bg-dark-hovered)',
@@ -768,9 +730,9 @@ module.exports = function ButtonPlugin() {
768
730
  borderColor: 'var(--ids-comp-buttons-text-color-border-dark-disabled)',
769
731
  },
770
732
  '.ids-button.ids-button-text.ids-button-surface': {
771
- color: 'var(--ids-comp-buttons-text-color-fg-label-surface-enabled)',
772
- background: 'var(--ids-comp-buttons-text-color-bg-surface-enabled)',
773
- borderColor: 'var(--ids-comp-buttons-text-color-border-surface-enabled)',
733
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-default)',
734
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-default)',
735
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-default)',
774
736
  },
775
737
  '.ids-button.ids-button-text.ids-button-surface:hover': {
776
738
  background: 'var(--ids-comp-buttons-text-color-bg-surface-hovered)',