@rovula/ui 0.1.5 → 0.1.7

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 (97) hide show
  1. package/dist/cjs/bundle.css +404 -368
  2. package/dist/cjs/bundle.js +171 -171
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Text/Text.d.ts +25 -1
  5. package/dist/cjs/types/components/Text/Text.stories.d.ts +1 -1
  6. package/dist/cjs/types/utils/colors.d.ts +268 -268
  7. package/dist/components/Avatar/Avatar.styles.js +2 -2
  8. package/dist/components/Button/Buttons.stories.js +1 -1
  9. package/dist/components/Calendar/Calendar.js +1 -1
  10. package/dist/components/Dropdown/Dropdown.js +2 -2
  11. package/dist/components/DropdownMenu/DropdownMenu.js +4 -4
  12. package/dist/components/Footer/Footer.js +1 -1
  13. package/dist/components/Input/Input.styles.js +2 -2
  14. package/dist/components/InputFilter/InputFilter.js +2 -2
  15. package/dist/components/Label/Label.styles.js +4 -4
  16. package/dist/components/Menu/Menu.js +2 -2
  17. package/dist/components/Navbar/Navbar.js +1 -1
  18. package/dist/components/Switch/Switch.styles.js +1 -1
  19. package/dist/components/Tabs/Tabs.js +1 -1
  20. package/dist/components/Text/Text.js +11 -1
  21. package/dist/components/Text/Text.stories.js +6 -6
  22. package/dist/components/TextArea/TextArea.styles.js +6 -6
  23. package/dist/components/TextInput/TextInput.stories.js +1 -1
  24. package/dist/components/TextInput/TextInput.styles.js +18 -18
  25. package/dist/components/Toast/Toast.js +2 -2
  26. package/dist/esm/bundle.css +404 -368
  27. package/dist/esm/bundle.js +5 -5
  28. package/dist/esm/bundle.js.map +1 -1
  29. package/dist/esm/types/components/Text/Text.d.ts +25 -1
  30. package/dist/esm/types/components/Text/Text.stories.d.ts +1 -1
  31. package/dist/esm/types/utils/colors.d.ts +268 -268
  32. package/dist/index.d.ts +293 -269
  33. package/dist/src/theme/global.css +2514 -2607
  34. package/dist/utils/colors.js +268 -268
  35. package/package.json +1 -1
  36. package/src/components/Avatar/Avatar.styles.ts +2 -2
  37. package/src/components/Button/Buttons.stories.tsx +17 -9
  38. package/src/components/Calendar/Calendar.tsx +1 -1
  39. package/src/components/Dropdown/Dropdown.tsx +2 -2
  40. package/src/components/DropdownMenu/DropdownMenu.tsx +6 -6
  41. package/src/components/Footer/Footer.tsx +1 -1
  42. package/src/components/Input/Input.styles.tsx +2 -2
  43. package/src/components/InputFilter/InputFilter.tsx +2 -2
  44. package/src/components/Label/Label.styles.ts +4 -4
  45. package/src/components/Menu/Menu.tsx +2 -2
  46. package/src/components/Navbar/Navbar.tsx +1 -1
  47. package/src/components/Switch/Switch.styles.ts +1 -1
  48. package/src/components/Tabs/Tabs.tsx +1 -1
  49. package/src/components/Text/Text.stories.tsx +6 -6
  50. package/src/components/Text/Text.tsx +36 -1
  51. package/src/components/TextArea/TextArea.styles.ts +6 -6
  52. package/src/components/TextInput/TextInput.stories.tsx +3 -1
  53. package/src/components/TextInput/TextInput.styles.ts +18 -18
  54. package/src/components/Toast/Toast.tsx +2 -2
  55. package/src/theme/THEME_MAPPING.md +41 -42
  56. package/src/theme/global.css +8 -4
  57. package/src/theme/main-preset.js +49 -0
  58. package/src/theme/plugins/utilities/typography.js +40 -6
  59. package/src/theme/presets/colors.js +27 -29
  60. package/src/theme/themes/skyller/baseline.css +0 -4
  61. package/src/theme/themes/variable-mapping.css +1064 -0
  62. package/src/theme/themes/variable.css +317 -284
  63. package/src/theme/themes/xspector/baseline.css +0 -4
  64. package/src/theme/themes/xspector/components/dropdown-menu.css +4 -4
  65. package/src/theme/tokens/baseline.css +0 -3
  66. package/src/theme/tokens/color.css +34 -63
  67. package/src/theme/tokens/components/action-button.css +6 -6
  68. package/src/theme/tokens/components/button.css +189 -189
  69. package/src/theme/tokens/components/dropdown-menu.css +2 -2
  70. package/src/theme/tokens/components/footer.css +1 -1
  71. package/src/theme/tokens/components/switch.css +10 -10
  72. package/src/theme/tokens/typography.css +28 -28
  73. package/src/theme/tokens_old/baseline.css +13 -0
  74. package/src/theme/tokens_old/color.css +78 -0
  75. package/src/theme/tokens_old/components/action-button.css +127 -0
  76. package/src/theme/tokens_old/components/button.css +512 -0
  77. package/src/theme/tokens_old/components/dropdown-menu.css +27 -0
  78. package/src/theme/tokens_old/components/footer.css +9 -0
  79. package/src/theme/tokens_old/components/loading.css +11 -0
  80. package/src/theme/tokens_old/components/navbar.css +9 -0
  81. package/src/theme/tokens_old/components/progress-bar.css +8 -0
  82. package/src/theme/tokens_old/components/switch.css +29 -0
  83. package/src/theme/tokens_old/typography.css +199 -0
  84. package/src/theme/tokens_old/variables.css +28 -0
  85. package/src/theme/utils.js +16 -16
  86. package/src/utils/colors.ts +276 -279
  87. package/src/theme/themes/skyller/color.css +0 -79
  88. package/src/theme/themes/skyller/palette.css +0 -143
  89. package/src/theme/themes/skyller/state.css +0 -94
  90. package/src/theme/themes/skyller/transparent.css +0 -94
  91. package/src/theme/themes/xspector/color.css +0 -83
  92. package/src/theme/themes/xspector/palette.css +0 -142
  93. package/src/theme/themes/xspector/state.css +0 -94
  94. package/src/theme/themes/xspector/transparent.css +0 -93
  95. /package/src/theme/{tokens → tokens_old}/palette.css +0 -0
  96. /package/src/theme/{tokens → tokens_old}/state.css +0 -0
  97. /package/src/theme/{tokens → tokens_old}/transparent.css +0 -0
package/src/theme/tokens/components/button.css CHANGED
@@ -11,24 +11,24 @@
11
11
  /* ------------------------------------------------------------------ */
12
12
 
13
13
  /* Default State */
14
- --button-primary-solid-default-bg: var(--state-color-primary-default);
15
- --button-primary-solid-default-border: var(--state-color-primary-default);
16
- --button-primary-solid-default-text: var(--state-color-primary-text-solid);
14
+ --button-primary-solid-default-bg: var(--state-primary-default);
15
+ --button-primary-solid-default-border: var(--state-primary-default);
16
+ --button-primary-solid-default-text: var(--state-primary-text-solid);
17
17
 
18
18
  /* Hover State */
19
- --button-primary-solid-hover-bg: var(--state-color-primary-hover);
20
- --button-primary-solid-hover-border: var(--state-color-primary-hover);
21
- --button-primary-solid-hover-text: var(--state-color-primary-text-solid);
19
+ --button-primary-solid-hover-bg: var(--state-primary-hover);
20
+ --button-primary-solid-hover-border: var(--state-primary-hover);
21
+ --button-primary-solid-hover-text: var(--state-primary-text-solid);
22
22
 
23
23
  /* Active State */
24
- --button-primary-solid-active-bg: var(--state-color-primary-pressed);
25
- --button-primary-solid-active-border: var(--state-color-primary-pressed);
26
- --button-primary-solid-active-text: var(--state-color-primary-text-solid);
24
+ --button-primary-solid-active-bg: var(--state-primary-pressed);
25
+ --button-primary-solid-active-border: var(--state-primary-pressed);
26
+ --button-primary-solid-active-text: var(--state-primary-text-solid);
27
27
 
28
28
  /* Disabled State */
29
- --button-primary-solid-disabled-bg: var(--state-color-disable-solid);
30
- --button-primary-solid-disabled-border: var(--state-color-disable-solid);
31
- --button-primary-solid-disabled-text: var(--state-color-disable-outline);
29
+ --button-primary-solid-disabled-bg: var(--state-disable-solid);
30
+ --button-primary-solid-disabled-border: var(--state-disable-solid);
31
+ --button-primary-solid-disabled-text: var(--state-disable-outline);
32
32
 
33
33
  /* ------------------------------------------------------------------ */
34
34
  /* Outline Mode Tokens - Primary Theme */
@@ -36,23 +36,23 @@
36
36
 
37
37
  /* Default State */
38
38
  --button-primary-outline-default-bg: transparent;
39
- --button-primary-outline-default-border: var(--state-color-primary-stroke);
40
- --button-primary-outline-default-text: var(--state-color-primary-text-outline);
39
+ --button-primary-outline-default-border: var(--state-primary-stroke);
40
+ --button-primary-outline-default-text: var(--state-primary-text-outline);
41
41
 
42
42
  /* Hover State */
43
- --button-primary-outline-hover-bg: var(--state-color-primary-hover-bg);
44
- --button-primary-outline-hover-border: var(--state-color-primary-hover);
45
- --button-primary-outline-hover-text: var(--state-color-primary-text-hover);
43
+ --button-primary-outline-hover-bg: var(--state-primary-hover-bg);
44
+ --button-primary-outline-hover-border: var(--state-primary-hover);
45
+ --button-primary-outline-hover-text: var(--state-primary-text-hover);
46
46
 
47
47
  /* Active State */
48
- --button-primary-outline-active-bg: var(--state-color-primary-hover-bg);
49
- --button-primary-outline-active-border: var(--state-color-primary-pressed);
50
- --button-primary-outline-active-text: var(--state-color-primary-text-pressed);
48
+ --button-primary-outline-active-bg: var(--state-primary-hover-bg);
49
+ --button-primary-outline-active-border: var(--state-primary-pressed);
50
+ --button-primary-outline-active-text: var(--state-primary-text-pressed);
51
51
 
52
52
  /* Disabled State */
53
53
  --button-primary-outline-disabled-bg: transparent;
54
- --button-primary-outline-disabled-border: var(--state-color-disable-outline);
55
- --button-primary-outline-disabled-text: var(--state-color-disable-outline);
54
+ --button-primary-outline-disabled-border: var(--state-disable-outline);
55
+ --button-primary-outline-disabled-text: var(--state-disable-outline);
56
56
 
57
57
  /* ------------------------------------------------------------------ */
58
58
  /* Flat Mode Tokens - Primary Theme */
@@ -61,46 +61,46 @@
61
61
  /* Default State */
62
62
  --button-primary-flat-default-bg: transparent;
63
63
  --button-primary-flat-default-border: transparent;
64
- --button-primary-flat-default-text: var(--state-color-primary-text-outline);
64
+ --button-primary-flat-default-text: var(--state-primary-text-outline);
65
65
 
66
66
  /* Hover State */
67
- --button-primary-flat-hover-bg: var(--state-color-primary-hover-bg);
67
+ --button-primary-flat-hover-bg: var(--state-primary-hover-bg);
68
68
  --button-primary-flat-hover-border: transparent;
69
- --button-primary-flat-hover-text: var(--state-color-primary-text-hover);
69
+ --button-primary-flat-hover-text: var(--state-primary-text-hover);
70
70
 
71
71
  /* Active State */
72
72
  --button-primary-flat-active-bg: transparent;
73
73
  --button-primary-flat-active-border: transparent;
74
- --button-primary-flat-active-text: var(--state-color-primary-text-pressed);
74
+ --button-primary-flat-active-text: var(--state-primary-text-pressed);
75
75
 
76
76
  /* Disabled State */
77
77
  --button-primary-flat-disabled-bg: transparent;
78
78
  --button-primary-flat-disabled-border: transparent;
79
- --button-primary-flat-disabled-text: var(--state-color-disable-outline);
79
+ --button-primary-flat-disabled-text: var(--state-disable-outline);
80
80
 
81
81
  /* ------------------------------------------------------------------ */
82
82
  /* Solid Mode Tokens - Secondary Theme */
83
83
  /* ------------------------------------------------------------------ */
84
84
 
85
85
  /* Default State */
86
- --button-secondary-solid-default-bg: var(--state-color-secondary-default);
87
- --button-secondary-solid-default-border: var(--state-color-secondary-default);
88
- --button-secondary-solid-default-text: var(--state-color-secondary-text-solid);
86
+ --button-secondary-solid-default-bg: var(--state-secondary-default);
87
+ --button-secondary-solid-default-border: var(--state-secondary-default);
88
+ --button-secondary-solid-default-text: var(--state-secondary-text-solid);
89
89
 
90
90
  /* Hover State */
91
- --button-secondary-solid-hover-bg: var(--state-color-secondary-hover);
92
- --button-secondary-solid-hover-border: var(--state-color-secondary-hover);
93
- --button-secondary-solid-hover-text: var(--state-color-secondary-text-solid);
91
+ --button-secondary-solid-hover-bg: var(--state-secondary-hover);
92
+ --button-secondary-solid-hover-border: var(--state-secondary-hover);
93
+ --button-secondary-solid-hover-text: var(--state-secondary-text-solid);
94
94
 
95
95
  /* Active State */
96
- --button-secondary-solid-active-bg: var(--state-color-secondary-pressed);
97
- --button-secondary-solid-active-border: var(--state-color-secondary-pressed);
98
- --button-secondary-solid-active-text: var(--state-color-secondary-text-solid);
96
+ --button-secondary-solid-active-bg: var(--state-secondary-pressed);
97
+ --button-secondary-solid-active-border: var(--state-secondary-pressed);
98
+ --button-secondary-solid-active-text: var(--state-secondary-text-solid);
99
99
 
100
100
  /* Disabled State */
101
- --button-secondary-solid-disabled-bg: var(--state-color-disable-solid);
102
- --button-secondary-solid-disabled-border: var(--state-color-disable-solid);
103
- --button-secondary-solid-disabled-text: var(--state-color-disable-outline);
101
+ --button-secondary-solid-disabled-bg: var(--state-disable-solid);
102
+ --button-secondary-solid-disabled-border: var(--state-disable-solid);
103
+ --button-secondary-solid-disabled-text: var(--state-disable-outline);
104
104
 
105
105
  /* ------------------------------------------------------------------ */
106
106
  /* Outline Mode Tokens - secondary Theme */
@@ -108,23 +108,23 @@
108
108
 
109
109
  /* Default State */
110
110
  --button-secondary-outline-default-bg: transparent;
111
- --button-secondary-outline-default-border: var(--state-color-secondary-stroke);
112
- --button-secondary-outline-default-text: var(--state-color-secondary-text-outline);
111
+ --button-secondary-outline-default-border: var(--state-secondary-stroke);
112
+ --button-secondary-outline-default-text: var(--state-secondary-text-outline);
113
113
 
114
114
  /* Hover State */
115
- --button-secondary-outline-hover-bg: var(--state-color-secondary-hover-bg);
116
- --button-secondary-outline-hover-border: var(--state-color-secondary-hover);
117
- --button-secondary-outline-hover-text: var(--state-color-secondary-text-hover);
115
+ --button-secondary-outline-hover-bg: var(--state-secondary-hover-bg);
116
+ --button-secondary-outline-hover-border: var(--state-secondary-hover);
117
+ --button-secondary-outline-hover-text: var(--state-secondary-text-hover);
118
118
 
119
119
  /* Active State */
120
- --button-secondary-outline-active-bg: var(--state-color-secondary-hover-bg);
121
- --button-secondary-outline-active-border: var(--state-color-secondary-pressed);
122
- --button-secondary-outline-active-text: var(--state-color-secondary-text-pressed);
120
+ --button-secondary-outline-active-bg: var(--state-secondary-hover-bg);
121
+ --button-secondary-outline-active-border: var(--state-secondary-pressed);
122
+ --button-secondary-outline-active-text: var(--state-secondary-text-pressed);
123
123
 
124
124
  /* Disabled State */
125
125
  --button-secondary-outline-disabled-bg: transparent;
126
- --button-secondary-outline-disabled-border: var(--state-color-disable-outline);
127
- --button-secondary-outline-disabled-text: var(--state-color-disable-outline);
126
+ --button-secondary-outline-disabled-border: var(--state-disable-outline);
127
+ --button-secondary-outline-disabled-text: var(--state-disable-outline);
128
128
 
129
129
  /* ------------------------------------------------------------------ */
130
130
  /* Flat Mode Tokens - Secondary Theme */
@@ -133,46 +133,46 @@
133
133
  /* Default State */
134
134
  --button-secondary-flat-default-bg: transparent;
135
135
  --button-secondary-flat-default-border: transparent;
136
- --button-secondary-flat-default-text: var(--state-color-secondary-text-outline);
136
+ --button-secondary-flat-default-text: var(--state-secondary-text-outline);
137
137
 
138
138
  /* Hover State */
139
- --button-secondary-flat-hover-bg: var(--state-color-secondary-hover-bg);
139
+ --button-secondary-flat-hover-bg: var(--state-secondary-hover-bg);
140
140
  --button-secondary-flat-hover-border: transparent;
141
- --button-secondary-flat-hover-text: var(--state-color-secondary-text-hover);
141
+ --button-secondary-flat-hover-text: var(--state-secondary-text-hover);
142
142
 
143
143
  /* Active State */
144
144
  --button-secondary-flat-active-bg: transparent;
145
145
  --button-secondary-flat-active-border: transparent;
146
- --button-secondary-flat-active-text: var(--state-color-secondary-text-pressed);
146
+ --button-secondary-flat-active-text: var(--state-secondary-text-pressed);
147
147
 
148
148
  /* Disabled State */
149
149
  --button-secondary-flat-disabled-bg: transparent;
150
150
  --button-secondary-flat-disabled-border: transparent;
151
- --button-secondary-flat-disabled-text: var(--state-color-disable-outline);
151
+ --button-secondary-flat-disabled-text: var(--state-disable-outline);
152
152
 
153
153
  /* ------------------------------------------------------------------ */
154
154
  /* Solid Mode Tokens - Tertiary Theme */
155
155
  /* ------------------------------------------------------------------ */
156
156
 
157
157
  /* Default State */
158
- --button-tertiary-solid-default-bg: var(--state-color-tertiary-default);
159
- --button-tertiary-solid-default-border: var(--state-color-tertiary-default);
160
- --button-tertiary-solid-default-text: var(--state-color-tertiary-text-solid);
158
+ --button-tertiary-solid-default-bg: var(--state-tertiary-default);
159
+ --button-tertiary-solid-default-border: var(--state-tertiary-default);
160
+ --button-tertiary-solid-default-text: var(--state-tertiary-text-solid);
161
161
 
162
162
  /* Hover State */
163
- --button-tertiary-solid-hover-bg: var(--state-color-tertiary-hover);
164
- --button-tertiary-solid-hover-border: var(--state-color-tertiary-hover);
165
- --button-tertiary-solid-hover-text: var(--state-color-tertiary-text-solid);
163
+ --button-tertiary-solid-hover-bg: var(--state-tertiary-hover);
164
+ --button-tertiary-solid-hover-border: var(--state-tertiary-hover);
165
+ --button-tertiary-solid-hover-text: var(--state-tertiary-text-solid);
166
166
 
167
167
  /* Active State */
168
- --button-tertiary-solid-active-bg: var(--state-color-tertiary-pressed);
169
- --button-tertiary-solid-active-border: var(--state-color-tertiary-pressed);
170
- --button-tertiary-solid-active-text: var(--state-color-tertiary-text-solid);
168
+ --button-tertiary-solid-active-bg: var(--state-tertiary-pressed);
169
+ --button-tertiary-solid-active-border: var(--state-tertiary-pressed);
170
+ --button-tertiary-solid-active-text: var(--state-tertiary-text-solid);
171
171
 
172
172
  /* Disabled State */
173
- --button-tertiary-solid-disabled-bg: var(--state-color-disable-solid);
174
- --button-tertiary-solid-disabled-border: var(--state-color-disable-solid);
175
- --button-tertiary-solid-disabled-text: var(--state-color-disable-outline);
173
+ --button-tertiary-solid-disabled-bg: var(--state-disable-solid);
174
+ --button-tertiary-solid-disabled-border: var(--state-disable-solid);
175
+ --button-tertiary-solid-disabled-text: var(--state-disable-outline);
176
176
 
177
177
  /* ------------------------------------------------------------------ */
178
178
  /* Outline Mode Tokens - Tertiary Theme */
@@ -180,23 +180,23 @@
180
180
 
181
181
  /* Default State */
182
182
  --button-tertiary-outline-default-bg: transparent;
183
- --button-tertiary-outline-default-border: var(--state-color-tertiary-stroke);
184
- --button-tertiary-outline-default-text: var(--state-color-tertiary-text-outline);
183
+ --button-tertiary-outline-default-border: var(--state-tertiary-stroke);
184
+ --button-tertiary-outline-default-text: var(--state-tertiary-text-outline);
185
185
 
186
186
  /* Hover State */
187
- --button-tertiary-outline-hover-bg: var(--state-color-tertiary-hover-bg);
188
- --button-tertiary-outline-hover-border: var(--state-color-tertiary-hover);
189
- --button-tertiary-outline-hover-text: var(--state-color-tertiary-text-hover);
187
+ --button-tertiary-outline-hover-bg: var(--state-tertiary-hover-bg);
188
+ --button-tertiary-outline-hover-border: var(--state-tertiary-hover);
189
+ --button-tertiary-outline-hover-text: var(--state-tertiary-text-hover);
190
190
 
191
191
  /* Active State */
192
- --button-tertiary-outline-active-bg: var(--state-color-tertiary-hover-bg);
193
- --button-tertiary-outline-active-border: var(--state-color-tertiary-pressed);
194
- --button-tertiary-outline-active-text: var(--state-color-tertiary-text-pressed);
192
+ --button-tertiary-outline-active-bg: var(--state-tertiary-hover-bg);
193
+ --button-tertiary-outline-active-border: var(--state-tertiary-pressed);
194
+ --button-tertiary-outline-active-text: var(--state-tertiary-text-pressed);
195
195
 
196
196
  /* Disabled State */
197
197
  --button-tertiary-outline-disabled-bg: transparent;
198
- --button-tertiary-outline-disabled-border: var(--state-color-disable-outline);
199
- --button-tertiary-outline-disabled-text: var(--state-color-disable-outline);
198
+ --button-tertiary-outline-disabled-border: var(--state-disable-outline);
199
+ --button-tertiary-outline-disabled-text: var(--state-disable-outline);
200
200
 
201
201
  /* ------------------------------------------------------------------ */
202
202
  /* Flat Mode Tokens - Tertiary Theme */
@@ -205,46 +205,46 @@
205
205
  /* Default State */
206
206
  --button-tertiary-flat-default-bg: transparent;
207
207
  --button-tertiary-flat-default-border: transparent;
208
- --button-tertiary-flat-default-text: var(--state-color-tertiary-text-outline);
208
+ --button-tertiary-flat-default-text: var(--state-tertiary-text-outline);
209
209
 
210
210
  /* Hover State */
211
- --button-tertiary-flat-hover-bg: var(--state-color-tertiary-hover-bg);
211
+ --button-tertiary-flat-hover-bg: var(--state-tertiary-hover-bg);
212
212
  --button-tertiary-flat-hover-border: transparent;
213
- --button-tertiary-flat-hover-text: var(--state-color-tertiary-text-hover);
213
+ --button-tertiary-flat-hover-text: var(--state-tertiary-text-hover);
214
214
 
215
215
  /* Active State */
216
216
  --button-tertiary-flat-active-bg: transparent;
217
217
  --button-tertiary-flat-active-border: transparent;
218
- --button-tertiary-flat-active-text: var(--state-color-tertiary-text-pressed);
218
+ --button-tertiary-flat-active-text: var(--state-tertiary-text-pressed);
219
219
 
220
220
  /* Disabled State */
221
221
  --button-tertiary-flat-disabled-bg: transparent;
222
222
  --button-tertiary-flat-disabled-border: transparent;
223
- --button-tertiary-flat-disabled-text: var(--state-color-disable-outline);
223
+ --button-tertiary-flat-disabled-text: var(--state-disable-outline);
224
224
 
225
225
  /* ------------------------------------------------------------------ */
226
226
  /* Solid Mode Tokens - Info Theme */
227
227
  /* ------------------------------------------------------------------ */
228
228
 
229
229
  /* Default State */
230
- --button-info-solid-default-bg: var(--state-color-info-default);
231
- --button-info-solid-default-border: var(--state-color-info-default);
232
- --button-info-solid-default-text: var(--state-color-info-text-solid);
230
+ --button-info-solid-default-bg: var(--state-info-default);
231
+ --button-info-solid-default-border: var(--state-info-default);
232
+ --button-info-solid-default-text: var(--state-info-text-solid);
233
233
 
234
234
  /* Hover State */
235
- --button-info-solid-hover-bg: var(--state-color-info-hover);
236
- --button-info-solid-hover-border: var(--state-color-info-hover);
237
- --button-info-solid-hover-text: var(--state-color-info-text-solid);
235
+ --button-info-solid-hover-bg: var(--state-info-hover);
236
+ --button-info-solid-hover-border: var(--state-info-hover);
237
+ --button-info-solid-hover-text: var(--state-info-text-solid);
238
238
 
239
239
  /* Active State */
240
- --button-info-solid-active-bg: var(--state-color-info-pressed);
241
- --button-info-solid-active-border: var(--state-color-info-pressed);
242
- --button-info-solid-active-text: var(--state-color-info-text-solid);
240
+ --button-info-solid-active-bg: var(--state-info-pressed);
241
+ --button-info-solid-active-border: var(--state-info-pressed);
242
+ --button-info-solid-active-text: var(--state-info-text-solid);
243
243
 
244
244
  /* Disabled State */
245
- --button-info-solid-disabled-bg: var(--state-color-disable-solid);
246
- --button-info-solid-disabled-border: var(--state-color-disable-solid);
247
- --button-info-solid-disabled-text: var(--state-color-disable-outline);
245
+ --button-info-solid-disabled-bg: var(--state-disable-solid);
246
+ --button-info-solid-disabled-border: var(--state-disable-solid);
247
+ --button-info-solid-disabled-text: var(--state-disable-outline);
248
248
 
249
249
  /* ------------------------------------------------------------------ */
250
250
  /* Outline Mode Tokens - Info Theme */
@@ -252,23 +252,23 @@
252
252
 
253
253
  /* Default State */
254
254
  --button-info-outline-default-bg: transparent;
255
- --button-info-outline-default-border: var(--state-color-info-stroke);
256
- --button-info-outline-default-text: var(--state-color-info-text-outline);
255
+ --button-info-outline-default-border: var(--state-info-stroke);
256
+ --button-info-outline-default-text: var(--state-info-text-outline);
257
257
 
258
258
  /* Hover State */
259
- --button-info-outline-hover-bg: var(--state-color-info-hover-bg);
260
- --button-info-outline-hover-border: var(--state-color-info-hover);
261
- --button-info-outline-hover-text: var(--state-color-info-text-hover);
259
+ --button-info-outline-hover-bg: var(--state-info-hover-bg);
260
+ --button-info-outline-hover-border: var(--state-info-hover);
261
+ --button-info-outline-hover-text: var(--state-info-text-hover);
262
262
 
263
263
  /* Active State */
264
- --button-info-outline-active-bg: var(--state-color-info-hover-bg);
265
- --button-info-outline-active-border: var(--state-color-info-pressed);
266
- --button-info-outline-active-text: var(--state-color-info-text-pressed);
264
+ --button-info-outline-active-bg: var(--state-info-hover-bg);
265
+ --button-info-outline-active-border: var(--state-info-pressed);
266
+ --button-info-outline-active-text: var(--state-info-text-pressed);
267
267
 
268
268
  /* Disabled State */
269
269
  --button-info-outline-disabled-bg: transparent;
270
- --button-info-outline-disabled-border: var(--state-color-disable-outline);
271
- --button-info-outline-disabled-text: var(--state-color-disable-outline);
270
+ --button-info-outline-disabled-border: var(--state-disable-outline);
271
+ --button-info-outline-disabled-text: var(--state-disable-outline);
272
272
 
273
273
  /* ------------------------------------------------------------------ */
274
274
  /* Flat Mode Tokens - Info Theme */
@@ -277,46 +277,46 @@
277
277
  /* Default State */
278
278
  --button-info-flat-default-bg: transparent;
279
279
  --button-info-flat-default-border: transparent;
280
- --button-info-flat-default-text: var(--state-color-info-text-outline);
280
+ --button-info-flat-default-text: var(--state-info-text-outline);
281
281
 
282
282
  /* Hover State */
283
- --button-info-flat-hover-bg: var(--state-color-info-hover-bg);
283
+ --button-info-flat-hover-bg: var(--state-info-hover-bg);
284
284
  --button-info-flat-hover-border: transparent;
285
- --button-info-flat-hover-text: var(--state-color-info-text-hover);
285
+ --button-info-flat-hover-text: var(--state-info-text-hover);
286
286
 
287
287
  /* Active State */
288
288
  --button-info-flat-active-bg: transparent;
289
289
  --button-info-flat-active-border: transparent;
290
- --button-info-flat-active-text: var(--state-color-info-text-pressed);
290
+ --button-info-flat-active-text: var(--state-info-text-pressed);
291
291
 
292
292
  /* Disabled State */
293
293
  --button-info-flat-disabled-bg: transparent;
294
294
  --button-info-flat-disabled-border: transparent;
295
- --button-info-flat-disabled-text: var(--state-color-disable-outline);
295
+ --button-info-flat-disabled-text: var(--state-disable-outline);
296
296
 
297
297
  /* ------------------------------------------------------------------ */
298
298
  /* Solid Mode Tokens - Success Theme */
299
299
  /* ------------------------------------------------------------------ */
300
300
 
301
301
  /* Default State */
302
- --button-success-solid-default-bg: var(--state-color-success-default);
303
- --button-success-solid-default-border: var(--state-color-success-default);
304
- --button-success-solid-default-text: var(--state-color-success-text-solid);
302
+ --button-success-solid-default-bg: var(--state-success-default);
303
+ --button-success-solid-default-border: var(--state-success-default);
304
+ --button-success-solid-default-text: var(--state-success-text-solid);
305
305
 
306
306
  /* Hover State */
307
- --button-success-solid-hover-bg: var(--state-color-success-hover);
308
- --button-success-solid-hover-border: var(--state-color-success-hover);
309
- --button-success-solid-hover-text: var(--state-color-success-text-solid);
307
+ --button-success-solid-hover-bg: var(--state-success-hover);
308
+ --button-success-solid-hover-border: var(--state-success-hover);
309
+ --button-success-solid-hover-text: var(--state-success-text-solid);
310
310
 
311
311
  /* Active State */
312
- --button-success-solid-active-bg: var(--state-color-success-pressed);
313
- --button-success-solid-active-border: var(--state-color-success-pressed);
314
- --button-success-solid-active-text: var(--state-color-success-text-solid);
312
+ --button-success-solid-active-bg: var(--state-success-pressed);
313
+ --button-success-solid-active-border: var(--state-success-pressed);
314
+ --button-success-solid-active-text: var(--state-success-text-solid);
315
315
 
316
316
  /* Disabled State */
317
- --button-success-solid-disabled-bg: var(--state-color-disable-solid);
318
- --button-success-solid-disabled-border: var(--state-color-disable-solid);
319
- --button-success-solid-disabled-text: var(--state-color-disable-outline);
317
+ --button-success-solid-disabled-bg: var(--state-disable-solid);
318
+ --button-success-solid-disabled-border: var(--state-disable-solid);
319
+ --button-success-solid-disabled-text: var(--state-disable-outline);
320
320
 
321
321
  /* ------------------------------------------------------------------ */
322
322
  /* Outline Mode Tokens - Success Theme */
@@ -324,23 +324,23 @@
324
324
 
325
325
  /* Default State */
326
326
  --button-success-outline-default-bg: transparent;
327
- --button-success-outline-default-border: var(--state-color-success-stroke);
328
- --button-success-outline-default-text: var(--state-color-success-text-outline);
327
+ --button-success-outline-default-border: var(--state-success-stroke);
328
+ --button-success-outline-default-text: var(--state-success-text-outline);
329
329
 
330
330
  /* Hover State */
331
- --button-success-outline-hover-bg: var(--state-color-success-hover-bg);
332
- --button-success-outline-hover-border: var(--state-color-success-hover);
333
- --button-success-outline-hover-text: var(--state-color-success-text-hover);
331
+ --button-success-outline-hover-bg: var(--state-success-hover-bg);
332
+ --button-success-outline-hover-border: var(--state-success-hover);
333
+ --button-success-outline-hover-text: var(--state-success-text-hover);
334
334
 
335
335
  /* Active State */
336
- --button-success-outline-active-bg: var(--state-color-success-hover-bg);
337
- --button-success-outline-active-border: var(--state-color-success-pressed);
338
- --button-success-outline-active-text: var(--state-color-success-text-pressed);
336
+ --button-success-outline-active-bg: var(--state-success-hover-bg);
337
+ --button-success-outline-active-border: var(--state-success-pressed);
338
+ --button-success-outline-active-text: var(--state-success-text-pressed);
339
339
 
340
340
  /* Disabled State */
341
341
  --button-success-outline-disabled-bg: transparent;
342
- --button-success-outline-disabled-border: var(--state-color-disable-outline);
343
- --button-success-outline-disabled-text: var(--state-color-disable-outline);
342
+ --button-success-outline-disabled-border: var(--state-disable-outline);
343
+ --button-success-outline-disabled-text: var(--state-disable-outline);
344
344
 
345
345
  /* ------------------------------------------------------------------ */
346
346
  /* Flat Mode Tokens - Success Theme */
@@ -349,46 +349,46 @@
349
349
  /* Default State */
350
350
  --button-success-flat-default-bg: transparent;
351
351
  --button-success-flat-default-border: transparent;
352
- --button-success-flat-default-text: var(--state-color-success-text-outline);
352
+ --button-success-flat-default-text: var(--state-success-text-outline);
353
353
 
354
354
  /* Hover State */
355
- --button-success-flat-hover-bg: var(--state-color-success-hover-bg);
355
+ --button-success-flat-hover-bg: var(--state-success-hover-bg);
356
356
  --button-success-flat-hover-border: transparent;
357
- --button-success-flat-hover-text: var(--state-color-success-text-hover);
357
+ --button-success-flat-hover-text: var(--state-success-text-hover);
358
358
 
359
359
  /* Active State */
360
360
  --button-success-flat-active-bg: transparent;
361
361
  --button-success-flat-active-border: transparent;
362
- --button-success-flat-active-text: var(--state-color-success-text-pressed);
362
+ --button-success-flat-active-text: var(--state-success-text-pressed);
363
363
 
364
364
  /* Disabled State */
365
365
  --button-success-flat-disabled-bg: transparent;
366
366
  --button-success-flat-disabled-border: transparent;
367
- --button-success-flat-disabled-text: var(--state-color-disable-outline);
367
+ --button-success-flat-disabled-text: var(--state-disable-outline);
368
368
 
369
369
  /* ------------------------------------------------------------------ */
370
370
  /* Solid Mode Tokens - Warning Theme */
371
371
  /* ------------------------------------------------------------------ */
372
372
 
373
373
  /* Default State */
374
- --button-warning-solid-default-bg: var(--state-color-warning-default);
375
- --button-warning-solid-default-border: var(--state-color-warning-default);
376
- --button-warning-solid-default-text: var(--state-color-warning-text-solid);
374
+ --button-warning-solid-default-bg: var(--state-warning-default);
375
+ --button-warning-solid-default-border: var(--state-warning-default);
376
+ --button-warning-solid-default-text: var(--state-warning-text-solid);
377
377
 
378
378
  /* Hover State */
379
- --button-warning-solid-hover-bg: var(--state-color-warning-hover);
380
- --button-warning-solid-hover-border: var(--state-color-warning-hover);
381
- --button-warning-solid-hover-text: var(--state-color-warning-text-solid);
379
+ --button-warning-solid-hover-bg: var(--state-warning-hover);
380
+ --button-warning-solid-hover-border: var(--state-warning-hover);
381
+ --button-warning-solid-hover-text: var(--state-warning-text-solid);
382
382
 
383
383
  /* Active State */
384
- --button-warning-solid-active-bg: var(--state-color-warning-pressed);
385
- --button-warning-solid-active-border: var(--state-color-warning-pressed);
386
- --button-warning-solid-active-text: var(--state-color-warning-text-solid);
384
+ --button-warning-solid-active-bg: var(--state-warning-pressed);
385
+ --button-warning-solid-active-border: var(--state-warning-pressed);
386
+ --button-warning-solid-active-text: var(--state-warning-text-solid);
387
387
 
388
388
  /* Disabled State */
389
- --button-warning-solid-disabled-bg: var(--state-color-disable-solid);
390
- --button-warning-solid-disabled-border: var(--state-color-disable-solid);
391
- --button-warning-solid-disabled-text: var(--state-color-disable-outline);
389
+ --button-warning-solid-disabled-bg: var(--state-disable-solid);
390
+ --button-warning-solid-disabled-border: var(--state-disable-solid);
391
+ --button-warning-solid-disabled-text: var(--state-disable-outline);
392
392
 
393
393
  /* ------------------------------------------------------------------ */
394
394
  /* Outline Mode Tokens - Warning Theme */
@@ -396,23 +396,23 @@
396
396
 
397
397
  /* Default State */
398
398
  --button-warning-outline-default-bg: transparent;
399
- --button-warning-outline-default-border: var(--state-color-warning-stroke);
400
- --button-warning-outline-default-text: var(--state-color-warning-text-outline);
399
+ --button-warning-outline-default-border: var(--state-warning-stroke);
400
+ --button-warning-outline-default-text: var(--state-warning-text-outline);
401
401
 
402
402
  /* Hover State */
403
- --button-warning-outline-hover-bg: var(--state-color-warning-hover-bg);
404
- --button-warning-outline-hover-border: var(--state-color-warning-hover);
405
- --button-warning-outline-hover-text: var(--state-color-warning-text-hover);
403
+ --button-warning-outline-hover-bg: var(--state-warning-hover-bg);
404
+ --button-warning-outline-hover-border: var(--state-warning-hover);
405
+ --button-warning-outline-hover-text: var(--state-warning-text-hover);
406
406
 
407
407
  /* Active State */
408
- --button-warning-outline-active-bg: var(--state-color-warning-hover-bg);
409
- --button-warning-outline-active-border: var(--state-color-warning-pressed);
410
- --button-warning-outline-active-text: var(--state-color-warning-text-pressed);
408
+ --button-warning-outline-active-bg: var(--state-warning-hover-bg);
409
+ --button-warning-outline-active-border: var(--state-warning-pressed);
410
+ --button-warning-outline-active-text: var(--state-warning-text-pressed);
411
411
 
412
412
  /* Disabled State */
413
413
  --button-warning-outline-disabled-bg: transparent;
414
- --button-warning-outline-disabled-border: var(--state-color-disable-outline);
415
- --button-warning-outline-disabled-text: var(--state-color-disable-outline);
414
+ --button-warning-outline-disabled-border: var(--state-disable-outline);
415
+ --button-warning-outline-disabled-text: var(--state-disable-outline);
416
416
 
417
417
  /* ------------------------------------------------------------------ */
418
418
  /* Flat Mode Tokens - Warning Theme */
@@ -421,46 +421,46 @@
421
421
  /* Default State */
422
422
  --button-warning-flat-default-bg: transparent;
423
423
  --button-warning-flat-default-border: transparent;
424
- --button-warning-flat-default-text: var(--state-color-warning-text-outline);
424
+ --button-warning-flat-default-text: var(--state-warning-text-outline);
425
425
 
426
426
  /* Hover State */
427
- --button-warning-flat-hover-bg: var(--state-color-warning-hover-bg);
427
+ --button-warning-flat-hover-bg: var(--state-warning-hover-bg);
428
428
  --button-warning-flat-hover-border: transparent;
429
- --button-warning-flat-hover-text: var(--state-color-warning-text-hover);
429
+ --button-warning-flat-hover-text: var(--state-warning-text-hover);
430
430
 
431
431
  /* Active State */
432
432
  --button-warning-flat-active-bg: transparent;
433
433
  --button-warning-flat-active-border: transparent;
434
- --button-warning-flat-active-text: var(--state-color-warning-text-pressed);
434
+ --button-warning-flat-active-text: var(--state-warning-text-pressed);
435
435
 
436
436
  /* Disabled State */
437
437
  --button-warning-flat-disabled-bg: transparent;
438
438
  --button-warning-flat-disabled-border: transparent;
439
- --button-warning-flat-disabled-text: var(--state-color-disable-outline);
439
+ --button-warning-flat-disabled-text: var(--state-disable-outline);
440
440
 
441
441
  /* ------------------------------------------------------------------ */
442
442
  /* Solid Mode Tokens - Error Theme */
443
443
  /* ------------------------------------------------------------------ */
444
444
 
445
445
  /* Default State */
446
- --button-error-solid-default-bg: var(--state-color-error-default);
447
- --button-error-solid-default-border: var(--state-color-error-default);
448
- --button-error-solid-default-text: var(--state-color-error-text-solid);
446
+ --button-error-solid-default-bg: var(--state-error-default);
447
+ --button-error-solid-default-border: var(--state-error-default);
448
+ --button-error-solid-default-text: var(--state-error-text-solid);
449
449
 
450
450
  /* Hover State */
451
- --button-error-solid-hover-bg: var(--state-color-error-hover);
452
- --button-error-solid-hover-border: var(--state-color-error-hover);
453
- --button-error-solid-hover-text: var(--state-color-error-text-solid);
451
+ --button-error-solid-hover-bg: var(--state-error-hover);
452
+ --button-error-solid-hover-border: var(--state-error-hover);
453
+ --button-error-solid-hover-text: var(--state-error-text-solid);
454
454
 
455
455
  /* Active State */
456
- --button-error-solid-active-bg: var(--state-color-error-pressed);
457
- --button-error-solid-active-border: var(--state-color-error-pressed);
458
- --button-error-solid-active-text: var(--state-color-error-text-solid);
456
+ --button-error-solid-active-bg: var(--state-error-pressed);
457
+ --button-error-solid-active-border: var(--state-error-pressed);
458
+ --button-error-solid-active-text: var(--state-error-text-solid);
459
459
 
460
460
  /* Disabled State */
461
- --button-error-solid-disabled-bg: var(--state-color-disable-solid);
462
- --button-error-solid-disabled-border: var(--state-color-disable-solid);
463
- --button-error-solid-disabled-text: var(--state-color-disable-outline);
461
+ --button-error-solid-disabled-bg: var(--state-disable-solid);
462
+ --button-error-solid-disabled-border: var(--state-disable-solid);
463
+ --button-error-solid-disabled-text: var(--state-disable-outline);
464
464
 
465
465
  /* ------------------------------------------------------------------ */
466
466
  /* Outline Mode Tokens - Error Theme */
@@ -468,23 +468,23 @@
468
468
 
469
469
  /* Default State */
470
470
  --button-error-outline-default-bg: transparent;
471
- --button-error-outline-default-border: var(--state-color-error-stroke);
472
- --button-error-outline-default-text: var(--state-color-error-text-outline);
471
+ --button-error-outline-default-border: var(--state-error-stroke);
472
+ --button-error-outline-default-text: var(--state-error-text-outline);
473
473
 
474
474
  /* Hover State */
475
- --button-error-outline-hover-bg: var(--state-color-error-hover-bg);
476
- --button-error-outline-hover-border: var(--state-color-error-hover);
477
- --button-error-outline-hover-text: var(--state-color-error-text-hover);
475
+ --button-error-outline-hover-bg: var(--state-error-hover-bg);
476
+ --button-error-outline-hover-border: var(--state-error-hover);
477
+ --button-error-outline-hover-text: var(--state-error-text-hover);
478
478
 
479
479
  /* Active State */
480
- --button-error-outline-active-bg: var(--state-color-error-hover-bg);
481
- --button-error-outline-active-border: var(--state-color-error-pressed);
482
- --button-error-outline-active-text: var(--state-color-error-text-pressed);
480
+ --button-error-outline-active-bg: var(--state-error-hover-bg);
481
+ --button-error-outline-active-border: var(--state-error-pressed);
482
+ --button-error-outline-active-text: var(--state-error-text-pressed);
483
483
 
484
484
  /* Disabled State */
485
485
  --button-error-outline-disabled-bg: transparent;
486
- --button-error-outline-disabled-border: var(--state-color-disable-outline);
487
- --button-error-outline-disabled-text: var(--state-color-disable-outline);
486
+ --button-error-outline-disabled-border: var(--state-disable-outline);
487
+ --button-error-outline-disabled-text: var(--state-disable-outline);
488
488
 
489
489
  /* ------------------------------------------------------------------ */
490
490
  /* Flat Mode Tokens - Error Theme */
@@ -493,20 +493,20 @@
493
493
  /* Default State */
494
494
  --button-error-flat-default-bg: transparent;
495
495
  --button-error-flat-default-border: transparent;
496
- --button-error-flat-default-text: var(--state-color-error-text-outline);
496
+ --button-error-flat-default-text: var(--state-error-text-outline);
497
497
 
498
498
  /* Hover State */
499
- --button-error-flat-hover-bg: var(--state-color-error-hover-bg);
499
+ --button-error-flat-hover-bg: var(--state-error-hover-bg);
500
500
  --button-error-flat-hover-border: transparent;
501
- --button-error-flat-hover-text: var(--state-color-error-text-hover);
501
+ --button-error-flat-hover-text: var(--state-error-text-hover);
502
502
 
503
503
  /* Active State */
504
504
  --button-error-flat-active-bg: transparent;
505
505
  --button-error-flat-active-border: transparent;
506
- --button-error-flat-active-text: var(--state-color-error-text-pressed);
506
+ --button-error-flat-active-text: var(--state-error-text-pressed);
507
507
 
508
508
  /* Disabled State */
509
509
  --button-error-flat-disabled-bg: transparent;
510
510
  --button-error-flat-disabled-border: transparent;
511
- --button-error-flat-disabled-text: var(--state-color-disable-outline);
511
+ --button-error-flat-disabled-text: var(--state-disable-outline);
512
512
  }