@rovula/ui 0.0.80 → 0.0.81

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/skyller/state.css ADDED
@@ -0,0 +1,94 @@
1
+ :root[data-theme="skyller"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* State Tokens — from variable_lasted.css */
4
+ /* ------------------------------------------------------------------ */
5
+ /* Maps --state-color-* (code) → --state-*-skyller (Figma export) */
6
+
7
+ /* Primary */
8
+ --state-color-primary-default: var(--state-primary-default-skyller);
9
+ --state-color-primary-hover: var(--state-primary-hover-skyller);
10
+ --state-color-primary-stroke: var(--state-primary-stroke-skyller);
11
+ --state-color-primary-hover-bg: var(--state-primary-hover-bg-skyller);
12
+ --state-color-primary-pressed: var(--state-primary-pressed-skyller);
13
+ --state-color-primary-active: var(--state-primary-active-skyller);
14
+ --state-color-primary-text-solid: var(--state-primary-text-solid-skyller);
15
+ --state-color-primary-text-outline: var(--state-primary-text-outline-skyller);
16
+ --state-color-primary-text-hover: var(--state-primary-text-hover-skyller);
17
+ --state-color-primary-text-pressed: var(--state-primary-text-pressed-skyller);
18
+
19
+ /* Secondary */
20
+ --state-color-secondary-default: var(--state-secondary-default-skyller);
21
+ --state-color-secondary-hover: var(--state-secondary-hover-skyller);
22
+ --state-color-secondary-stroke: var(--state-secondary-stroke-skyller);
23
+ --state-color-secondary-hover-bg: var(--state-secondary-hover-bg-skyller);
24
+ --state-color-secondary-pressed: var(--state-secondary-pressed-skyller);
25
+ --state-color-secondary-active: var(--state-secondary-active-skyller);
26
+ --state-color-secondary-text-solid: var(--state-secondary-text-solid-skyller);
27
+ --state-color-secondary-text-outline: var(--state-secondary-text-outline-skyller);
28
+ --state-color-secondary-text-hover: var(--state-secondary-text-hover-skyller);
29
+ --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-skyller);
30
+
31
+ /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
32
+ --state-color-tertiary-default: var(--state-tertiery-default-skyller);
33
+ --state-color-tertiary-hover: var(--state-tertiery-hover-skyller);
34
+ --state-color-tertiary-stroke: var(--state-tertiery-stroke-skyller);
35
+ --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-skyller);
36
+ --state-color-tertiary-pressed: var(--state-tertiery-pressed-skyller);
37
+ --state-color-tertiary-active: var(--state-tertiery-active-skyller);
38
+ --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-skyller);
39
+ --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-skyller);
40
+ --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-skyller);
41
+ --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-skyller);
42
+
43
+ /* Info */
44
+ --state-color-info-default: var(--state-info-default-skyller);
45
+ --state-color-info-hover: var(--state-info-hover-skyller);
46
+ --state-color-info-stroke: var(--state-info-stroke-skyller);
47
+ --state-color-info-hover-bg: var(--state-info-hover-bg-skyller);
48
+ --state-color-info-pressed: var(--state-info-pressed-skyller);
49
+ --state-color-info-active: var(--state-info-active-skyller);
50
+ --state-color-info-text-solid: var(--state-info-text-solid-skyller);
51
+ --state-color-info-text-outline: var(--state-info-text-outline-skyller);
52
+ --state-color-info-text-hover: var(--state-info-text-hover-skyller);
53
+ --state-color-info-text-pressed: var(--state-info-text-pressed-skyller);
54
+
55
+ /* Success */
56
+ --state-color-success-default: var(--state-success-default-skyller);
57
+ --state-color-success-hover: var(--state-success-hover-skyller);
58
+ --state-color-success-stroke: var(--state-success-stroke-skyller);
59
+ --state-color-success-hover-bg: var(--state-success-hover-bg-skyller);
60
+ --state-color-success-pressed: var(--state-success-pressed-skyller);
61
+ --state-color-success-active: var(--state-success-active-skyller);
62
+ --state-color-success-text-solid: var(--state-success-text-solid-skyller);
63
+ --state-color-success-text-outline: var(--state-success-text-outline-skyller);
64
+ --state-color-success-text-hover: var(--state-success-text-hover-skyller);
65
+ --state-color-success-text-pressed: var(--state-success-text-pressed-skyller);
66
+
67
+ /* Warning */
68
+ --state-color-warning-default: var(--state-warning-default-skyller);
69
+ --state-color-warning-hover: var(--state-warning-hover-skyller);
70
+ --state-color-warning-stroke: var(--state-warning-stroke-skyller);
71
+ --state-color-warning-hover-bg: var(--state-warning-hover-bg-skyller);
72
+ --state-color-warning-pressed: var(--state-warning-pressed-skyller);
73
+ --state-color-warning-active: var(--state-warning-active-skyller);
74
+ --state-color-warning-text-solid: var(--state-warning-text-solid-skyller);
75
+ --state-color-warning-text-outline: var(--state-warning-text-outline-skyller);
76
+ --state-color-warning-text-hover: var(--state-warning-text-hover-skyller);
77
+ --state-color-warning-text-pressed: var(--state-warning-text-pressed-skyller);
78
+
79
+ /* Error */
80
+ --state-color-error-default: var(--state-error-default-skyller);
81
+ --state-color-error-hover: var(--state-error-hover-skyller);
82
+ --state-color-error-stroke: var(--state-error-stroke-skyller);
83
+ --state-color-error-hover-bg: var(--state-error-hover-bg-skyller);
84
+ --state-color-error-pressed: var(--state-error-pressed-skyller);
85
+ --state-color-error-active: var(--state-error-active-skyller);
86
+ --state-color-error-text-solid: var(--state-error-text-solid-skyller);
87
+ --state-color-error-text-outline: var(--state-error-text-outline-skyller);
88
+ --state-color-error-text-hover: var(--state-error-text-hover-skyller);
89
+ --state-color-error-text-pressed: var(--state-error-text-pressed-skyller);
90
+
91
+ /* Disable */
92
+ --state-color-disable-solid: var(--state-disable-solid-skyller);
93
+ --state-color-disable-outline: var(--state-disable-outline-skyller);
94
+ }
package/src/theme/themes/skyller/transparent.css ADDED
@@ -0,0 +1,94 @@
1
+ :root[data-theme="skyller"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Transparency Variants — from variable_lasted.css */
4
+ /* ------------------------------------------------------------------ */
5
+ /* Maps --main/other-transparency-* (code) → --transparency-*-skyller */
6
+
7
+ /* Primary (main) */
8
+ --main-transparency-primary-8: var(--transparency-primary-8-skyller);
9
+ --main-transparency-primary-12: var(--transparency-primary-12-skyller);
10
+ --main-transparency-primary-16: var(--transparency-primary-16-skyller);
11
+ --main-transparency-primary-24: var(--transparency-primary-24-skyller);
12
+ --main-transparency-primary-32: var(--transparency-primary-32-skyller);
13
+ --main-transparency-primary-48: var(--transparency-primary-48-skyller);
14
+
15
+ /* Secondary (main) */
16
+ --main-transparency-secondary-8: var(--transparency-secondary-8-skyller);
17
+ --main-transparency-secondary-12: var(--transparency-secondary-12-skyller);
18
+ --main-transparency-secondary-16: var(--transparency-secondary-16-skyller);
19
+ --main-transparency-secondary-24: var(--transparency-secondary-24-skyller);
20
+ --main-transparency-secondary-32: var(--transparency-secondary-32-skyller);
21
+ --main-transparency-secondary-48: var(--transparency-secondary-48-skyller);
22
+
23
+ /* Tertiary (main) */
24
+ --main-transparency-tertiary-8: var(--transparency-tertiary-8-skyller);
25
+ --main-transparency-tertiary-12: var(--transparency-tertiary-12-skyller);
26
+ --main-transparency-tertiary-16: var(--transparency-tertiary-16-skyller);
27
+ --main-transparency-tertiary-24: var(--transparency-tertiary-24-skyller);
28
+ --main-transparency-tertiary-32: var(--transparency-tertiary-32-skyller);
29
+ --main-transparency-tertiary-48: var(--transparency-tertiary-48-skyller);
30
+
31
+ /* Info (other) */
32
+ --other-transparency-info-8: var(--transparency-info-8-skyller);
33
+ --other-transparency-info-12: var(--transparency-info-12-skyller);
34
+ --other-transparency-info-16: var(--transparency-info-16-skyller);
35
+ --other-transparency-info-24: var(--transparency-info-24-skyller);
36
+ --other-transparency-info-32: var(--transparency-info-32-skyller);
37
+ --other-transparency-info-48: var(--transparency-info-48-skyller);
38
+
39
+ /* Success (other) */
40
+ --other-transparency-success-8: var(--transparency-success-8-skyller);
41
+ --other-transparency-success-12: var(--transparency-success-12-skyller);
42
+ --other-transparency-success-16: var(--transparency-success-16-skyller);
43
+ --other-transparency-success-24: var(--transparency-success-24-skyller);
44
+ --other-transparency-success-32: var(--transparency-success-32-skyller);
45
+ --other-transparency-success-48: var(--transparency-success-48-skyller);
46
+
47
+ /* Warning (other) */
48
+ --other-transparency-warning-8: var(--transparency-warning-8-skyller);
49
+ --other-transparency-warning-12: var(--transparency-warning-12-skyller);
50
+ --other-transparency-warning-16: var(--transparency-warning-16-skyller);
51
+ --other-transparency-warning-24: var(--transparency-warning-24-skyller);
52
+ --other-transparency-warning-32: var(--transparency-warning-32-skyller);
53
+ --other-transparency-warning-48: var(--transparency-warning-48-skyller);
54
+
55
+ /* Error (other) */
56
+ --other-transparency-error-8: var(--transparency-error-8-skyller);
57
+ --other-transparency-error-12: var(--transparency-error-12-skyller);
58
+ --other-transparency-error-16: var(--transparency-error-16-skyller);
59
+ --other-transparency-error-24: var(--transparency-error-24-skyller);
60
+ --other-transparency-error-32: var(--transparency-error-32-skyller);
61
+ --other-transparency-error-48: var(--transparency-error-48-skyller);
62
+
63
+ /* Grey (other) */
64
+ --other-transparency-grey-8: var(--transparency-grey-8-skyller);
65
+ --other-transparency-grey-12: var(--transparency-grey-12-skyller);
66
+ --other-transparency-grey-16: var(--transparency-grey-16-skyller);
67
+ --other-transparency-grey-24: var(--transparency-grey-24-skyller);
68
+ --other-transparency-grey-32: var(--transparency-grey-32-skyller);
69
+ --other-transparency-grey-48: var(--transparency-grey-48-skyller);
70
+
71
+ /* Grey2 (other) */
72
+ --other-transparency-grey2-8: var(--transparency-grey2-8-skyller);
73
+ --other-transparency-grey2-12: var(--transparency-grey2-12-skyller);
74
+ --other-transparency-grey2-16: var(--transparency-grey2-16-skyller);
75
+ --other-transparency-grey2-24: var(--transparency-grey2-24-skyller);
76
+ --other-transparency-grey2-32: var(--transparency-grey2-32-skyller);
77
+ --other-transparency-grey2-48: var(--transparency-grey2-48-skyller);
78
+
79
+ /* White (other) — note: variable uses transparency-white-8 */
80
+ --other-transparency-white-08: var(--transparency-white-8-skyller);
81
+ --other-transparency-white-12: var(--transparency-white-12-skyller);
82
+ --other-transparency-white-16: var(--transparency-white-16-skyller);
83
+ --other-transparency-white-24: var(--transparency-white-24-skyller);
84
+ --other-transparency-white-32: var(--transparency-white-32-skyller);
85
+ --other-transparency-white-48: var(--transparency-white-48-skyller);
86
+
87
+ /* Black (other) */
88
+ --other-transparency-black-08: var(--transparency-black-8-skyller);
89
+ --other-transparency-black-12: var(--transparency-black-12-skyller);
90
+ --other-transparency-black-16: var(--transparency-black-16-skyller);
91
+ --other-transparency-black-24: var(--transparency-black-24-skyller);
92
+ --other-transparency-black-32: var(--transparency-black-32-skyller);
93
+ --other-transparency-black-48: var(--transparency-black-48-skyller);
94
+ }
package/src/theme/themes/skyller/typography.css ADDED
@@ -0,0 +1,30 @@
1
+ :root[data-theme="skyller"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Typography */
4
+ /* ------------------------------------------------------------------ */
5
+
6
+ --h1-family: "Poppins";
7
+ --h2-family: "Poppins";
8
+ --h3-family: "Poppins";
9
+ --h4-family: "Poppins";
10
+ --h5-family: "Poppins";
11
+ --h6-family: "Poppins";
12
+ --subtitle2-family: "Poppins";
13
+ --subtitle3-family: "Poppins";
14
+ --subtitle4-family: "Poppins";
15
+ --subtitle5-family: "Poppins";
16
+ --subtitle6-family: "Poppins";
17
+ --body1-family: "Poppins";
18
+ --body2-family: "Poppins";
19
+ --body3-family: "Poppins";
20
+ --body4-family: "Poppins";
21
+ --small1-family: "Poppins";
22
+ --small2-family: "Poppins";
23
+ --small3-family: "Poppins";
24
+ --small4-family: "Poppins";
25
+ --small5-family: "Poppins";
26
+ --label-label1-family: "Poppins";
27
+ --label-label2-family: "Poppins";
28
+ --button-button-l-family: "Poppins";
29
+ --button-button-ms-family: "Poppins";
30
+ }