@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/color.css CHANGED
@@ -1,53 +1,55 @@
1
+ :root[data-theme="xspector"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Semantic Colors — from variable_lasted.css */
4
+ /* ------------------------------------------------------------------ */
1
5
 
2
- :root[data-theme="xspector"]{
3
- /* Base from design */
4
- --input-color-default-text: #9e9e9e;
5
- --input-color-default-stroke: rgba(158 158 158 / 0.24);
6
- --input-color-filled-text: #dfe3e8;
7
- --input-color-active-stroke: rgba(158 158 158 / 0.48);
8
- --input-color-disable-text: rgba(145 158 171 / 0.52);
9
- --input-color-disable-stroke: rgba(145 158 171 / 0.08);
10
- --input-color-disable-bg: rgba(145 158 171 / 0.04);
11
- --input-color-label-bg: #2d2e30;
12
- --input-color-error: #ff4d35;
6
+ /* Input */
7
+ --input-color-default-text: var(--input-default-text-xspector);
8
+ --input-color-default-stroke: var(--input-default-stroke-xspector);
9
+ --input-color-filled-text: var(--input-filled-text-xspector);
10
+ --input-color-active-stroke: var(--input-active-stroke-xspector);
11
+ --input-color-disable-text: var(--input-disable-text-xspector);
12
+ --input-color-disable-stroke: var(--input-disable-stroke-xspector);
13
+ --input-color-disable-bg: var(--input-disable-bg-xspector);
14
+ --input-color-label-bg: var(--input-label-bg-xspector);
15
+ --input-color-error: var(--input-error-xspector);
13
16
 
14
17
  /* Function button */
15
- --function-default-solid: #ececec;
16
- --function-default-hover: #fafafa;
17
- --function-default-hover-bg: rgba(250 250 250 / 0.08);
18
- --function-default-stroke: rgba(158 158 158 / 0.24);
19
- --function-default-icon: #212b36;
20
- --function-default-outline-icon: #9e9e9e;
21
- --function-active-solid: #b1a400;
22
- --function-active-hover: #ddcd00;
23
- --function-active-hover-bg: rgba(221 205 0 / 0.08);
24
- --function-active-stroke: rgba(177 164 0 / 0.48);
25
- --function-active-icon: #212b36;
18
+ --function-default-solid: var(--function-default-solid-xspector);
19
+ --function-default-hover: var(--function-default-hover-xspector);
20
+ --function-default-hover-bg: var(--function-default-hover-bg-xspector);
21
+ --function-default-stroke: var(--function-default-stroke-xspector);
22
+ --function-default-icon: var(--function-default-icon-xspector);
23
+ --function-default-outline-icon: var(--function-default-outline-icon-xspector);
24
+ --function-active-solid: var(--function-active-solid-xspector);
25
+ --function-active-hover: var(--function-active-hover-xspector);
26
+ --function-active-hover-bg: var(--function-active-hover-bg-xspector);
27
+ --function-active-stroke: var(--function-active-stroke-xspector);
28
+ --function-active-icon: var(--function-active-icon-xspector);
26
29
 
27
- --text-dark: #212b36;
28
- --text-medium: #637381;
29
- --text-light: #919eab;
30
- --text-grey-dark: #7e7e7e;
31
- --text-grey-medium: #aaaaaa;
32
- --text-grey-light: #dfe3e8;
33
- --text-white: #ffffff;
30
+ /* Text */
31
+ --text-black: var(--text-black-xspector);
32
+ --text-dark: var(--text-dark-xspector);
33
+ --text-medium: var(--text-medium-xspector);
34
+ --text-light: var(--text-light-xspector);
35
+ --text-grey-dark: var(--text-grey-dark-xspector);
36
+ --text-grey-medium: var(--text-grey-medium-xspector);
37
+ --text-grey-light: var(--text-grey-light-xspector);
38
+ --text-white: var(--text-white-xspector);
34
39
 
35
- --base-color-bg: #202427;
36
- --base-color-bg2: #282c31;
37
- --base-color-bg3: #d8d8d8;
38
- --base-color-workspace-stroke: #e2e2e2;
39
- --base-color-guideline-stroke: #c5c5c5;
40
- --base-color-popup: #2d2e30;
41
- --base-color-popup-hightlight: #343638;
42
- --base-color-popup-curtain: rgba(0 0 0 / 0.6);
43
- --common-white: #ffffff;
44
- --common-black: #000000;
40
+ /* Base */
41
+ --base-color-bg: var(--base-bg-bg1-xspector);
42
+ --base-color-bg2: var(--base-bg-bg2-xspector);
43
+ --base-color-bg3: var(--base-bg-bg3-xspector);
44
+ --base-color-workspace-stroke: var(--base-bg-stroke1-xspector);
45
+ --base-color-guideline-stroke: var(--base-bg-stroke2-xspector);
46
+ --base-color-popup: var(--base-modal-modal-xspector);
47
+ --base-color-popup-hightlight: var(--base-modal-modal-hightlight-xspector);
48
+ --base-color-popup-curtain: var(--base-modal-modal-curtain-xspector);
49
+ --common-white: var(--common-white-xspector);
50
+ --common-black: var(--common-black-xspector);
45
51
 
46
- --dashboard-panel-bg-grey: rgba(145 158 171 / 0.08);
47
- --dashboard-panel-bg-white: rgba(255 255 255 / 0.08);
48
- --dashboard-panel-border: rgba(168 162 168 / 0.24);
49
-
50
- /* ------- Addon base ---------- */
52
+ /* Addon */
51
53
  --background: var(--base-color-bg);
52
54
  --foreground: var(--common-white);
53
55
 
@@ -62,12 +64,12 @@
62
64
  --grey2: var(--grey2-grey2-100);
63
65
 
64
66
  --primary-foreground: var(--state-color-primary-text-solid);
65
- --secondary-foreground: var(--state-color-secondary-text-solid);
67
+ --secondary-foreground: var(--state-color-secondary-text-solid);
66
68
  --tertiary-foreground: var(--state-color-tertiary-text-solid);
67
69
  --info-foreground: var(--state-color-info-text-solid);
68
- --success-foreground: var(--state-color-success-text-solid);
69
- --warning-foreground: var(--state-color-warning-text-solid);
70
- --error-foreground: var(--state-color-error-text-solid);
70
+ --success-foreground: var(--state-color-success-text-solid);
71
+ --warning-foreground: var(--state-color-warning-text-solid);
72
+ --error-foreground: var(--state-color-error-text-solid);
71
73
  --grey-foreground: var(--common-black);
72
74
  --grey2-foreground: var(--common-black);
73
75
 
package/src/theme/themes/xspector/palette.css CHANGED
@@ -1,122 +1,142 @@
1
+ :root[data-theme="xspector"] {
2
+ /* ------------------------------------------------------------------ */
3
+ /* Color Ramps — from variable_lasted.css */
4
+ /* ------------------------------------------------------------------ */
1
5
 
2
- :root[data-theme="xspector"]{
3
- --primary-ramps-primary-5: #fdfcf2;
4
- --primary-ramps-primary-10: #fcfae5;
5
- --primary-ramps-primary-20: #f8f5cc;
6
- --primary-ramps-primary-30: #f5f0b2;
7
- --primary-ramps-primary-40: #f1eb99;
8
- --primary-ramps-primary-50: #eee680;
9
- --primary-ramps-primary-60: #ebe166;
10
- --primary-ramps-primary-70: #e7dc4d;
11
- --primary-ramps-primary-80: #e4d733;
12
- --primary-ramps-primary-90: #e0d21a;
13
- --primary-ramps-primary-100: #ddcd00;
14
- --primary-ramps-primary-110: #c7b800;
15
- --primary-ramps-primary-120: #b1a400;
16
- --primary-ramps-primary-130: #9b8f00;
17
- --primary-ramps-primary-140: #857b00;
18
- --primary-ramps-primary-150: #6f6700;
19
- --secondary-ramps-secondary-5: #fafafa;
20
- --secondary-ramps-secondary-10: #f5f5f5;
21
- --secondary-ramps-secondary-20: #ececec;
22
- --secondary-ramps-secondary-30: #e2e2e2;
23
- --secondary-ramps-secondary-40: #d8d8d8;
24
- --secondary-ramps-secondary-50: #cfcfcf;
25
- --secondary-ramps-secondary-60: #c5c5c5;
26
- --secondary-ramps-secondary-70: #bbbbbb;
27
- --secondary-ramps-secondary-80: #b1b1b1;
28
- --secondary-ramps-secondary-90: #a8a8a8;
29
- --secondary-ramps-secondary-100: #9e9e9e;
30
- --secondary-ramps-secondary-110: #8e8e8e;
31
- --secondary-ramps-secondary-120: #7e7e7e;
32
- --secondary-ramps-secondary-130: #6f6f6f;
33
- --secondary-ramps-secondary-140: #5f5f5f;
34
- --secondary-ramps-secondary-150: #4f4f4f;
35
- --tertiary-ramps-tertiary-5: #fbfcfd;
36
- --tertiary-ramps-tertiary-10: #f7fafb;
37
- --tertiary-ramps-tertiary-20: #eff4f7;
38
- --tertiary-ramps-tertiary-30: #e6eff3;
39
- --tertiary-ramps-tertiary-40: #deeaef;
40
- --tertiary-ramps-tertiary-50: #d6e5eb;
41
- --tertiary-ramps-tertiary-60: #cedfe6;
42
- --tertiary-ramps-tertiary-70: #c6dae2;
43
- --tertiary-ramps-tertiary-80: #bdd5de;
44
- --tertiary-ramps-tertiary-90: #b5cfda;
45
- --tertiary-ramps-tertiary-100: #adcad6;
46
- --tertiary-ramps-tertiary-110: #9cb6c1;
47
- --tertiary-ramps-tertiary-120: #8aa2ab;
48
- --tertiary-ramps-tertiary-130: #798d96;
49
- --tertiary-ramps-tertiary-140: #687980;
50
- --tertiary-ramps-tertiary-150: #57656b;
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
- }
6
+ /* Primary */
7
+ --primary-ramps-primary-5: var(--ramps-primary-5-xspector);
8
+ --primary-ramps-primary-10: var(--ramps-primary-10-xspector);
9
+ --primary-ramps-primary-20: var(--ramps-primary-20-xspector);
10
+ --primary-ramps-primary-30: var(--ramps-primary-30-xspector);
11
+ --primary-ramps-primary-40: var(--ramps-primary-40-xspector);
12
+ --primary-ramps-primary-50: var(--ramps-primary-50-xspector);
13
+ --primary-ramps-primary-60: var(--ramps-primary-60-xspector);
14
+ --primary-ramps-primary-70: var(--ramps-primary-70-xspector);
15
+ --primary-ramps-primary-80: var(--ramps-primary-80-xspector);
16
+ --primary-ramps-primary-90: var(--ramps-primary-90-xspector);
17
+ --primary-ramps-primary-100: var(--ramps-primary-100-xspector);
18
+ --primary-ramps-primary-110: var(--ramps-primary-110-xspector);
19
+ --primary-ramps-primary-120: var(--ramps-primary-120-xspector);
20
+ --primary-ramps-primary-130: var(--ramps-primary-130-xspector);
21
+ --primary-ramps-primary-140: var(--ramps-primary-140-xspector);
22
+ --primary-ramps-primary-150: var(--ramps-primary-150-xspector);
23
+
24
+ /* Secondary */
25
+ --secondary-ramps-secondary-5: var(--ramps-secondary-5-xspector);
26
+ --secondary-ramps-secondary-10: var(--ramps-secondary-10-xspector);
27
+ --secondary-ramps-secondary-20: var(--ramps-secondary-20-xspector);
28
+ --secondary-ramps-secondary-30: var(--ramps-secondary-30-xspector);
29
+ --secondary-ramps-secondary-40: var(--ramps-secondary-40-xspector);
30
+ --secondary-ramps-secondary-50: var(--ramps-secondary-50-xspector);
31
+ --secondary-ramps-secondary-60: var(--ramps-secondary-60-xspector);
32
+ --secondary-ramps-secondary-70: var(--ramps-secondary-70-xspector);
33
+ --secondary-ramps-secondary-80: var(--ramps-secondary-80-xspector);
34
+ --secondary-ramps-secondary-90: var(--ramps-secondary-90-xspector);
35
+ --secondary-ramps-secondary-100: var(--ramps-secondary-100-xspector);
36
+ --secondary-ramps-secondary-110: var(--ramps-secondary-110-xspector);
37
+ --secondary-ramps-secondary-120: var(--ramps-secondary-120-xspector);
38
+ --secondary-ramps-secondary-130: var(--ramps-secondary-130-xspector);
39
+ --secondary-ramps-secondary-140: var(--ramps-secondary-140-xspector);
40
+ --secondary-ramps-secondary-150: var(--ramps-secondary-150-xspector);
41
+
42
+ /* Tertiary */
43
+ --tertiary-ramps-tertiary-5: var(--ramps-tertiary-5-xspector);
44
+ --tertiary-ramps-tertiary-10: var(--ramps-tertiary-10-xspector);
45
+ --tertiary-ramps-tertiary-20: var(--ramps-tertiary-20-xspector);
46
+ --tertiary-ramps-tertiary-30: var(--ramps-tertiary-30-xspector);
47
+ --tertiary-ramps-tertiary-40: var(--ramps-tertiary-40-xspector);
48
+ --tertiary-ramps-tertiary-50: var(--ramps-tertiary-50-xspector);
49
+ --tertiary-ramps-tertiary-60: var(--ramps-tertiary-60-xspector);
50
+ --tertiary-ramps-tertiary-70: var(--ramps-tertiary-70-xspector);
51
+ --tertiary-ramps-tertiary-80: var(--ramps-tertiary-80-xspector);
52
+ --tertiary-ramps-tertiary-90: var(--ramps-tertiary-90-xspector);
53
+ --tertiary-ramps-tertiary-100: var(--ramps-tertiary-100-xspector);
54
+ --tertiary-ramps-tertiary-110: var(--ramps-tertiary-110-xspector);
55
+ --tertiary-ramps-tertiary-120: var(--ramps-tertiary-120-xspector);
56
+ --tertiary-ramps-tertiary-130: var(--ramps-tertiary-130-xspector);
57
+ --tertiary-ramps-tertiary-140: var(--ramps-tertiary-140-xspector);
58
+ --tertiary-ramps-tertiary-150: var(--ramps-tertiary-150-xspector);
59
+
60
+ /* Grey */
61
+ --grey-grey-5: var(--ramps-grey-5-xspector);
62
+ --grey-grey-10: var(--ramps-grey-10-xspector);
63
+ --grey-grey-20: var(--ramps-grey-20-xspector);
64
+ --grey-grey-30: var(--ramps-grey-30-xspector);
65
+ --grey-grey-40: var(--ramps-grey-40-xspector);
66
+ --grey-grey-50: var(--ramps-grey-50-xspector);
67
+ --grey-grey-60: var(--ramps-grey-60-xspector);
68
+ --grey-grey-70: var(--ramps-grey-70-xspector);
69
+ --grey-grey-80: var(--ramps-grey-80-xspector);
70
+ --grey-grey-90: var(--ramps-grey-90-xspector);
71
+ --grey-grey-100: var(--ramps-grey-100-xspector);
72
+ --grey-grey-110: var(--ramps-grey-110-xspector);
73
+ --grey-grey-120: var(--ramps-grey-120-xspector);
74
+ --grey-grey-130: var(--ramps-grey-130-xspector);
75
+ --grey-grey-140: var(--ramps-grey-140-xspector);
76
+ --grey-grey-150: var(--ramps-grey-150-xspector);
77
+
78
+ /* Grey2 */
79
+ --grey2-grey2-50: var(--ramps-grey2-50-xspector);
80
+ --grey2-grey2-100: var(--ramps-grey2-100-xspector);
81
+ --grey2-grey2-200: var(--ramps-grey2-200-xspector);
82
+ --grey2-grey2-300: var(--ramps-grey2-300-xspector);
83
+ --grey2-grey2-400: var(--ramps-grey2-400-xspector);
84
+ --grey2-grey2-500: var(--ramps-grey2-500-xspector);
85
+ --grey2-grey2-600: var(--ramps-grey2-600-xspector);
86
+ --grey2-grey2-700: var(--ramps-grey2-700-xspector);
87
+ --grey2-grey2-800: var(--ramps-grey2-800-xspector);
88
+ --grey2-grey2-900: var(--ramps-grey2-900-xspector);
89
+ --grey2-grey2-950: var(--ramps-grey2-950-xspector);
90
+
91
+ /* Info */
92
+ --info-info-50: var(--ramps-info-50-xspector);
93
+ --info-info-100: var(--ramps-info-100-xspector);
94
+ --info-info-200: var(--ramps-info-200-xspector);
95
+ --info-info-300: var(--ramps-info-300-xspector);
96
+ --info-info-400: var(--ramps-info-400-xspector);
97
+ --info-info-500: var(--ramps-info-500-xspector);
98
+ --info-info-600: var(--ramps-info-600-xspector);
99
+ --info-info-700: var(--ramps-info-700-xspector);
100
+ --info-info-800: var(--ramps-info-800-xspector);
101
+ --info-info-900: var(--ramps-info-900-xspector);
102
+ --info-info-950: var(--ramps-info-950-xspector);
103
+
104
+ /* Success */
105
+ --success-success-50: var(--ramps-success-50-xspector);
106
+ --success-success-100: var(--ramps-success-100-xspector);
107
+ --success-success-200: var(--ramps-success-200-xspector);
108
+ --success-success-300: var(--ramps-success-300-xspector);
109
+ --success-success-400: var(--ramps-success-400-xspector);
110
+ --success-success-500: var(--ramps-success-500-xspector);
111
+ --success-success-600: var(--ramps-success-600-xspector);
112
+ --success-success-700: var(--ramps-success-700-xspector);
113
+ --success-success-800: var(--ramps-success-800-xspector);
114
+ --success-success-900: var(--ramps-success-900-xspector);
115
+ --success-success-950: var(--ramps-success-950-xspector);
116
+
117
+ /* Warning */
118
+ --warning-warning-50: var(--ramps-warning-50-xspector);
119
+ --warning-warning-100: var(--ramps-warning-100-xspector);
120
+ --warning-warning-200: var(--ramps-warning-200-xspector);
121
+ --warning-warning-300: var(--ramps-warning-300-xspector);
122
+ --warning-warning-400: var(--ramps-warning-400-xspector);
123
+ --warning-warning-500: var(--ramps-warning-500-xspector);
124
+ --warning-warning-600: var(--ramps-warning-600-xspector);
125
+ --warning-warning-700: var(--ramps-warning-700-xspector);
126
+ --warning-warning-800: var(--ramps-warning-800-xspector);
127
+ --warning-warning-900: var(--ramps-warning-900-xspector);
128
+ --warning-warning-950: var(--ramps-warning-950-xspector);
129
+
130
+ /* Error */
131
+ --error-error-50: var(--ramps-error-50-xspector);
132
+ --error-error-100: var(--ramps-error-100-xspector);
133
+ --error-error-200: var(--ramps-error-200-xspector);
134
+ --error-error-300: var(--ramps-error-300-xspector);
135
+ --error-error-400: var(--ramps-error-400-xspector);
136
+ --error-error-500: var(--ramps-error-500-xspector);
137
+ --error-error-600: var(--ramps-error-600-xspector);
138
+ --error-error-700: var(--ramps-error-700-xspector);
139
+ --error-error-800: var(--ramps-error-800-xspector);
140
+ --error-error-900: var(--ramps-error-900-xspector);
141
+ --error-error-950: var(--ramps-error-950-xspector);
142
+ }
package/src/theme/themes/xspector/state.css CHANGED
@@ -1,89 +1,94 @@
1
-
2
- :root[data-theme="xspector"]{
1
+ :root[data-theme="xspector"] {
3
2
  /* ------------------------------------------------------------------ */
4
- /* State Tokens */
3
+ /* State Tokens — from variable_lasted.css */
5
4
  /* ------------------------------------------------------------------ */
6
- /* Naming Convention: --state-color-[theme]-[element?]-[state] */
7
- /* States: [default, hover, pressed, disabled] */
5
+ /* Maps --state-color-* (code) → --state-*-xspector (Figma export) */
8
6
 
9
- --state-color-primary-default: #b1a400;
10
- --state-color-primary-hover: #ddcd00;
11
- --state-color-primary-stroke: rgba(177 164 0 / 0.48);
12
- --state-color-primary-hover-bg: rgba(221 205 0 / 0.08);
13
- --state-color-primary-pressed: #6f6700;
14
- --state-color-primary-active: #ddcd00;
15
- --state-color-primary-text-solid: #212B36;
16
- --state-color-primary-text-outline: #b1a400;
17
- --state-color-primary-text-hover: #ddcd00;
18
- --state-color-primary-text-pressed: #6f6700;
7
+ /* Primary */
8
+ --state-color-primary-default: var(--state-primary-default-xspector);
9
+ --state-color-primary-hover: var(--state-primary-hover-xspector);
10
+ --state-color-primary-stroke: var(--state-primary-stroke-xspector);
11
+ --state-color-primary-hover-bg: var(--state-primary-hover-bg-xspector);
12
+ --state-color-primary-pressed: var(--state-primary-pressed-xspector);
13
+ --state-color-primary-active: var(--state-primary-active-xspector);
14
+ --state-color-primary-text-solid: var(--state-primary-text-solid-xspector);
15
+ --state-color-primary-text-outline: var(--state-primary-text-outline-xspector);
16
+ --state-color-primary-text-hover: var(--state-primary-text-hover-xspector);
17
+ --state-color-primary-text-pressed: var(--state-primary-text-pressed-xspector);
19
18
 
20
- --state-color-secondary-default: #ececec;
21
- --state-color-secondary-hover: #fafafa;
22
- --state-color-secondary-stroke: rgba(236 236 236 / 0.48);
23
- --state-color-secondary-hover-bg: rgba(250 250 250 / 0.08);
24
- --state-color-secondary-pressed: #bbbbbb;
25
- --state-color-secondary-active: #fafafa;
26
- --state-color-secondary-text-solid: #212B36;
27
- --state-color-secondary-text-outline: #ececec;
28
- --state-color-secondary-text-hover: #fafafa;
29
- --state-color-secondary-text-pressed: #bbbbbb;
19
+ /* Secondary */
20
+ --state-color-secondary-default: var(--state-secondary-default-xspector);
21
+ --state-color-secondary-hover: var(--state-secondary-hover-xspector);
22
+ --state-color-secondary-stroke: var(--state-secondary-stroke-xspector);
23
+ --state-color-secondary-hover-bg: var(--state-secondary-hover-bg-xspector);
24
+ --state-color-secondary-pressed: var(--state-secondary-pressed-xspector);
25
+ --state-color-secondary-active: var(--state-secondary-active-xspector);
26
+ --state-color-secondary-text-solid: var(--state-secondary-text-solid-xspector);
27
+ --state-color-secondary-text-outline: var(--state-secondary-text-outline-xspector);
28
+ --state-color-secondary-text-hover: var(--state-secondary-text-hover-xspector);
29
+ --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-xspector);
30
30
 
31
- --state-color-tertiary-default: #8aa2ab;
32
- --state-color-tertiary-hover: #adcad6;
33
- --state-color-tertiary-stroke: rgba(138 162 171 / 0.48);
34
- --state-color-tertiary-hover-bg: rgba(173 202 214 / 0.08);
35
- --state-color-tertiary-pressed: #57656b;
36
- --state-color-tertiary-active: #adcad6;
37
- --state-color-tertiary-text-solid: #212B36;
38
- --state-color-tertiary-text-outline: #8aa2ab;
39
- --state-color-tertiary-text-hover: #adcad6;
40
- --state-color-tertiary-text-pressed: #57656b;
31
+ /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
32
+ --state-color-tertiary-default: var(--state-tertiery-default-xspector);
33
+ --state-color-tertiary-hover: var(--state-tertiery-hover-xspector);
34
+ --state-color-tertiary-stroke: var(--state-tertiery-stroke-xspector);
35
+ --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-xspector);
36
+ --state-color-tertiary-pressed: var(--state-tertiery-pressed-xspector);
37
+ --state-color-tertiary-active: var(--state-tertiery-active-xspector);
38
+ --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-xspector);
39
+ --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-xspector);
40
+ --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-xspector);
41
+ --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-xspector);
41
42
 
42
- --state-color-info-default: #1b7df5;
43
- --state-color-info-hover: #2998ff;
44
- --state-color-info-stroke: rgba(27 125 245 / 0.48);
45
- --state-color-info-hover-bg: rgba(41 152 255 / 0.08);
46
- --state-color-info-pressed: #1752b6;
47
- --state-color-info-active: #2998ff;
48
- --state-color-info-text-solid: #ffffff;
49
- --state-color-info-text-outline: #1b7df5;
50
- --state-color-info-text-hover: #2998ff;
51
- --state-color-info-text-pressed: #1752b6;
43
+ /* Info */
44
+ --state-color-info-default: var(--state-info-default-xspector);
45
+ --state-color-info-hover: var(--state-info-hover-xspector);
46
+ --state-color-info-stroke: var(--state-info-stroke-xspector);
47
+ --state-color-info-hover-bg: var(--state-info-hover-bg-xspector);
48
+ --state-color-info-pressed: var(--state-info-pressed-xspector);
49
+ --state-color-info-active: var(--state-info-active-xspector);
50
+ --state-color-info-text-solid: var(--state-info-text-solid-xspector);
51
+ --state-color-info-text-outline: var(--state-info-text-outline-xspector);
52
+ --state-color-info-text-hover: var(--state-info-text-hover-xspector);
53
+ --state-color-info-text-pressed: var(--state-info-text-pressed-xspector);
52
54
 
53
- --state-color-success-default: #319917;
54
- --state-color-success-hover: #44c022;
55
- --state-color-success-stroke: rgba(49 153 23 / 0.48);
56
- --state-color-success-hover-bg: rgba(84 214 44 / 0.08);
57
- --state-color-success-pressed: #235d17;
58
- --state-color-success-active: #44c022;
59
- --state-color-success-text-solid: #ffffff;
60
- --state-color-success-text-outline: #319917;
61
- --state-color-success-text-hover: #44c022;
62
- --state-color-success-text-pressed: #235d17;
55
+ /* Success */
56
+ --state-color-success-default: var(--state-success-default-xspector);
57
+ --state-color-success-hover: var(--state-success-hover-xspector);
58
+ --state-color-success-stroke: var(--state-success-stroke-xspector);
59
+ --state-color-success-hover-bg: var(--state-success-hover-bg-xspector);
60
+ --state-color-success-pressed: var(--state-success-pressed-xspector);
61
+ --state-color-success-active: var(--state-success-active-xspector);
62
+ --state-color-success-text-solid: var(--state-success-text-solid-xspector);
63
+ --state-color-success-text-outline: var(--state-success-text-outline-xspector);
64
+ --state-color-success-text-hover: var(--state-success-text-hover-xspector);
65
+ --state-color-success-text-pressed: var(--state-success-text-pressed-xspector);
63
66
 
64
- --state-color-warning-default: #ffc107;
65
- --state-color-warning-hover: #ffdf1b;
66
- --state-color-warning-stroke: rgba(255 193 7 / 0.48);
67
- --state-color-warning-hover-bg: rgba(255 193 7 / 0.08);
68
- --state-color-warning-pressed: #985108;
69
- --state-color-warning-active: #ffc107;
70
- --state-color-warning-text-solid: #ffffff;
71
- --state-color-warning-text-outline: #ffc107;
72
- --state-color-warning-text-hover: #ffdf1b;
73
- --state-color-warning-text-pressed: #985108;
67
+ /* Warning */
68
+ --state-color-warning-default: var(--state-warning-default-xspector);
69
+ --state-color-warning-hover: var(--state-warning-hover-xspector);
70
+ --state-color-warning-stroke: var(--state-warning-stroke-xspector);
71
+ --state-color-warning-hover-bg: var(--state-warning-hover-bg-xspector);
72
+ --state-color-warning-pressed: var(--state-warning-pressed-xspector);
73
+ --state-color-warning-active: var(--state-warning-active-xspector);
74
+ --state-color-warning-text-solid: var(--state-warning-text-solid-xspector);
75
+ --state-color-warning-text-outline: var(--state-warning-text-outline-xspector);
76
+ --state-color-warning-text-hover: var(--state-warning-text-hover-xspector);
77
+ --state-color-warning-text-pressed: var(--state-warning-text-pressed-xspector);
74
78
 
75
- --state-color-error-default: #ed2f15;
76
- --state-color-error-hover: #ff4d35;
77
- --state-color-error-stroke: rgba(237 47 21 / 0.48);
78
- --state-color-error-hover-bg: rgba(255 77 53 / 0.08);
79
- --state-color-error-pressed: #a5210f;
80
- --state-color-error-active: #ff4d35;
81
- --state-color-error-text-solid: #ffffff;
82
- --state-color-error-text-outline: #ed2f15;
83
- --state-color-error-text-hover: #ff4d35;
84
- --state-color-error-text-pressed: #a5210f;
79
+ /* Error */
80
+ --state-color-error-default: var(--state-error-default-xspector);
81
+ --state-color-error-hover: var(--state-error-hover-xspector);
82
+ --state-color-error-stroke: var(--state-error-stroke-xspector);
83
+ --state-color-error-hover-bg: var(--state-error-hover-bg-xspector);
84
+ --state-color-error-pressed: var(--state-error-pressed-xspector);
85
+ --state-color-error-active: var(--state-error-active-xspector);
86
+ --state-color-error-text-solid: var(--state-error-text-solid-xspector);
87
+ --state-color-error-text-outline: var(--state-error-text-outline-xspector);
88
+ --state-color-error-text-hover: var(--state-error-text-hover-xspector);
89
+ --state-color-error-text-pressed: var(--state-error-text-pressed-xspector);
85
90
 
86
- --state-color-disable-solid: #454f5b;
87
- --state-color-disable-outline: #637381;
91
+ /* Disable */
92
+ --state-color-disable-solid: var(--state-disable-solid-xspector);
93
+ --state-color-disable-outline: var(--state-disable-outline-xspector);
88
94
  }
89
-