@rovula/ui 0.0.82 → 0.1.0

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 (19) hide show
  1. package/dist/cjs/bundle.css +2 -1
  2. package/dist/esm/bundle.css +2 -1
  3. package/dist/src/theme/global.css +1853 -309
  4. package/package.json +4 -2
  5. package/src/components/Button/Button.tsx +7 -7
  6. package/src/theme/THEME_MAPPING.md +231 -0
  7. package/src/theme/global.css +2 -1
  8. package/src/theme/themes/skyller/baseline.css +6 -0
  9. package/src/theme/themes/skyller/color.css +79 -0
  10. package/src/theme/themes/skyller/components/action-button.css +81 -0
  11. package/src/theme/themes/skyller/palette.css +143 -0
  12. package/src/theme/themes/skyller/state.css +94 -0
  13. package/src/theme/themes/skyller/transparent.css +94 -0
  14. package/src/theme/themes/skyller/typography.css +30 -0
  15. package/src/theme/themes/variable.css +1057 -0
  16. package/src/theme/themes/xspector/color.css +50 -48
  17. package/src/theme/themes/xspector/palette.css +141 -121
  18. package/src/theme/themes/xspector/state.css +83 -78
  19. package/src/theme/themes/xspector/transparent.css +93 -68
package/src/theme/themes/xspector/transparent.css CHANGED
@@ -1,68 +1,93 @@
1
- :root[data-theme="xspector"]{
2
- --main-transparency-primary-8: rgba(221 205 0 / 0.08);
3
- --main-transparency-primary-12: rgba(221 205 0 / 0.12);
4
- --main-transparency-primary-16: rgba(221 205 0 / 0.16);
5
- --main-transparency-primary-24: rgba(221 205 0 / 0.24);
6
- --main-transparency-primary-32: rgba(221 205 0 / 0.32);
7
- --main-transparency-primary-48: rgba(221 205 0 / 0.48);
8
- --main-transparency-secondary-8: rgba(158 158 158 / 0.08);
9
- --main-transparency-secondary-12: rgba(158 158 158 / 0.12);
10
- --main-transparency-secondary-16: rgba(158 158 158 / 0.16);
11
- --main-transparency-secondary-24: rgba(158 158 158 / 0.24);
12
- --main-transparency-secondary-32: rgba(158 158 158 / 0.32);
13
- --main-transparency-secondary-48: rgba(158 158 158 / 0.48);
14
- --main-transparency-tertiary-8: rgba(173 202 214 / 0.08);
15
- --main-transparency-tertiary-12: rgba(173 202 214 / 0.12);
16
- --main-transparency-tertiary-16: rgba(173 202 214 / 0.16);
17
- --main-transparency-tertiary-24: rgba(173 202 214 / 0.24);
18
- --main-transparency-tertiary-32: rgba(173 202 214 / 0.32);
19
- --main-transparency-tertiary-48: rgba(173 202 214 / 0.48);
20
- --other-transparency-info-8: rgba(41 152 255 / 0.08);
21
- --other-transparency-info-12: rgba(41 152 255 / 0.12);
22
- --other-transparency-info-16: rgba(41 152 255 / 0.16);
23
- --other-transparency-info-24: rgba(41 152 255 / 0.24);
24
- --other-transparency-info-32: rgba(41 152 255 / 0.32);
25
- --other-transparency-info-48: rgba(41 152 255 / 0.48);
26
- --other-transparency-success-8: rgba(84 214 44 / 0.08);
27
- --other-transparency-success-12: rgba(84 214 44 / 0.12);
28
- --other-transparency-success-16: rgba(84 214 44 / 0.16);
29
- --other-transparency-success-24: rgba(84 214 44 / 0.24);
30
- --other-transparency-success-32: rgba(84 214 44 / 0.32);
31
- --other-transparency-success-48: rgba(84 214 44 / 0.48);
32
- --other-transparency-warning-8: rgba(255 193 7 / 0.08);
33
- --other-transparency-warning-12: rgba(255 193 7 / 0.12);
34
- --other-transparency-warning-16: rgba(255 193 7 / 0.16);
35
- --other-transparency-warning-24: rgba(255 193 7 / 0.24);
36
- --other-transparency-warning-32: rgba(255 193 7 / 0.32);
37
- --other-transparency-warning-48: rgba(255 193 7 / 0.48);
38
- --other-transparency-error-8: rgba(255 72 66 / 0.08);
39
- --other-transparency-error-12: rgba(255 72 66 / 0.12);
40
- --other-transparency-error-16: rgba(255 72 66 / 0.16);
41
- --other-transparency-error-24: rgba(255 72 66 / 0.24);
42
- --other-transparency-error-32: rgba(255 72 66 / 0.32);
43
- --other-transparency-error-48: rgba(255 72 66 / 0.48);
44
- --other-transparency-grey-8: rgba(158 158 158 / 0.08);
45
- --other-transparency-grey-12: rgba(158 158 158 / 0.12);
46
- --other-transparency-grey-16: rgba(158 158 158 / 0.16);
47
- --other-transparency-grey-24: rgba(158 158 158 / 0.24);
48
- --other-transparency-grey-32: rgba(158 158 158 / 0.32);
49
- --other-transparency-grey-48: rgba(158 158 158 / 0.48);
50
- --other-transparency-grey2-8: rgba(145 158 171 / 0.08);
51
- --other-transparency-grey2-12: rgba(145 158 171 / 0.12);
52
- --other-transparency-grey2-16: rgba(145 158 171 / 0.16);
53
- --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
54
- --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
55
- --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
56
- --other-transparency-white-08: rgba(255 255 255 / 0.08);
57
- --other-transparency-white-12: rgba(255 255 255 / 0.12);
58
- --other-transparency-white-16: rgba(255 255 255 / 0.16);
59
- --other-transparency-white-24: rgba(255 255 255 / 0.24);
60
- --other-transparency-white-32: rgba(255 255 255 / 0.32);
61
- --other-transparency-white-48: rgba(255 255 255 / 0.48);
62
- --other-transparency-black-08: rgba(0 0 0 / 0.08);
63
- --other-transparency-black-12: rgba(0 0 0 / 0.12);
64
- --other-transparency-black-16: rgba(0 0 0 / 0.16);
65
- --other-transparency-black-24: rgba(0 0 0 / 0.24);
66
- --other-transparency-black-32: rgba(0 0 0 / 0.32);
67
- --other-transparency-black-48: rgba(0 0 0 / 0.48);
68
- }
1
+ :root[data-theme="xspector"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Transparency Variants — from variable_lasted.css */
4
+ /* ------------------------------------------------------------------ */
5
+
6
+ /* Primary (main) */
7
+ --main-transparency-primary-8: var(--transparency-primary-8-xspector);
8
+ --main-transparency-primary-12: var(--transparency-primary-12-xspector);
9
+ --main-transparency-primary-16: var(--transparency-primary-16-xspector);
10
+ --main-transparency-primary-24: var(--transparency-primary-24-xspector);
11
+ --main-transparency-primary-32: var(--transparency-primary-32-xspector);
12
+ --main-transparency-primary-48: var(--transparency-primary-48-xspector);
13
+
14
+ /* Secondary (main) */
15
+ --main-transparency-secondary-8: var(--transparency-secondary-8-xspector);
16
+ --main-transparency-secondary-12: var(--transparency-secondary-12-xspector);
17
+ --main-transparency-secondary-16: var(--transparency-secondary-16-xspector);
18
+ --main-transparency-secondary-24: var(--transparency-secondary-24-xspector);
19
+ --main-transparency-secondary-32: var(--transparency-secondary-32-xspector);
20
+ --main-transparency-secondary-48: var(--transparency-secondary-48-xspector);
21
+
22
+ /* Tertiary (main) */
23
+ --main-transparency-tertiary-8: var(--transparency-tertiary-8-xspector);
24
+ --main-transparency-tertiary-12: var(--transparency-tertiary-12-xspector);
25
+ --main-transparency-tertiary-16: var(--transparency-tertiary-16-xspector);
26
+ --main-transparency-tertiary-24: var(--transparency-tertiary-24-xspector);
27
+ --main-transparency-tertiary-32: var(--transparency-tertiary-32-xspector);
28
+ --main-transparency-tertiary-48: var(--transparency-tertiary-48-xspector);
29
+
30
+ /* Info (other) */
31
+ --other-transparency-info-8: var(--transparency-info-8-xspector);
32
+ --other-transparency-info-12: var(--transparency-info-12-xspector);
33
+ --other-transparency-info-16: var(--transparency-info-16-xspector);
34
+ --other-transparency-info-24: var(--transparency-info-24-xspector);
35
+ --other-transparency-info-32: var(--transparency-info-32-xspector);
36
+ --other-transparency-info-48: var(--transparency-info-48-xspector);
37
+
38
+ /* Success (other) */
39
+ --other-transparency-success-8: var(--transparency-success-8-xspector);
40
+ --other-transparency-success-12: var(--transparency-success-12-xspector);
41
+ --other-transparency-success-16: var(--transparency-success-16-xspector);
42
+ --other-transparency-success-24: var(--transparency-success-24-xspector);
43
+ --other-transparency-success-32: var(--transparency-success-32-xspector);
44
+ --other-transparency-success-48: var(--transparency-success-48-xspector);
45
+
46
+ /* Warning (other) */
47
+ --other-transparency-warning-8: var(--transparency-warning-8-xspector);
48
+ --other-transparency-warning-12: var(--transparency-warning-12-xspector);
49
+ --other-transparency-warning-16: var(--transparency-warning-16-xspector);
50
+ --other-transparency-warning-24: var(--transparency-warning-24-xspector);
51
+ --other-transparency-warning-32: var(--transparency-warning-32-xspector);
52
+ --other-transparency-warning-48: var(--transparency-warning-48-xspector);
53
+
54
+ /* Error (other) */
55
+ --other-transparency-error-8: var(--transparency-error-8-xspector);
56
+ --other-transparency-error-12: var(--transparency-error-12-xspector);
57
+ --other-transparency-error-16: var(--transparency-error-16-xspector);
58
+ --other-transparency-error-24: var(--transparency-error-24-xspector);
59
+ --other-transparency-error-32: var(--transparency-error-32-xspector);
60
+ --other-transparency-error-48: var(--transparency-error-48-xspector);
61
+
62
+ /* Grey (other) */
63
+ --other-transparency-grey-8: var(--transparency-grey-8-xspector);
64
+ --other-transparency-grey-12: var(--transparency-grey-12-xspector);
65
+ --other-transparency-grey-16: var(--transparency-grey-16-xspector);
66
+ --other-transparency-grey-24: var(--transparency-grey-24-xspector);
67
+ --other-transparency-grey-32: var(--transparency-grey-32-xspector);
68
+ --other-transparency-grey-48: var(--transparency-grey-48-xspector);
69
+
70
+ /* Grey2 (other) */
71
+ --other-transparency-grey2-8: var(--transparency-grey2-8-xspector);
72
+ --other-transparency-grey2-12: var(--transparency-grey2-12-xspector);
73
+ --other-transparency-grey2-16: var(--transparency-grey2-16-xspector);
74
+ --other-transparency-grey2-24: var(--transparency-grey2-24-xspector);
75
+ --other-transparency-grey2-32: var(--transparency-grey2-32-xspector);
76
+ --other-transparency-grey2-48: var(--transparency-grey2-48-xspector);
77
+
78
+ /* White (other) */
79
+ --other-transparency-white-08: var(--transparency-white-8-xspector);
80
+ --other-transparency-white-12: var(--transparency-white-12-xspector);
81
+ --other-transparency-white-16: var(--transparency-white-16-xspector);
82
+ --other-transparency-white-24: var(--transparency-white-24-xspector);
83
+ --other-transparency-white-32: var(--transparency-white-32-xspector);
84
+ --other-transparency-white-48: var(--transparency-white-48-xspector);
85
+
86
+ /* Black (other) */
87
+ --other-transparency-black-08: var(--transparency-black-8-xspector);
88
+ --other-transparency-black-12: var(--transparency-black-12-xspector);
89
+ --other-transparency-black-16: var(--transparency-black-16-xspector);
90
+ --other-transparency-black-24: var(--transparency-black-24-xspector);
91
+ --other-transparency-black-32: var(--transparency-black-32-xspector);
92
+ --other-transparency-black-48: var(--transparency-black-48-xspector);
93
+ }