@rovula/ui 0.0.19 → 0.0.21

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 (207) hide show
  1. package/dist/cjs/bundle.css +3220 -1382
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/ActionButton/ActionButton.stories.d.ts +4 -4
  5. package/dist/cjs/types/components/ActionButton/ActionButton.styles copy.d.ts +6 -0
  6. package/dist/cjs/types/components/Button/Button.styles copy.d.ts +7 -0
  7. package/dist/cjs/types/components/Button/Button.styles.d.ts +1 -0
  8. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +12 -4
  9. package/dist/cjs/types/components/Calendar/Calendar.d.ts +0 -1
  10. package/dist/cjs/types/components/Calendar/Calendar.stories.d.ts +7 -7
  11. package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts +6 -6
  12. package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +2 -0
  13. package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts +2 -0
  14. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +8 -6
  15. package/dist/cjs/types/components/Input/Input.stories.d.ts +12 -12
  16. package/dist/cjs/types/components/Label/Label.stories.d.ts +6 -6
  17. package/dist/cjs/types/components/Loading/Loading.d.ts +14 -0
  18. package/dist/cjs/types/components/Loading/Loading.stories.d.ts +35 -0
  19. package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts +13 -0
  20. package/dist/cjs/types/components/ProgressBar/ProgressBar.stories.d.ts +37 -0
  21. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +5 -5
  22. package/dist/cjs/types/components/Search/Search.d.ts +22 -1
  23. package/dist/cjs/types/components/Search/Search.stories.d.ts +338 -7
  24. package/dist/cjs/types/components/Table/Table.stories.d.ts +4 -4
  25. package/dist/cjs/types/components/Text/Text.d.ts +1 -1
  26. package/dist/cjs/types/components/Text/Text.stories.d.ts +1 -1
  27. package/dist/cjs/types/components/TextInput/TextInput.d.ts +4 -0
  28. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +11 -6
  29. package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +8 -0
  30. package/dist/cjs/types/index.d.ts +3 -0
  31. package/dist/cjs/types/stories/ColorGroupPreview.d.ts +1 -0
  32. package/dist/cjs/types/stories/ColorPreview.d.ts +5 -0
  33. package/dist/components/ActionButton/ActionButton.js +1 -1
  34. package/dist/components/ActionButton/ActionButton.stories.js +1 -1
  35. package/dist/components/ActionButton/ActionButton.styles copy.js +90 -0
  36. package/dist/components/ActionButton/ActionButton.styles.js +54 -15
  37. package/dist/components/AlertDialog/AlertDialog.js +2 -2
  38. package/dist/components/Avatar/Avatar.styles.js +1 -1
  39. package/dist/components/Button/Button.js +3 -2
  40. package/dist/components/Button/Button.styles copy.js +210 -0
  41. package/dist/components/Button/Button.styles.js +203 -43
  42. package/dist/components/Button/Buttons.stories.js +9 -1
  43. package/dist/components/Calendar/Calendar.js +39 -2
  44. package/dist/components/Checkbox/Checkbox.js +1 -1
  45. package/dist/components/Collapsible/Collapsible.styles.js +6 -3
  46. package/dist/components/DatePicker/DatePicker.js +13 -2
  47. package/dist/components/Dialog/Dialog.js +4 -4
  48. package/dist/components/Dropdown/Dropdown.js +9 -7
  49. package/dist/components/Dropdown/Dropdown.styles.js +1 -1
  50. package/dist/components/Input/Input.js +8 -1
  51. package/dist/components/Input/Input.stories.js +3 -2
  52. package/dist/components/Input/Input.styles.js +13 -5
  53. package/dist/components/Loading/Loading.js +23 -0
  54. package/dist/components/Loading/Loading.stories.js +37 -0
  55. package/dist/components/Popover/Popover.js +1 -1
  56. package/dist/components/ProgressBar/ProgressBar.js +22 -0
  57. package/dist/components/ProgressBar/ProgressBar.stories.js +52 -0
  58. package/dist/components/RadioGroup/RadioGroup.js +2 -2
  59. package/dist/components/Search/Search.js +6 -7
  60. package/dist/components/Search/Search.stories.js +8 -5
  61. package/dist/components/Text/Text.js +17 -2
  62. package/dist/components/Text/Text.stories.js +5 -1
  63. package/dist/components/TextInput/TextInput.js +14 -5
  64. package/dist/components/TextInput/TextInput.stories.js +3 -2
  65. package/dist/components/TextInput/TextInput.styles.js +120 -18
  66. package/dist/esm/bundle.css +3220 -1382
  67. package/dist/esm/bundle.js +3 -3
  68. package/dist/esm/bundle.js.map +1 -1
  69. package/dist/esm/types/components/ActionButton/ActionButton.stories.d.ts +4 -4
  70. package/dist/esm/types/components/ActionButton/ActionButton.styles copy.d.ts +6 -0
  71. package/dist/esm/types/components/Button/Button.styles copy.d.ts +7 -0
  72. package/dist/esm/types/components/Button/Button.styles.d.ts +1 -0
  73. package/dist/esm/types/components/Button/Buttons.stories.d.ts +12 -4
  74. package/dist/esm/types/components/Calendar/Calendar.d.ts +0 -1
  75. package/dist/esm/types/components/Calendar/Calendar.stories.d.ts +7 -7
  76. package/dist/esm/types/components/Checkbox/Checkbox.stories.d.ts +6 -6
  77. package/dist/esm/types/components/DatePicker/DatePicker.d.ts +2 -0
  78. package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts +2 -0
  79. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +8 -6
  80. package/dist/esm/types/components/Input/Input.stories.d.ts +12 -12
  81. package/dist/esm/types/components/Label/Label.stories.d.ts +6 -6
  82. package/dist/esm/types/components/Loading/Loading.d.ts +14 -0
  83. package/dist/esm/types/components/Loading/Loading.stories.d.ts +35 -0
  84. package/dist/esm/types/components/ProgressBar/ProgressBar.d.ts +13 -0
  85. package/dist/esm/types/components/ProgressBar/ProgressBar.stories.d.ts +37 -0
  86. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +5 -5
  87. package/dist/esm/types/components/Search/Search.d.ts +22 -1
  88. package/dist/esm/types/components/Search/Search.stories.d.ts +338 -7
  89. package/dist/esm/types/components/Table/Table.stories.d.ts +4 -4
  90. package/dist/esm/types/components/Text/Text.d.ts +1 -1
  91. package/dist/esm/types/components/Text/Text.stories.d.ts +1 -1
  92. package/dist/esm/types/components/TextInput/TextInput.d.ts +4 -0
  93. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +11 -6
  94. package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +8 -0
  95. package/dist/esm/types/index.d.ts +3 -0
  96. package/dist/esm/types/stories/ColorGroupPreview.d.ts +1 -0
  97. package/dist/esm/types/stories/ColorPreview.d.ts +5 -0
  98. package/dist/index.d.ts +53 -2
  99. package/dist/index.js +3 -0
  100. package/dist/src/theme/global.css +5078 -918
  101. package/dist/stories/ColorGroupPreview.js +478 -0
  102. package/dist/stories/ColorPreview.js +8 -0
  103. package/dist/theme/global.css +7 -227
  104. package/dist/theme/main-preset.js +131 -67
  105. package/dist/theme/plugins/utilities/typography.js +12 -0
  106. package/dist/theme/presets/colors.js +101 -220
  107. package/dist/theme/theme.d.ts +69 -0
  108. package/dist/theme/themes/xspector/baseline.css +7 -0
  109. package/dist/theme/themes/xspector/color.css +67 -0
  110. package/dist/theme/themes/xspector/components/action-button.css +98 -0
  111. package/dist/theme/themes/xspector/components/loading.css +11 -0
  112. package/dist/theme/themes/xspector/palette.css +122 -0
  113. package/dist/theme/themes/xspector/state.css +89 -0
  114. package/dist/theme/themes/xspector/transparent.css +68 -0
  115. package/dist/theme/themes/xspector/typography.css +27 -0
  116. package/dist/theme/tokens/baseline.css +10 -0
  117. package/dist/theme/tokens/color.css +63 -0
  118. package/dist/theme/tokens/components/action-button.css +127 -0
  119. package/dist/theme/tokens/components/button.css +512 -0
  120. package/dist/theme/tokens/components/loading.css +11 -0
  121. package/dist/theme/tokens/components/navbar.css +8 -0
  122. package/dist/theme/tokens/components/progress-bar.css +8 -0
  123. package/dist/theme/tokens/palette.css +122 -0
  124. package/dist/theme/tokens/state.css +82 -0
  125. package/dist/theme/tokens/transparent.css +68 -0
  126. package/dist/theme/tokens/typography.css +178 -0
  127. package/dist/theme/tokens/variables.css +28 -0
  128. package/dist/theme/utils.js +98 -0
  129. package/package.json +1 -1
  130. package/src/_theme/global copy.css +761 -0
  131. package/src/_theme/global.css +39 -0
  132. package/src/_theme/main-preset.js +239 -0
  133. package/src/_theme/plugins/utilities/typography.js +81 -0
  134. package/src/_theme/presets/colors copy 2.js +319 -0
  135. package/src/_theme/presets/colors copy.js +229 -0
  136. package/src/_theme/presets/colors.js +94 -0
  137. package/src/_theme/theme.d.ts +69 -0
  138. package/src/_theme/variables/base/button.css +334 -0
  139. package/src/_theme/variables/base/components copy.css +19 -0
  140. package/src/_theme/variables/default/colors.css +292 -0
  141. package/src/_theme/variables/default/typography.css +178 -0
  142. package/src/_theme/variables/xspector/colors.css +468 -0
  143. package/src/_theme/variables/xspector/typography.css +178 -0
  144. package/src/components/ActionButton/ActionButton.stories.tsx +1 -1
  145. package/src/components/ActionButton/ActionButton.styles copy.ts +95 -0
  146. package/src/components/ActionButton/ActionButton.styles.ts +54 -19
  147. package/src/components/ActionButton/ActionButton.tsx +1 -1
  148. package/src/components/AlertDialog/AlertDialog.tsx +2 -2
  149. package/src/components/Avatar/Avatar.styles.ts +1 -1
  150. package/src/components/Button/Button.styles copy.ts +214 -0
  151. package/src/components/Button/Button.styles.ts +203 -47
  152. package/src/components/Button/Button.tsx +4 -0
  153. package/src/components/Button/Buttons.stories.tsx +9 -1
  154. package/src/components/Calendar/Calendar.tsx +49 -7
  155. package/src/components/Checkbox/Checkbox.tsx +1 -1
  156. package/src/components/Collapsible/Collapsible.styles.ts +6 -3
  157. package/src/components/DatePicker/DatePicker.tsx +8 -2
  158. package/src/components/Dialog/Dialog.tsx +5 -5
  159. package/src/components/Dropdown/Dropdown.styles.ts +1 -1
  160. package/src/components/Dropdown/Dropdown.tsx +14 -12
  161. package/src/components/Input/Input.stories.tsx +3 -2
  162. package/src/components/Input/Input.styles.tsx +13 -6
  163. package/src/components/Input/Input.tsx +8 -1
  164. package/src/components/Loading/Loading.stories.tsx +43 -0
  165. package/src/components/Loading/Loading.tsx +72 -0
  166. package/src/components/Popover/Popover.tsx +1 -1
  167. package/src/components/ProgressBar/ProgressBar.stories.tsx +78 -0
  168. package/src/components/ProgressBar/ProgressBar.tsx +62 -0
  169. package/src/components/RadioGroup/RadioGroup.tsx +2 -2
  170. package/src/components/Search/Search.stories.tsx +13 -13
  171. package/src/components/Search/Search.tsx +14 -19
  172. package/src/components/Text/Text.stories.tsx +6 -4
  173. package/src/components/Text/Text.tsx +27 -3
  174. package/src/components/TextInput/TextInput.stories.tsx +3 -2
  175. package/src/components/TextInput/TextInput.styles.ts +124 -19
  176. package/src/components/TextInput/TextInput.tsx +34 -4
  177. package/src/index.ts +3 -0
  178. package/src/stories/ColorGroupPreview.tsx +494 -0
  179. package/src/stories/ColorPreview.tsx +45 -0
  180. package/src/stories/Colors.mdx +14 -0
  181. package/src/stories/Typography.mdx +7 -151
  182. package/src/theme/global.css +7 -227
  183. package/src/theme/main-preset.js +131 -67
  184. package/src/theme/plugins/utilities/typography.js +12 -0
  185. package/src/theme/presets/colors.js +101 -220
  186. package/src/theme/theme.d.ts +69 -0
  187. package/src/theme/themes/xspector/baseline.css +7 -0
  188. package/src/theme/themes/xspector/color.css +67 -0
  189. package/src/theme/themes/xspector/components/action-button.css +98 -0
  190. package/src/theme/themes/xspector/components/loading.css +11 -0
  191. package/src/theme/themes/xspector/palette.css +122 -0
  192. package/src/theme/themes/xspector/state.css +89 -0
  193. package/src/theme/themes/xspector/transparent.css +68 -0
  194. package/src/theme/themes/xspector/typography.css +27 -0
  195. package/src/theme/tokens/baseline.css +10 -0
  196. package/src/theme/tokens/color.css +63 -0
  197. package/src/theme/tokens/components/action-button.css +127 -0
  198. package/src/theme/tokens/components/button.css +512 -0
  199. package/src/theme/tokens/components/loading.css +11 -0
  200. package/src/theme/tokens/components/navbar.css +8 -0
  201. package/src/theme/tokens/components/progress-bar.css +8 -0
  202. package/src/theme/tokens/palette.css +122 -0
  203. package/src/theme/tokens/state.css +82 -0
  204. package/src/theme/tokens/transparent.css +68 -0
  205. package/src/theme/tokens/typography.css +178 -0
  206. package/src/theme/tokens/variables.css +28 -0
  207. package/src/theme/utils.js +98 -0
package/dist/theme/tokens/components/button.css ADDED
@@ -0,0 +1,512 @@
1
+ :root {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Button Component Tokens */
4
+ /* ------------------------------------------------------------------ */
5
+ /* Naming Convention: --[component]-[theme]-[mode]-[state]-[property] */
6
+ /* States: [default, hover, active, disabled] */
7
+ /* ------------------------------------------------------------------ */
8
+
9
+ /* ------------------------------------------------------------------ */
10
+ /* Solid Mode Tokens - Primary Theme */
11
+ /* ------------------------------------------------------------------ */
12
+
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);
17
+
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);
22
+
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);
27
+
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);
32
+
33
+ /* ------------------------------------------------------------------ */
34
+ /* Outline Mode Tokens - Primary Theme */
35
+ /* ------------------------------------------------------------------ */
36
+
37
+ /* Default State */
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);
41
+
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);
46
+
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);
51
+
52
+ /* Disabled State */
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);
56
+
57
+ /* ------------------------------------------------------------------ */
58
+ /* Flat Mode Tokens - Primary Theme */
59
+ /* ------------------------------------------------------------------ */
60
+
61
+ /* Default State */
62
+ --button-primary-flat-default-bg: transparent;
63
+ --button-primary-flat-default-border: transparent;
64
+ --button-primary-flat-default-text: var(--state-color-primary-text-outline);
65
+
66
+ /* Hover State */
67
+ --button-primary-flat-hover-bg: var(--state-color-primary-hover-bg);
68
+ --button-primary-flat-hover-border: transparent;
69
+ --button-primary-flat-hover-text: var(--state-color-primary-text-hover);
70
+
71
+ /* Active State */
72
+ --button-primary-flat-active-bg: transparent;
73
+ --button-primary-flat-active-border: transparent;
74
+ --button-primary-flat-active-text: var(--state-color-primary-text-pressed);
75
+
76
+ /* Disabled State */
77
+ --button-primary-flat-disabled-bg: transparent;
78
+ --button-primary-flat-disabled-border: transparent;
79
+ --button-primary-flat-disabled-text: var(--state-color-disable-outline);
80
+
81
+ /* ------------------------------------------------------------------ */
82
+ /* Solid Mode Tokens - Secondary Theme */
83
+ /* ------------------------------------------------------------------ */
84
+
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);
89
+
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);
94
+
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);
99
+
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);
104
+
105
+ /* ------------------------------------------------------------------ */
106
+ /* Outline Mode Tokens - secondary Theme */
107
+ /* ------------------------------------------------------------------ */
108
+
109
+ /* Default State */
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);
113
+
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);
118
+
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);
123
+
124
+ /* Disabled State */
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);
128
+
129
+ /* ------------------------------------------------------------------ */
130
+ /* Flat Mode Tokens - Secondary Theme */
131
+ /* ------------------------------------------------------------------ */
132
+
133
+ /* Default State */
134
+ --button-secondary-flat-default-bg: transparent;
135
+ --button-secondary-flat-default-border: transparent;
136
+ --button-secondary-flat-default-text: var(--state-color-secondary-text-outline);
137
+
138
+ /* Hover State */
139
+ --button-secondary-flat-hover-bg: var(--state-color-secondary-hover-bg);
140
+ --button-secondary-flat-hover-border: transparent;
141
+ --button-secondary-flat-hover-text: var(--state-color-secondary-text-hover);
142
+
143
+ /* Active State */
144
+ --button-secondary-flat-active-bg: transparent;
145
+ --button-secondary-flat-active-border: transparent;
146
+ --button-secondary-flat-active-text: var(--state-color-secondary-text-pressed);
147
+
148
+ /* Disabled State */
149
+ --button-secondary-flat-disabled-bg: transparent;
150
+ --button-secondary-flat-disabled-border: transparent;
151
+ --button-secondary-flat-disabled-text: var(--state-color-disable-outline);
152
+
153
+ /* ------------------------------------------------------------------ */
154
+ /* Solid Mode Tokens - Tertiary Theme */
155
+ /* ------------------------------------------------------------------ */
156
+
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);
161
+
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);
166
+
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);
171
+
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);
176
+
177
+ /* ------------------------------------------------------------------ */
178
+ /* Outline Mode Tokens - Tertiary Theme */
179
+ /* ------------------------------------------------------------------ */
180
+
181
+ /* Default State */
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);
185
+
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);
190
+
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);
195
+
196
+ /* Disabled State */
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);
200
+
201
+ /* ------------------------------------------------------------------ */
202
+ /* Flat Mode Tokens - Tertiary Theme */
203
+ /* ------------------------------------------------------------------ */
204
+
205
+ /* Default State */
206
+ --button-tertiary-flat-default-bg: transparent;
207
+ --button-tertiary-flat-default-border: transparent;
208
+ --button-tertiary-flat-default-text: var(--state-color-tertiary-text-outline);
209
+
210
+ /* Hover State */
211
+ --button-tertiary-flat-hover-bg: var(--state-color-tertiary-hover-bg);
212
+ --button-tertiary-flat-hover-border: transparent;
213
+ --button-tertiary-flat-hover-text: var(--state-color-tertiary-text-hover);
214
+
215
+ /* Active State */
216
+ --button-tertiary-flat-active-bg: transparent;
217
+ --button-tertiary-flat-active-border: transparent;
218
+ --button-tertiary-flat-active-text: var(--state-color-tertiary-text-pressed);
219
+
220
+ /* Disabled State */
221
+ --button-tertiary-flat-disabled-bg: transparent;
222
+ --button-tertiary-flat-disabled-border: transparent;
223
+ --button-tertiary-flat-disabled-text: var(--state-color-disable-outline);
224
+
225
+ /* ------------------------------------------------------------------ */
226
+ /* Solid Mode Tokens - Info Theme */
227
+ /* ------------------------------------------------------------------ */
228
+
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);
233
+
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);
238
+
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);
243
+
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);
248
+
249
+ /* ------------------------------------------------------------------ */
250
+ /* Outline Mode Tokens - Info Theme */
251
+ /* ------------------------------------------------------------------ */
252
+
253
+ /* Default State */
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);
257
+
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);
262
+
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);
267
+
268
+ /* Disabled State */
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);
272
+
273
+ /* ------------------------------------------------------------------ */
274
+ /* Flat Mode Tokens - Info Theme */
275
+ /* ------------------------------------------------------------------ */
276
+
277
+ /* Default State */
278
+ --button-info-flat-default-bg: transparent;
279
+ --button-info-flat-default-border: transparent;
280
+ --button-info-flat-default-text: var(--state-color-info-text-outline);
281
+
282
+ /* Hover State */
283
+ --button-info-flat-hover-bg: var(--state-color-info-hover-bg);
284
+ --button-info-flat-hover-border: transparent;
285
+ --button-info-flat-hover-text: var(--state-color-info-text-hover);
286
+
287
+ /* Active State */
288
+ --button-info-flat-active-bg: transparent;
289
+ --button-info-flat-active-border: transparent;
290
+ --button-info-flat-active-text: var(--state-color-info-text-pressed);
291
+
292
+ /* Disabled State */
293
+ --button-info-flat-disabled-bg: transparent;
294
+ --button-info-flat-disabled-border: transparent;
295
+ --button-info-flat-disabled-text: var(--state-color-disable-outline);
296
+
297
+ /* ------------------------------------------------------------------ */
298
+ /* Solid Mode Tokens - Success Theme */
299
+ /* ------------------------------------------------------------------ */
300
+
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);
305
+
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);
310
+
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);
315
+
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);
320
+
321
+ /* ------------------------------------------------------------------ */
322
+ /* Outline Mode Tokens - Success Theme */
323
+ /* ------------------------------------------------------------------ */
324
+
325
+ /* Default State */
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);
329
+
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);
334
+
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);
339
+
340
+ /* Disabled State */
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);
344
+
345
+ /* ------------------------------------------------------------------ */
346
+ /* Flat Mode Tokens - Success Theme */
347
+ /* ------------------------------------------------------------------ */
348
+
349
+ /* Default State */
350
+ --button-success-flat-default-bg: transparent;
351
+ --button-success-flat-default-border: transparent;
352
+ --button-success-flat-default-text: var(--state-color-success-text-outline);
353
+
354
+ /* Hover State */
355
+ --button-success-flat-hover-bg: var(--state-color-success-hover-bg);
356
+ --button-success-flat-hover-border: transparent;
357
+ --button-success-flat-hover-text: var(--state-color-success-text-hover);
358
+
359
+ /* Active State */
360
+ --button-success-flat-active-bg: transparent;
361
+ --button-success-flat-active-border: transparent;
362
+ --button-success-flat-active-text: var(--state-color-success-text-pressed);
363
+
364
+ /* Disabled State */
365
+ --button-success-flat-disabled-bg: transparent;
366
+ --button-success-flat-disabled-border: transparent;
367
+ --button-success-flat-disabled-text: var(--state-color-disable-outline);
368
+
369
+ /* ------------------------------------------------------------------ */
370
+ /* Solid Mode Tokens - Warning Theme */
371
+ /* ------------------------------------------------------------------ */
372
+
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);
377
+
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);
382
+
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);
387
+
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);
392
+
393
+ /* ------------------------------------------------------------------ */
394
+ /* Outline Mode Tokens - Warning Theme */
395
+ /* ------------------------------------------------------------------ */
396
+
397
+ /* Default State */
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);
401
+
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);
406
+
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);
411
+
412
+ /* Disabled State */
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);
416
+
417
+ /* ------------------------------------------------------------------ */
418
+ /* Flat Mode Tokens - Warning Theme */
419
+ /* ------------------------------------------------------------------ */
420
+
421
+ /* Default State */
422
+ --button-warning-flat-default-bg: transparent;
423
+ --button-warning-flat-default-border: transparent;
424
+ --button-warning-flat-default-text: var(--state-color-warning-text-outline);
425
+
426
+ /* Hover State */
427
+ --button-warning-flat-hover-bg: var(--state-color-warning-hover-bg);
428
+ --button-warning-flat-hover-border: transparent;
429
+ --button-warning-flat-hover-text: var(--state-color-warning-text-hover);
430
+
431
+ /* Active State */
432
+ --button-warning-flat-active-bg: transparent;
433
+ --button-warning-flat-active-border: transparent;
434
+ --button-warning-flat-active-text: var(--state-color-warning-text-pressed);
435
+
436
+ /* Disabled State */
437
+ --button-warning-flat-disabled-bg: transparent;
438
+ --button-warning-flat-disabled-border: transparent;
439
+ --button-warning-flat-disabled-text: var(--state-color-disable-outline);
440
+
441
+ /* ------------------------------------------------------------------ */
442
+ /* Solid Mode Tokens - Error Theme */
443
+ /* ------------------------------------------------------------------ */
444
+
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);
449
+
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);
454
+
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);
459
+
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);
464
+
465
+ /* ------------------------------------------------------------------ */
466
+ /* Outline Mode Tokens - Error Theme */
467
+ /* ------------------------------------------------------------------ */
468
+
469
+ /* Default State */
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);
473
+
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);
478
+
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);
483
+
484
+ /* Disabled State */
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);
488
+
489
+ /* ------------------------------------------------------------------ */
490
+ /* Flat Mode Tokens - Error Theme */
491
+ /* ------------------------------------------------------------------ */
492
+
493
+ /* Default State */
494
+ --button-error-flat-default-bg: transparent;
495
+ --button-error-flat-default-border: transparent;
496
+ --button-error-flat-default-text: var(--state-color-error-text-outline);
497
+
498
+ /* Hover State */
499
+ --button-error-flat-hover-bg: var(--state-color-error-hover-bg);
500
+ --button-error-flat-hover-border: transparent;
501
+ --button-error-flat-hover-text: var(--state-color-error-text-hover);
502
+
503
+ /* Active State */
504
+ --button-error-flat-active-bg: transparent;
505
+ --button-error-flat-active-border: transparent;
506
+ --button-error-flat-active-text: var(--state-color-error-text-pressed);
507
+
508
+ /* Disabled State */
509
+ --button-error-flat-disabled-bg: transparent;
510
+ --button-error-flat-disabled-border: transparent;
511
+ --button-error-flat-disabled-text: var(--state-color-disable-outline);
512
+ }
package/dist/theme/tokens/components/loading.css ADDED
@@ -0,0 +1,11 @@
1
+ :root {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Loading Component Tokens */
4
+ /* ------------------------------------------------------------------ */
5
+ /* Naming Convention: --[component]-[element]-[property] */
6
+ /* Element: [progress, track] */
7
+ /* ------------------------------------------------------------------ */
8
+
9
+ --loading-process-color: var(--secondary);
10
+ --loading-track-color: #9E9E9E7A;
11
+ }
package/dist/theme/tokens/components/navbar.css ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ /* Navbar */
3
+ --navbar-height: 58px;
4
+ --navbar-bg-color: var(--primary-default);
5
+ --navbar-text-color: var(--primary-foreground);
6
+ --navbar-border-color: var(--primary-foreground);
7
+ --navbar-gap: 16px;
8
+ }
package/dist/theme/tokens/components/progress-bar.css ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ /* Navbar */
3
+ --navbar-height: 58px;
4
+ --navbar-bg-color: var(--primary-default);
5
+ --navbar-text-color: var(--primary-foreground);
6
+ --navbar-border-color: var(--primary-foreground);
7
+ --navbar-gap: 16px;
8
+ }
package/dist/theme/tokens/palette.css ADDED
@@ -0,0 +1,122 @@
1
+
2
+ :root {
3
+ --primary-ramps-primary-5: #f4f5f6;
4
+ --primary-ramps-primary-10: #e8eaed;
5
+ --primary-ramps-primary-20: #d2d6db;
6
+ --primary-ramps-primary-30: #bbc1c8;
7
+ --primary-ramps-primary-40: #a5adb6;
8
+ --primary-ramps-primary-50: #8e98a4;
9
+ --primary-ramps-primary-60: #788492;
10
+ --primary-ramps-primary-70: #627080;
11
+ --primary-ramps-primary-80: #4b5b6d;
12
+ --primary-ramps-primary-90: #35475b;
13
+ --primary-ramps-primary-100: #1e3249;
14
+ --primary-ramps-primary-110: #1b2d42;
15
+ --primary-ramps-primary-120: #18283a;
16
+ --primary-ramps-primary-130: #152333;
17
+ --primary-ramps-primary-140: #121e2c;
18
+ --primary-ramps-primary-150: #0f1925;
19
+ --secondary-ramps-secondary-5: #fdfcf2;
20
+ --secondary-ramps-secondary-10: #fcfae5;
21
+ --secondary-ramps-secondary-20: #f8f5cc;
22
+ --secondary-ramps-secondary-30: #f5f0b2;
23
+ --secondary-ramps-secondary-40: #f1eb99;
24
+ --secondary-ramps-secondary-50: #eee680;
25
+ --secondary-ramps-secondary-60: #ebe166;
26
+ --secondary-ramps-secondary-70: #e7dc4d;
27
+ --secondary-ramps-secondary-80: #e4d733;
28
+ --secondary-ramps-secondary-90: #e0d21a;
29
+ --secondary-ramps-secondary-100: #ddcd00;
30
+ --secondary-ramps-secondary-110: #c7b800;
31
+ --secondary-ramps-secondary-120: #b1a400;
32
+ --secondary-ramps-secondary-130: #9b8f00;
33
+ --secondary-ramps-secondary-140: #857b00;
34
+ --secondary-ramps-secondary-150: #6f6700;
35
+ --tertiary-ramps-tertiary-5: #fafafa;
36
+ --tertiary-ramps-tertiary-10: #f5f5f5;
37
+ --tertiary-ramps-tertiary-20: #ececec;
38
+ --tertiary-ramps-tertiary-30: #e2e2e2;
39
+ --tertiary-ramps-tertiary-40: #d8d8d8;
40
+ --tertiary-ramps-tertiary-50: #cfcfcf;
41
+ --tertiary-ramps-tertiary-60: #c5c5c5;
42
+ --tertiary-ramps-tertiary-70: #bbbbbb;
43
+ --tertiary-ramps-tertiary-80: #b1b1b1;
44
+ --tertiary-ramps-tertiary-90: #a8a8a8;
45
+ --tertiary-ramps-tertiary-100: #9e9e9e;
46
+ --tertiary-ramps-tertiary-110: #8e8e8e;
47
+ --tertiary-ramps-tertiary-120: #7e7e7e;
48
+ --tertiary-ramps-tertiary-130: #6f6f6f;
49
+ --tertiary-ramps-tertiary-140: #5f5f5f;
50
+ --tertiary-ramps-tertiary-150: #4f4f4f;
51
+ --grey-grey-5: #fafafa;
52
+ --grey-grey-10: #f5f5f5;
53
+ --grey-grey-20: #ececec;
54
+ --grey-grey-30: #e2e2e2;
55
+ --grey-grey-40: #d8d8d8;
56
+ --grey-grey-50: #cfcfcf;
57
+ --grey-grey-60: #c5c5c5;
58
+ --grey-grey-70: #bbbbbb;
59
+ --grey-grey-80: #b1b1b1;
60
+ --grey-grey-90: #a8a8a8;
61
+ --grey-grey-100: #9e9e9e;
62
+ --grey-grey-110: #8e8e8e;
63
+ --grey-grey-120: #7e7e7e;
64
+ --grey-grey-130: #6f6f6f;
65
+ --grey-grey-140: #5f5f5f;
66
+ --grey-grey-150: #4f4f4f;
67
+ --grey2-grey2-50: #f8fafa;
68
+ --grey2-grey2-100: #f2f5f5;
69
+ --grey2-grey2-200: #e7ebed;
70
+ --grey2-grey2-300: #d3dadf;
71
+ --grey2-grey2-400: #bac5cb;
72
+ --grey2-grey2-500: #9dabb5;
73
+ --grey2-grey2-600: #919eab;
74
+ --grey2-grey2-700: #72808f;
75
+ --grey2-grey2-800: #606b77;
76
+ --grey2-grey2-900: #4f5863;
77
+ --grey2-grey2-950: #343b41;
78
+ --info-info-50: #eef8ff;
79
+ --info-info-100: #d9efff;
80
+ --info-info-200: #bce4ff;
81
+ --info-info-300: #8ed5ff;
82
+ --info-info-400: #59bbff;
83
+ --info-info-500: #2998ff;
84
+ --info-info-600: #1b7df5;
85
+ --info-info-700: #1466e1;
86
+ --info-info-800: #1752b6;
87
+ --info-info-900: #19478f;
88
+ --info-info-950: #142c57;
89
+ --success-success-50: #effce9;
90
+ --success-success-100: #daf9ce;
91
+ --success-success-200: #b8f3a3;
92
+ --success-success-300: #8ce86e;
93
+ --success-success-400: #54d62c;
94
+ --success-success-500: #44c022;
95
+ --success-success-600: #319917;
96
+ --success-success-700: #277516;
97
+ --success-success-800: #235d17;
98
+ --success-success-900: #214f18;
99
+ --success-success-950: #0c2b08;
100
+ --warning-warning-50: #ffffea;
101
+ --warning-warning-100: #fffbc5;
102
+ --warning-warning-200: #fff885;
103
+ --warning-warning-300: #ffee46;
104
+ --warning-warning-400: #ffdf1b;
105
+ --warning-warning-500: #ffc107;
106
+ --warning-warning-600: #e29400;
107
+ --warning-warning-700: #bb6902;
108
+ --warning-warning-800: #985108;
109
+ --warning-warning-900: #7c420b;
110
+ --warning-warning-950: #482200;
111
+ --error-error-50: #fff3f1;
112
+ --error-error-100: #ffe3df;
113
+ --error-error-200: #ffccc5;
114
+ --error-error-300: #ffa99d;
115
+ --error-error-400: #ff7664;
116
+ --error-error-500: #ff4d35;
117
+ --error-error-600: #ed2f15;
118
+ --error-error-700: #c8230d;
119
+ --error-error-800: #a5210f;
120
+ --error-error-900: #882214;
121
+ --error-error-950: #4b0c04;
122
+ }