@iota/apps-ui-kit 0.7.0 → 0.7.1

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 (53) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.d.ts +51 -25
  3. package/dist/index.es.js +2164 -2104
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +10 -10
  6. package/dist/index.umd.js.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +3 -2
  9. package/src/lib/components/atoms/button/Button.tsx +1 -0
  10. package/src/lib/components/atoms/button-segment/ButtonSegment.tsx +1 -1
  11. package/src/lib/components/atoms/checkbox/Checkbox.tsx +0 -1
  12. package/src/lib/components/atoms/index.ts +1 -0
  13. package/src/lib/components/atoms/list-item/ListItem.tsx +1 -1
  14. package/src/lib/components/atoms/radio-button/RadioButton.tsx +1 -1
  15. package/src/lib/components/atoms/skeleton/Skeleton.tsx +5 -20
  16. package/src/lib/components/index.ts +0 -2
  17. package/src/lib/components/molecules/chip/Chip.tsx +51 -17
  18. package/src/lib/components/molecules/chip/chip.classes.ts +36 -14
  19. package/src/lib/components/molecules/chip/chip.enums.ts +6 -3
  20. package/src/lib/components/molecules/input/Input.tsx +34 -17
  21. package/src/lib/components/molecules/input/TextArea.tsx +2 -3
  22. package/src/lib/components/molecules/navbar-item/NavbarItem.tsx +0 -1
  23. package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx +1 -1
  24. package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx +1 -1
  25. package/src/lib/components/molecules/select/Select.tsx +24 -4
  26. package/src/lib/components/organisms/dialog/Dialog.tsx +37 -22
  27. package/src/lib/constants/colors.constants.ts +12 -5
  28. package/src/lib/enums/index.ts +1 -0
  29. package/src/lib/enums/theme.enums.ts +8 -0
  30. package/src/lib/index.ts +2 -0
  31. package/src/lib/styles/base.css +40 -0
  32. package/src/lib/styles/components.css +52 -4
  33. package/src/lib/styles/index.css +4 -753
  34. package/src/lib/styles/utilities.css +11 -3
  35. package/src/lib/styles/variables/dark-variables.css +262 -0
  36. package/src/lib/styles/variables/general-variables.css +9 -0
  37. package/src/lib/styles/variables/light-variables.css +276 -0
  38. package/src/lib/styles/variables/names-variables.css +270 -0
  39. package/src/lib/tailwind/base.presets.ts +4 -0
  40. package/src/lib/tailwind/constants/gradients.constants.ts +6 -0
  41. package/src/storybook/blocks/TypeSet.tsx +3 -3
  42. package/src/storybook/constants/gradients.constants.ts +8 -0
  43. package/src/storybook/helpers/formatGradientNames.ts +15 -0
  44. package/src/storybook/stories/atoms/Skeleton.stories.tsx +5 -5
  45. package/src/storybook/stories/components/DocsSyncTheme.tsx +20 -0
  46. package/src/storybook/stories/components/index.ts +1 -0
  47. package/src/storybook/stories/design-tokens/colors.stories.mdx +12 -0
  48. package/src/storybook/stories/design-tokens/icons.stories.mdx +2 -0
  49. package/src/storybook/stories/design-tokens/typeset.stories.mdx +2 -0
  50. package/src/storybook/stories/design-tokens/variable-spacing.stories.mdx +2 -1
  51. package/src/storybook/stories/molecules/Chip.stories.tsx +5 -0
  52. package/src/storybook/stories/molecules/Input.stories.tsx +79 -2
  53. package/src/storybook/stories/organisms/Dialog.stories.tsx +54 -28
package/src/lib/styles/index.css CHANGED
@@ -12,756 +12,7 @@
12
12
  @import 'tailwindcss/utilities';
13
13
  @import './utilities.css';
14
14
 
15
- :root {
16
- /* FONTS */
17
- --font-family-heading: theme('fontFamily.alliance-no2');
18
- --font-family-text: theme('fontFamily.inter');
19
- --display-lg-font-weight: 500;
20
- --display-lg-line-height: 120%;
21
- --display-md-font-weight: 500;
22
- --display-md-line-height: 120%;
23
- --display-sm-font-weight: 500;
24
- --display-sm-line-height: 120%;
25
- --headline-lg-font-weight: 500;
26
- --headline-md-font-weight: 500;
27
- --headline-sm-font-weight: 500;
28
-
29
- /* COLORS */
30
- --warning-surface: theme('colors.iota-warning.90');
31
- --on-warning: theme('colors.iota-warning.20');
32
- --error-surface: theme('colors.iota-error.90');
33
- --on-error: theme('colors.iota-error.20');
34
- --success-surface: theme('colors.iota-tertiary.90');
35
- --on-success: theme('colors.iota-tertiary.20');
36
- --default-surface: theme('colors.iota-primary.90');
37
- --on-default: theme('colors.iota-primary.20');
38
-
39
- /* ---------------- ATOMS ---------------- */
40
-
41
- /* BADGE */
42
- --badge-bg-color-neutral: theme('colors.iota-neutral.92');
43
- --badge-text-color-neutral: theme('colors.iota-neutral.10');
44
- --badge-border-color-neutral: theme('colors.iota-neutral.92');
45
- --badge-bg-color-primary: theme('colors.iota-primary.30');
46
- --badge-border-color-primary: theme('colors.iota-primary.30');
47
- --badge-text-color-primary: theme('colors.iota-primary.100');
48
- --badge-bg-color-primary-soft: theme('colors.iota-primary.90');
49
- --badge-text-color-primary-soft: theme('colors.iota-primary.20');
50
- --badge-border-color-soft: theme('colors.iota-primary.90');
51
-
52
- /* INFOBOX */
53
- --infobox-text-title: theme('colors.iota-neutral.10');
54
- --infobox-supporting-text: theme('colors.iota-neutral.40');
55
-
56
- /* BUTTON */
57
- --button-bg-color-primary: theme('colors.iota-primary.30');
58
- --button-bg-color-disabled-primary: theme('colors.iota-neutral.80');
59
- --button-bg-color-secondary: theme('colors.iota-neutral.90');
60
- --button-bg-color-error: theme('colors.iota-error.90');
61
- --button-border-color-outline: theme('colors.iota-neutral.50');
62
- --button-text-color-primary: theme('colors.iota-primary.100');
63
- --button-text-color-neutral: theme('colors.iota-neutral.10');
64
- --button-text-color-error: theme('colors.iota-error.20');
65
-
66
- /* BUTTON PILL */
67
- --button-pill-border-color: theme('colors.iota-neutral.70');
68
- --button-pill-text-color: theme('colors.iota-neutral.40');
69
-
70
- /* HEADER */
71
- --header-bg-color: theme('colors.iota-neutral.100');
72
- --header-text-color: theme('colors.iota-neutral.10');
73
-
74
- /* LABEL */
75
- --label-text-primary-neutral: theme('colors.iota-neutral.10');
76
- --label-text-secondary-neutral: theme('colors.iota-neutral.60');
77
-
78
- /* KEY VALUE */
79
- --key-supporting-text-color: theme('colors.iota-neutral.60');
80
- --key-value-hover-text-color: theme('colors.iota-neutral.10');
81
- --key-value-key-text-color: theme('colors.iota-neutral.40');
82
-
83
- /* CHECKBOX */
84
- --checkbox-border-color-default: theme('colors.iota-neutral.80');
85
- --checkbox-border-color-checked: theme('colors.iota-primary.30');
86
- --checkbox-border-color-disabled: theme('colors.iota-neutral.70');
87
- --checkbox-border-color-disabled-checked: theme('colors.iota-neutral.60');
88
- --checkbox-bg-color-checked: theme('colors.iota-primary.30');
89
- --checkbox-bg-color-disabled-checked: theme('colors.iota-neutral.60');
90
- --checkbox-text-color: theme('colors.iota-neutral.40');
91
- --checkbox-text-color-checked: theme('colors.white');
92
- --checkbox-label-text-color: theme('colors.iota-neutral.40');
93
-
94
- /* DIVIDER */
95
- --divider-bg-color: theme('colors.shader-neutral-light.8');
96
-
97
- /* BUTTON SEGMENT */
98
- --button-segment-text-color-default: theme('colors.iota-neutral.60');
99
- --button-segment-text-color-hover: theme('colors.iota-neutral.40');
100
- --button-segment-text-color-focused: theme('colors.iota-neutral.40');
101
- --button-segment-text-color-selected: theme('colors.iota-neutral.10');
102
- --button-segment-underline-default-color: theme('colors.shader-neutral-light.8');
103
- --button-segment-underline-hover-color: theme('colors.iota-neutral.70');
104
- --button-segment-underline-selected-color: theme('colors.iota-primary.30');
105
- --button-segment-bg-color-selected: theme('colors.iota-primary.100');
106
-
107
- /* LOADING INDICATOR */
108
- --loading-indicator-color: theme('colors.iota-primary.30');
109
-
110
- /* LIST ITEM */
111
- --list-item-color: theme('colors.iota-neutral.10');
112
- --list-item-border-color: theme('colors.shader-neutral-light.8');
113
- --list-item-highlight-bg: theme('colors.shader-primary-dark.16');
114
-
115
- /* PANEL */
116
- --panel-bg: theme('colors.iota-neutral.100');
117
- --panel-border-color: theme('colors.shader-neutral-light.8');
118
-
119
- /* RADIO BUTTON */
120
- --radio-icon-color: theme('colors.iota-neutral.40');
121
- --radio-icon-checked-color: theme('colors.iota-primary.30');
122
- --radio-icon-checked-disabled-color: theme('colors.iota-neutral.40');
123
- --radio-label-color: theme('colors.iota-neutral.40');
124
-
125
- /* SECONDARY TEXT */
126
- --secondary-text-color: theme('colors.iota-neutral.40');
127
- --secondary-text-error-color: theme('colors.iota-error.20');
128
-
129
- /* SKELETON */
130
- --skeleton-bg: theme('colors.iota-neutral.90');
131
- --skeleton-secondary-bg: theme('colors.iota-neutral.80');
132
-
133
- /* TOGGLE */
134
- --toggle-bg-active: theme('colors.iota-primary.30');
135
- --toggle-border-active: theme('colors.iota-primary.30');
136
- --toggle-bg-inactive: theme('colors.iota-primary.100');
137
- --toggle-border-inactive: theme('colors.iota-neutral.70');
138
- --toggle-bg-disabled-active: theme('colors.iota-neutral.70');
139
- --toggle-border-disabled-active: theme('colors.iota-neutral.70');
140
- --toggle-thumb-color: theme('colors.iota-neutral.60');
141
- --toggle-thumb-color-checked: theme('colors.iota-neutral.100');
142
- --toggle-label-color: theme('colors.iota-neutral.40');
143
-
144
- /* TOOLTIP */
145
- --tooltip-bg: theme('colors.iota-neutral.80');
146
- --tooltip-text-color: theme('colors.iota-neutral.10');
147
-
148
- /* VISUAL ASSET CARD */
149
- --visual-asset-placeholder-bg: theme('colors.iota-neutral.96');
150
- --visual-asset-placeholder-icon: theme('colors.iota-neutral.40');
151
- --visual-asset-title-color: theme('colors.iota-neutral.100');
152
- --visual-asset-icon-color: theme('colors.iota-neutral.100');
153
-
154
- /* ---------------- MOLECULES ---------------- */
155
-
156
- /* ACCOUNT */
157
- --account-title-color: theme('colors.iota-neutral.10');
158
- --account-icon-color: theme('colors.iota-neutral.40');
159
- --account-check-active-color: theme('colors.iota-primary.30');
160
- --account-check-inactive-color: theme('colors.iota-neutral.40');
161
-
162
- /* ADDRESS */
163
- --address-text-color: theme('colors.iota-neutral.40');
164
-
165
- /* CARD */
166
- --card-filled-bg: theme('colors.iota-neutral.96');
167
- --card-image-bg-solid: theme('colors.iota-neutral.96');
168
- --card-image-bg-white: theme('colors.iota-neutral.100');
169
- --card-action-link-color: theme('colors.iota-neutral.10');
170
- --card-action-title-color: theme('colors.iota-neutral.10');
171
- --card-action-subtitle-color: theme('colors.iota-neutral.60');
172
- --card-body-title-color: theme('colors.iota-neutral.10');
173
- --card-body-subtitle-color: theme('colors.iota-neutral.40');
174
-
175
- /* CHIP */
176
- --chip-bg-selected: theme('colors.iota-primary.90');
177
- --chip-border-default: theme('colors.iota-neutral.70');
178
- --chip-text-default: theme('colors.iota-neutral.40');
179
- --chip-text-selected: theme('colors.iota-neutral.10');
180
- --chip-focus-ring: theme('colors.iota-primary.30');
181
-
182
- /* DISPLAY STATS */
183
- --display-stats-bg-default: theme('colors.iota-neutral.96');
184
- --display-stats-bg-highlight: theme('colors.iota-primary.30');
185
- --display-stats-bg-secondary: theme('colors.iota-secondary.90');
186
-
187
- --display-stats-text-default: theme('colors.iota-neutral.10');
188
- --display-stats-text-highlight: theme('colors.iota-neutral.100');
189
- --display-stats-text-secondary: theme('colors.iota-neutral.10');
190
-
191
- --display-stats-icon-color: theme('colors.iota-neutral.10');
192
- --display-stats-copy-icon-color: theme('colors.iota-neutral.60');
193
-
194
- /* DROPDOWN */
195
- --dropdown-bg: theme('colors.iota-neutral.100');
196
- --dropdown-border-color: theme('colors.iota-neutral.80');
197
-
198
- /* INPUT */
199
- --input-text-color: theme('colors.iota-neutral.10');
200
- --input-placeholder-color: rgba(84, 94, 110, 0.4); /* neutral.40 with 40% opacity */
201
- --input-label-color: theme('colors.iota-neutral.40');
202
- --input-border-color: theme('colors.iota-neutral.80');
203
- --input-border-hover-color: theme('colors.iota-neutral.50');
204
- --input-border-error-color: theme('colors.iota-error.30');
205
- --input-border-focus-color: theme('colors.iota-primary.30');
206
- --input-caret-color: theme('colors.iota-primary.30');
207
- --input-icon-color: theme('colors.iota-neutral.10');
208
- --input-copy-icon-color: theme('colors.iota-neutral.60');
209
- --input-visibility-bar-color: rgba(227, 234, 246, 0.6); /* neutral.92 with 60% opacity */
210
-
211
- /* NAVBAR ITEM */
212
- --navbar-item-icon-color: theme('colors.iota-neutral.40');
213
- --navbar-item-icon-selected-color: theme('colors.iota-neutral.10');
214
- --navbar-item-label-color: theme('colors.iota-neutral.60');
215
- --navbar-item-label-selected-color: theme('colors.iota-neutral.10');
216
-
217
- /* SEARCH */
218
- --search-text-color: theme('colors.iota-neutral.10');
219
- --search-placeholder-color: theme('colors.iota-neutral.40');
220
- --search-border-color: theme('colors.iota-neutral.70');
221
- --search-bg-color-filled: theme('colors.iota-neutral.92');
222
- --search-suggestion-bg-color: theme('colors.iota-neutral.100');
223
- --search-selected-index-bg-color: theme('colors.shader-primary-dark.16');
224
-
225
- /* SEGMENTED BUTTON */
226
- --segmented-filled-bg-color: theme('colors.iota-neutral.96');
227
- --segmented-outlined-border-color: theme('colors.iota-neutral.70');
228
-
229
- /* SELECT */
230
- --select-border-color: theme('colors.iota-neutral.80');
231
- --select-border-hover-color: theme('colors.iota-neutral.50');
232
- --select-border-focus-color: theme('colors.iota-primary.30');
233
- --select-border-error-color: theme('colors.iota-error.30');
234
- --select-icon-color: theme('colors.iota-neutral.10');
235
- --select-label-color: theme('colors.iota-neutral.10');
236
-
237
- /* TABLE CELL */
238
- --table-cell-supporting-label-color: theme('colors.iota-neutral.60');
239
- --table-cell-border-color: theme('colors.shader-neutral-light.8');
240
-
241
- /* TABLE HEADER CELL */
242
- --table-header-text-color: theme('colors.iota-neutral.10');
243
-
244
- /* TITLE */
245
- --title-main-color: theme('colors.iota-neutral.10');
246
- --title-subtitle-color: theme('colors.iota-neutral.60');
247
- --title-icon-color: theme('colors.iota-neutral.60');
248
-
249
- /* ---------------- ORGANISMS ---------------- */
250
-
251
- /* ACCORDION */
252
- --accordion-bg: theme('colors.iota-neutral.100');
253
- --accordion-icon-color: theme('colors.iota-neutral.10');
254
- --accordion-border-color: theme('colors.shader-neutral-light.8');
255
-
256
- /* DIALOG */
257
- --dialog-content-bg: theme('colors.iota-primary.100');
258
- --dialog-title-color: theme('colors.iota-neutral.10');
259
- --dialog-body-color: theme('colors.iota-neutral.40');
260
-
261
- /* NAVBAR */
262
- --navbar-icon-color: theme('colors.iota-neutral.10');
263
- --navbar-slideout-bg: theme('colors.iota-neutral.100');
264
-
265
- /* TABLE */
266
- --table-text-color: theme('colors.iota-neutral.40');
267
-
268
- /* DIALOG */
269
- --dialog-outline: none;
270
- --dialog-overlay-bg: theme('colors.shader-neutral-light.48');
271
- }
272
-
273
- :root.dark {
274
- /* COLORS */
275
- --warning-surface: theme('colors.iota-warning.10');
276
- --on-warning: theme('colors.iota-warning.90');
277
- --error-surface: theme('colors.iota-error.10');
278
- --on-error: theme('colors.iota-error.90');
279
- --success-surface: theme('colors.iota-tertiary.10');
280
- --on-success: theme('colors.iota-tertiary.90');
281
- --default-surface: theme('colors.iota-primary.10');
282
- --on-default: theme('colors.iota-neutral.90');
283
-
284
- /* ---------------- ATOMS ---------------- */
285
-
286
- /* BADGE */
287
- --badge-bg-color-neutral: theme('colors.iota-neutral.12');
288
- --badge-text-color-neutral: theme('colors.iota-neutral.92');
289
- --badge-border-color-neutral: theme('colors.iota-neutral.12');
290
- --badge-bg-color-primary: theme('colors.iota-primary.30');
291
- --badge-border-color-primary: theme('colors.iota-primary.30');
292
- --badge-text-color-primary: theme('colors.iota-neutral.100');
293
- --badge-bg-color-primary-soft: theme('colors.iota-primary.10');
294
- --badge-text-color-primary-soft: theme('colors.iota-primary.90');
295
- --badge-border-color-soft: theme('colors.iota-primary.10');
296
-
297
- /* INFOBOX */
298
- --infobox-text-title: theme('colors.iota-neutral.92');
299
- --infobox-supporting-text: theme('colors.iota-neutral.60');
300
-
301
- /* BUTTON */
302
- --button-bg-color-primary: theme('colors.iota-primary.30');
303
- --button-bg-color-disabled-primary: theme('colors.iota-neutral.30');
304
- --button-bg-color-secondary: theme('colors.iota-neutral.20');
305
- --button-bg-color-error: theme('colors.iota-error.20');
306
- --button-border-color-outline: theme('colors.iota-neutral.60');
307
- --button-text-color-primary: theme('colors.iota-primary.100');
308
- --button-text-color-neutral: theme('colors.iota-neutral.92');
309
- --button-text-color-error: theme('colors.iota-error.90');
310
-
311
- /* BUTTON PILL */
312
- --button-pill-border-color: theme('colors.iota-neutral.40');
313
- --button-pill-text-color: theme('colors.iota-neutral.60');
314
-
315
- /* HEADER */
316
- --header-bg-color: theme('colors.iota-neutral.6');
317
- --header-text-color: theme('colors.iota-neutral.92');
318
-
319
- /* LABEL */
320
- --label-text-primary-neutral: theme('colors.iota-neutral.92');
321
- --label-text-secondary-neutral: theme('colors.iota-neutral.40');
322
-
323
- /* KEY VALUE */
324
- --key-supporting-text-color: theme('colors.iota-neutral.40');
325
- --key-value-hover-text-color: theme('colors.iota-neutral.92');
326
- --key-value-key-text-color: theme('colors.iota-neutral.60');
327
-
328
- /* CHECKBOX */
329
- --checkbox-border-color-default: theme('colors.iota-neutral.20');
330
- --checkbox-border-color-checked: theme('colors.iota-primary.30');
331
- --checkbox-border-color-disabled: theme('colors.iota-neutral.30');
332
- --checkbox-border-color-disabled-checked: theme('colors.iota-primary.30');
333
- --checkbox-bg-color-checked: theme('colors.iota-primary.30');
334
- --checkbox-bg-color-disabled-checked: theme('colors.iota-neutral.40');
335
- --checkbox-text-color: theme('colors.iota-neutral.60');
336
- --checkbox-text-color-checked: theme('colors.white');
337
- --checkbox-label-text-color: theme('colors.iota-neutral.60');
338
-
339
- /* DIVIDER */
340
- --divider-bg-color: theme('colors.shader-neutral-dark.8');
341
-
342
- /* BUTTON SEGMENT */
343
- --button-segment-text-color-default: theme('colors.iota-neutral.40');
344
- --button-segment-text-color-hover: theme('colors.iota-neutral.60');
345
- --button-segment-text-color-focused: theme('colors.iota-neutral.60');
346
- --button-segment-text-color-selected: theme('colors.iota-neutral.92');
347
- --button-segment-underline-default-color: theme('colors.shader-neutral-dark.8');
348
- --button-segment-underline-hover-color: theme('colors.iota-neutral.40');
349
- --button-segment-underline-selected-color: theme('colors.iota-primary.80');
350
- --button-segment-bg-color-selected: theme('colors.iota-neutral.6');
351
-
352
- /* LOADING INDICATOR */
353
- --loading-indicator-color: theme('colors.iota-primary.80');
354
-
355
- /* LIST ITEM */
356
- --list-item-color: theme('colors.iota-neutral.92');
357
- --list-item-border-color: theme('colors.shader-neutral-dark.8');
358
- --list-item-highlight-bg: theme('colors.shader-inverted-dark.16');
359
-
360
- /* PANEL */
361
- --panel-bg: theme('colors.iota-neutral.6');
362
- --panel-border-color: theme('colors.shader-neutral-dark.8');
363
-
364
- /* RADIO BUTTON */
365
- --radio-icon-color: theme('colors.iota-neutral.60');
366
- --radio-icon-checked-color: theme('colors.iota-primary.30');
367
- --radio-icon-checked-disabled-color: theme('colors.iota-neutral.40');
368
- --radio-label-color: theme('colors.iota-neutral.60');
369
-
370
- /* SECONDARY TEXT */
371
- --secondary-text-color: theme('colors.iota-neutral.60');
372
- --secondary-text-error-color: theme('colors.iota-error.90');
373
-
374
- /* SKELETON */
375
- --skeleton-bg: theme('colors.iota-neutral.12');
376
- --skeleton-secondary-bg: theme('colors.iota-neutral.10');
377
-
378
- /* TOGGLE */
379
- --toggle-bg-active: theme('colors.iota-primary.30');
380
- --toggle-border-active: theme('colors.iota-primary.30');
381
- --toggle-bg-inactive: theme('colors.iota-neutral.6');
382
- --toggle-border-inactive: theme('colors.iota-neutral.40');
383
- --toggle-bg-disabled-active: theme('colors.iota-neutral.70');
384
- --toggle-border-disabled-active: theme('colors.iota-neutral.70');
385
- --toggle-thumb-color: theme('colors.iota-neutral.60');
386
- --toggle-thumb-color-checked: theme('colors.iota-neutral.100');
387
- --toggle-label-color: theme('colors.iota-neutral.60');
388
-
389
- /* TOOLTIP */
390
- --tooltip-bg: theme('colors.iota-neutral.30');
391
- --tooltip-text-color: theme('colors.iota-neutral.92');
392
-
393
- /* VISUAL ASSET CARD */
394
- --visual-asset-placeholder-bg: theme('colors.iota-neutral.10');
395
- --visual-asset-placeholder-icon: theme('colors.iota-neutral.60');
396
- --visual-asset-title-color: theme('colors.iota-neutral.100');
397
- --visual-asset-icon-color: theme('colors.iota-neutral.100');
398
-
399
- /* ---------------- MOLECULES ---------------- */
400
-
401
- /* ACCOUNT */
402
- --account-title-color: theme('colors.iota-neutral.92');
403
- --account-icon-color: theme('colors.iota-neutral.60');
404
- --account-check-active-color: theme('colors.iota-primary.80');
405
- --account-check-inactive-color: theme('colors.iota-neutral.60');
406
-
407
- /* ADDRESS */
408
- --address-text-color: theme('colors.iota-neutral.60');
409
-
410
- /* CARD */
411
- --card-filled-bg: theme('colors.iota-neutral.10');
412
- --card-image-bg-solid: theme('colors.iota-neutral.10');
413
- --card-image-bg-white: theme('colors.iota-neutral.6');
414
- --card-action-link-color: theme('colors.iota-neutral.92');
415
- --card-action-title-color: theme('colors.iota-neutral.92');
416
- --card-action-subtitle-color: theme('colors.iota-neutral.40');
417
- --card-body-title-color: theme('colors.iota-neutral.92');
418
- --card-body-subtitle-color: theme('colors.iota-neutral.60');
419
-
420
- /* CHIP */
421
- --chip-bg-selected: theme('colors.iota-primary.10');
422
- --chip-border-default: theme('colors.iota-neutral.40');
423
- --chip-text-default: theme('colors.iota-neutral.60');
424
- --chip-text-selected: theme('colors.iota-neutral.92');
425
- --chip-focus-ring: theme('colors.iota-primary.80');
426
-
427
- /* DISPLAY STATS */
428
- --display-stats-bg-default: theme('colors.iota-neutral.10');
429
- --display-stats-bg-highlight: theme('colors.iota-primary.80');
430
- --display-stats-bg-secondary: theme('colors.iota-secondary.10');
431
-
432
- --display-stats-text-default: theme('colors.iota-neutral.92');
433
- --display-stats-text-highlight: theme('colors.iota-primary.10');
434
- --display-stats-text-secondary: theme('colors.iota-neutral.92');
435
-
436
- --display-stats-icon-color: theme('colors.iota-neutral.92');
437
- --display-stats-copy-icon-color: theme('colors.iota-neutral.40');
438
-
439
- /* DROPDOWN */
440
- --dropdown-bg: theme('colors.iota-neutral.6');
441
- --dropdown-border-color: theme('colors.iota-neutral.20');
442
-
443
- /* INPUT */
444
- --input-text-color: theme('colors.iota-neutral.92');
445
- --input-placeholder-color: rgba(136, 146, 161, 0.4); /* neutral.60 with 40% opacity */
446
- --input-label-color: theme('colors.iota-neutral.60');
447
- --input-border-color: theme('colors.iota-neutral.20');
448
- --input-border-hover-color: theme('colors.iota-neutral.60');
449
- --input-border-error-color: theme('colors.iota-error.80');
450
- --input-border-focus-color: theme('colors.iota-primary.80');
451
- --input-caret-color: theme('colors.iota-primary.80');
452
- --input-icon-color: theme('colors.iota-neutral.92');
453
- --input-copy-icon-color: theme('colors.iota-neutral.40');
454
- --input-visibility-bar-color: rgba(23, 29, 38, 0.6); /* neutral.10 with 60% opacity */
455
-
456
- /* NAVBAR ITEM */
457
- --navbar-item-icon-color: theme('colors.iota-neutral.60');
458
- --navbar-item-icon-selected-color: theme('colors.iota-neutral.92');
459
- --navbar-item-label-color: theme('colors.iota-neutral.40');
460
- --navbar-item-label-selected-color: theme('colors.iota-neutral.92');
461
-
462
- /* SEARCH */
463
- --search-text-color: theme('colors.iota-neutral.92');
464
- --search-placeholder-color: theme('colors.iota-neutral.60');
465
- --search-border-color: theme('colors.iota-neutral.40');
466
- --search-bg-color-filled: theme('colors.iota-neutral.12');
467
- --search-suggestion-bg-color: theme('colors.iota-neutral.10');
468
- --search-selected-index-bg-color: theme('colors.shader-inverted-dark.16');
469
-
470
- /* SEGMENTED BUTTON */
471
- --segmented-filled-bg-color: theme('colors.iota-neutral.10');
472
- --segmented-outlined-border-color: theme('colors.iota-neutral.40');
473
-
474
- /* SELECT */
475
- --select-border-color: theme('colors.iota-neutral.20');
476
- --select-border-hover-color: theme('colors.iota-neutral.60');
477
- --select-border-focus-color: theme('colors.iota-primary.80');
478
- --select-border-error-color: theme('colors.iota-error.80');
479
- --select-icon-color: theme('colors.iota-neutral.92');
480
- --select-label-color: theme('colors.iota-neutral.92');
481
-
482
- /* TABLE CELL */
483
- --table-cell-supporting-label-color: theme('colors.iota-neutral.40');
484
- --table-cell-border-color: theme('colors.shader-neutral-dark.8');
485
-
486
- /* TABLE HEADER CELL */
487
- --table-header-text-color: theme('colors.iota-neutral.92');
488
-
489
- /* TITLE */
490
- --title-main-color: theme('colors.iota-neutral.92');
491
- --title-subtitle-color: theme('colors.iota-neutral.40');
492
- --title-icon-color: theme('colors.iota-neutral.40');
493
- /* ---------------- ORGANISMS ---------------- */
494
-
495
- /* ACCORDION */
496
- --accordion-bg: theme('colors.iota-neutral.6');
497
- --accordion-icon-color: theme('colors.iota-neutral.92');
498
- --accordion-border-color: theme('colors.shader-neutral-dark.8');
499
-
500
- /* DIALOG */
501
- --dialog-content-bg: theme('colors.iota-neutral.6');
502
- --dialog-title-color: theme('colors.iota-neutral.92');
503
- --dialog-body-color: theme('colors.iota-neutral.60');
504
-
505
- /* NAVBAR */
506
- --navbar-icon-color: theme('colors.iota-neutral.92');
507
- --navbar-slideout-bg: theme('colors.iota-neutral.6');
508
-
509
- /* TABLE */
510
- --table-text-color: theme('colors.iota-neutral.60');
511
-
512
- /* DIALOG */
513
- --dialog-outline: none;
514
- --dialog-overlay-bg: theme('colors.shader-neutral-light.48');
515
- }
516
-
517
- :root.names {
518
- /* FONTS */
519
- --font-family-heading: theme('fontFamily.roboto-flex');
520
- --font-family-text: theme('fontFamily.inter');
521
- --display-lg-font-weight: 700;
522
- --display-lg-line-height: 100%;
523
- --display-md-font-weight: 700;
524
- --display-md-line-height: 100%;
525
- --display-sm-font-weight: 700;
526
- --display-sm-line-height: 100%;
527
- --headline-lg-font-weight: 600;
528
- --headline-md-font-weight: 600;
529
- --headline-sm-font-weight: 600;
530
-
531
- /* COLORS */
532
- --warning-surface: theme('colors.names-warning.20');
533
- --on-warning: theme('colors.names-warning.90');
534
- --error-surface: theme('colors.names-error.20');
535
- --on-error: theme('colors.names-error.90');
536
- --success-surface: theme('colors.names-tertiary.20');
537
- --on-success: theme('colors.names-tertiary.90');
538
- --default-surface: theme('colors.names-primary.20');
539
- --on-default: theme('colors.names-neutral.90');
540
-
541
- /* ---------------- ATOMS ---------------- */
542
-
543
- /* BADGE */
544
- --badge-bg-color-neutral: theme('colors.names-neutral.12');
545
- --badge-text-color-neutral: theme('colors.names-neutral.92');
546
- --badge-border-color-neutral: theme('colors.names-neutral.12');
547
- --badge-bg-color-primary: theme('colors.names-primary.30');
548
- --badge-border-color-primary: theme('colors.names-primary.30');
549
- --badge-text-color-primary: theme('colors.names-neutral.100');
550
- --badge-bg-color-primary-soft: theme('colors.names-primary.20');
551
- --badge-text-color-primary-soft: theme('colors.names-primary.90');
552
- --badge-border-color-soft: theme('colors.names-primary.20');
553
-
554
- /* INFOBOX */
555
- --infobox-text-title: theme('colors.names-neutral.92');
556
- --infobox-supporting-text: theme('colors.names-neutral.92');
557
-
558
- /* BUTTON */
559
- --button-bg-color-primary: theme('colors.names-primary.30');
560
- --button-bg-color-disabled-primary: theme('colors.names-neutral.30');
561
- --button-bg-color-secondary: theme('colors.names-neutral.20');
562
- --button-bg-color-error: theme('colors.names-error.20');
563
- --button-border-color-outline: theme('colors.names-neutral.60');
564
- --button-text-color-primary: theme('colors.names-primary.100');
565
- --button-text-color-neutral: theme('colors.names-neutral.92');
566
- --button-text-color-error: theme('colors.names-error.90');
567
-
568
- /* BUTTON PILL */
569
- --button-pill-border-color: theme('colors.names-neutral.40');
570
- --button-pill-text-color: theme('colors.names-neutral.60');
571
-
572
- /* HEADER */
573
- --header-bg-color: theme('colors.names-neutral.6');
574
- --header-text-color: theme('colors.names-neutral.92');
575
-
576
- /* LABEL */
577
- --label-text-primary-neutral: theme('colors.names-neutral.92');
578
- --label-text-secondary-neutral: theme('colors.names-neutral.50');
579
-
580
- /* KEY VALUE */
581
- --key-supporting-text-color: theme('colors.names-neutral.50');
582
- --key-value-hover-text-color: theme('colors.iota-neutral.92');
583
- --key-value-key-text-color: theme('colors.names-neutral.70');
584
-
585
- /* CHECKBOX */
586
- --checkbox-border-color-default: theme('colors.names-neutral.20');
587
- --checkbox-border-color-checked: theme('colors.names-primary.30');
588
- --checkbox-border-color-disabled: theme('colors.names-neutral.30');
589
- --checkbox-border-color-disabled-checked: theme('colors.names-neutral.50');
590
- --checkbox-bg-color-checked: theme('colors.names-primary.30');
591
- --checkbox-bg-color-disabled-checked: theme('colors.names-neutral.50');
592
- --checkbox-text-color: theme('colors.names-neutral.70');
593
- --checkbox-text-color-checked: theme('colors.names-neutral.100');
594
- --checkbox-label-text-color: theme('colors.names-neutral.70');
595
-
596
- /* DIVIDER */
597
- --divider-bg-color: theme('colors.shader-neutral-dark.8');
598
-
599
- /* BUTTON SEGMENT */
600
- --button-segment-text-color-default: theme('colors.names-neutral.50');
601
- --button-segment-text-color-hover: theme('colors.names-neutral.70');
602
- --button-segment-text-color-focused: theme('colors.names-neutral.70');
603
- --button-segment-text-color-selected: theme('colors.names-neutral.92');
604
- --button-segment-underline-default-color: theme('colors.shader-neutral-dark.8');
605
- --button-segment-underline-hover-color: theme('colors.names-neutral.40');
606
- --button-segment-underline-selected-color: theme('colors.names-primary.80');
607
- --button-segment-bg-color-selected: theme('colors.names-neutral.6');
608
-
609
- /* LOADING INDICATOR */
610
- --loading-indicator-color: theme('colors.names-primary.80');
611
-
612
- /* LIST ITEM */
613
- --list-item-color: theme('colors.names-neutral.92');
614
- --list-item-border-color: theme('colors.shader-neutral-dark.8');
615
- --list-item-highlight-bg: theme('colors.shader-primary-dark.12');
616
-
617
- /* PANEL */
618
- --panel-bg: theme('colors.names-neutral.6');
619
- --panel-border-color: theme('colors.shader-neutral-dark.8');
620
-
621
- /* RADIO BUTTON */
622
- --radio-icon-color: theme('colors.names-neutral.70');
623
- --radio-icon-checked-color: theme('colors.names-primary.30');
624
- --radio-icon-checked-disabled-color: theme('colors.names-neutral.70');
625
- --radio-label-color: theme('colors.names-neutral.70');
626
-
627
- /* SECONDARY TEXT */
628
- --secondary-text-color: theme('colors.names-neutral.70');
629
- --secondary-text-error-color: theme('colors.names-error.80');
630
-
631
- /* SKELETON */
632
- --skeleton-bg: theme('colors.names-neutral.12');
633
- --skeleton-secondary-bg: theme('colors.names-neutral.10');
634
-
635
- /* TOGGLE */
636
- --toggle-bg-active: theme('colors.names-primary.30');
637
- --toggle-border-active: theme('colors.names-primary.30');
638
- --toggle-bg-inactive: theme('colors.names-neutral.6');
639
- --toggle-border-inactive: theme('colors.names-neutral.50');
640
- --toggle-bg-disabled-active: theme('colors.names-neutral.50');
641
- --toggle-border-disabled-active: theme('colors.names-neutral.50');
642
- --toggle-thumb-color: theme('colors.names-neutral.50');
643
- --toggle-thumb-color-checked: theme('colors.names-neutral.6');
644
- --toggle-label-color: theme('colors.names-neutral.70');
645
-
646
- /* TOOLTIP */
647
- --tooltip-bg: theme('colors.names-neutral.0');
648
- --tooltip-text-color: theme('colors.names-neutral.100');
649
-
650
- /* VISUAL ASSET CARD */
651
- --visual-asset-placeholder-bg: theme('colors.names-neutral.10');
652
- --visual-asset-placeholder-icon: theme('colors.names-neutral.60');
653
- --visual-asset-title-color: theme('colors.names-neutral.100');
654
- --visual-asset-icon-color: theme('colors.names-neutral.100');
655
-
656
- /* ACCOUNT */
657
- --account-title-color: theme('colors.names-neutral.92');
658
- --account-icon-color: theme('colors.names-neutral.70');
659
- --account-check-active-color: theme('colors.names-primary.80');
660
- --account-check-inactive-color: theme('colors.names-neutral.60');
661
-
662
- /* ADDRESS */
663
- --address-text-color: theme('colors.names-neutral.70');
664
-
665
- /* CARD */
666
- --card-filled-bg: theme('colors.names-neutral.10');
667
- --card-image-bg-solid: theme('colors.names-neutral.10');
668
- --card-image-bg-white: theme('colors.names-neutral.6');
669
- --card-action-link-color: theme('colors.names-neutral.92');
670
- --card-action-title-color: theme('colors.names-neutral.92');
671
- --card-action-subtitle-color: theme('colors.names-neutral.40');
672
- --card-body-title-color: theme('colors.names-neutral.92');
673
- --card-body-subtitle-color: theme('colors.names-neutral.70');
674
-
675
- /* CHIP */
676
- --chip-bg-selected: theme('colors.names-primary.20');
677
- --chip-border-default: theme('colors.names-neutral.20');
678
- --chip-text-default: theme('colors.names-neutral.70');
679
- --chip-text-selected: theme('colors.names-neutral.92');
680
- --chip-focus-ring: theme('colors.names-primary.80');
681
-
682
- /* DISPLAY STATS */
683
- --display-stats-bg-default: theme('colors.names-neutral.10');
684
- --display-stats-bg-highlight: theme('colors.names-primary.80');
685
- --display-stats-bg-secondary: theme('colors.names-secondary.10');
686
- --display-stats-text-default: theme('colors.names-neutral.92');
687
- --display-stats-text-highlight: theme('colors.names-primary.10');
688
- --display-stats-text-secondary: theme('colors.names-neutral.92');
689
- --display-stats-icon-color: theme('colors.names-neutral.92');
690
- --display-stats-copy-icon-color: theme('colors.names-neutral.40');
691
-
692
- /* DROPDOWN */
693
- --dropdown-bg: theme('colors.names-neutral.6');
694
- --dropdown-border-color: theme('colors.names-neutral.20');
695
-
696
- /* INPUT */
697
- --input-text-color: theme('colors.names-neutral.92');
698
- --input-placeholder-color: rgba(136, 146, 161, 0.4); /* neutral.60 with 40% opacity */
699
- --input-label-color: theme('colors.names-neutral.60');
700
- --input-border-color: theme('colors.names-neutral.20');
701
- --input-border-hover-color: theme('colors.names-neutral.60');
702
- --input-border-error-color: theme('colors.names-error.80');
703
- --input-border-focus-color: theme('colors.names-primary.80');
704
- --input-caret-color: theme('colors.names-primary.80');
705
- --input-icon-color: theme('colors.names-neutral.92');
706
- --input-copy-icon-color: theme('colors.names-neutral.40');
707
- --input-visibility-bar-color: rgba(24, 27, 49, 0.6); /* neutral.10 with 60% opacity */
708
-
709
- /* NAVBAR ITEM */
710
- --navbar-item-icon-color: theme('colors.names-neutral.70');
711
- --navbar-item-icon-selected-color: theme('colors.names-neutral.92');
712
- --navbar-item-label-color: theme('colors.names-neutral.50');
713
- --navbar-item-label-selected-color: theme('colors.names-neutral.92');
714
-
715
- /* SEARCH */
716
- --search-text-color: theme('colors.names-neutral.92');
717
- --search-placeholder-color: theme('colors.names-neutral.70');
718
- --search-border-color: theme('colors.names-neutral.40');
719
- --search-bg-color-filled: theme('colors.names-neutral.12');
720
- --search-suggestion-bg-color: theme('colors.names-neutral.12');
721
- --search-selected-index-bg-color: theme('colors.shader-inverted-dark.16');
722
-
723
- /* SEGMENTED BUTTON */
724
- --segmented-filled-bg-color: theme('colors.names-neutral.10');
725
- --segmented-outlined-border-color: theme('colors.names-neutral.40');
726
-
727
- /* SELECT */
728
- --select-border-color: theme('colors.names-neutral.20');
729
- --select-border-hover-color: theme('colors.names-neutral.60');
730
- --select-border-focus-color: theme('colors.names-primary.80');
731
- --select-border-error-color: theme('colors.names-error.80');
732
- --select-icon-color: theme('colors.names-neutral.92');
733
- --select-label-color: theme('colors.names-neutral.92');
734
-
735
- /* TABLE CELL */
736
- --table-cell-supporting-label-color: theme('colors.names-neutral.40');
737
- --table-cell-border-color: theme('colors.shader-neutral-dark.8');
738
-
739
- /* TABLE HEADER CELL */
740
- --table-header-text-color: theme('colors.names-neutral.92');
741
-
742
- /* TITLE */
743
- --title-main-color: theme('colors.names-neutral.92');
744
- --title-subtitle-color: theme('colors.names-neutral.50');
745
- --title-icon-color: theme('colors.names-neutral.50');
746
-
747
- /* ---------------- ORGANISMS ---------------- */
748
-
749
- /* ACCORDION */
750
- --accordion-bg: theme('colors.names-neutral.6');
751
- --accordion-icon-color: theme('colors.names-neutral.92');
752
- --accordion-border-color: theme('colors.shader-neutral-dark.8');
753
-
754
- /* DIALOG */
755
- --dialog-content-bg: theme('colors.names-neutral.6');
756
- --dialog-title-color: theme('colors.names-neutral.92');
757
- --dialog-body-color: theme('colors.names-neutral.70');
758
- --dialog-outline: 1px solid theme('colors.names-neutral.20');
759
- --dialog-overlay-bg: theme('colors.names-neutral.0/0.72');
760
-
761
- /* NAVBAR */
762
- --navbar-icon-color: theme('colors.names-neutral.92');
763
- --navbar-slideout-bg: theme('colors.names-neutral.6');
764
-
765
- /* TABLE */
766
- --table-text-color: theme('colors.names-neutral.70');
767
- }
15
+ @import './variables/general-variables.css';
16
+ @import './variables/light-variables.css';
17
+ @import './variables/dark-variables.css';
18
+ @import './variables/names-variables.css';