@rovula/ui 0.0.81 → 0.0.82

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 +1 -2
  2. package/dist/esm/bundle.css +1 -2
  3. package/dist/src/theme/global.css +309 -1853
  4. package/package.json +2 -4
  5. package/src/components/Button/Button.tsx +7 -7
  6. package/src/theme/global.css +1 -2
  7. package/src/theme/themes/xspector/color.css +48 -50
  8. package/src/theme/themes/xspector/palette.css +121 -141
  9. package/src/theme/themes/xspector/state.css +78 -83
  10. package/src/theme/themes/xspector/transparent.css +68 -93
  11. package/src/theme/THEME_MAPPING.md +0 -231
  12. package/src/theme/themes/skyller/baseline.css +0 -6
  13. package/src/theme/themes/skyller/color.css +0 -79
  14. package/src/theme/themes/skyller/components/action-button.css +0 -81
  15. package/src/theme/themes/skyller/palette.css +0 -143
  16. package/src/theme/themes/skyller/state.css +0 -94
  17. package/src/theme/themes/skyller/transparent.css +0 -94
  18. package/src/theme/themes/skyller/typography.css +0 -30
  19. package/src/theme/themes/variable.css +0 -1057
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rovula/ui",
3
- "version": "0.0.81",
3
+ "version": "0.0.82",
4
4
  "main": "dist/cjs/bundle.js",
5
5
  "module": "dist/esm/bundle.js",
6
6
  "types": "dist/index.d.ts",
@@ -18,9 +18,7 @@
18
18
  "storybook:docker": "storybook dev -p 6006 --no-open",
19
19
  "build-storybook": "storybook build",
20
20
  "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee",
21
- "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main",
22
- "docs": "npx serve docs-website -p 3000",
23
- "docs:open": "npx serve docs-website -p 3000 -o"
21
+ "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main"
24
22
  },
25
23
  "files": [
26
24
  "dist/**/*",
package/src/components/Button/Button.tsx CHANGED
@@ -7,13 +7,13 @@ export type ButtonProps = {
7
7
  title?: string;
8
8
  size?: "sm" | "md" | "lg";
9
9
  color?:
10
- | "primary"
11
- | "secondary"
12
- | "success"
13
- | "tertiary"
14
- | "info"
15
- | "warning"
16
- | "error";
10
+ | "primary"
11
+ | "secondary"
12
+ | "success"
13
+ | "tertiary"
14
+ | "info"
15
+ | "warning"
16
+ | "error";
17
17
  variant?: "solid" | "outline" | "flat" | "link";
18
18
  disabled?: boolean;
19
19
  isLoading?: boolean;
package/src/theme/global.css CHANGED
@@ -1,7 +1,6 @@
1
+
1
2
  @import "./tokens/baseline.css";
2
- @import "./themes/variable.css";
3
3
  @import "./themes/xspector/baseline.css";
4
- @import "./themes/skyller/baseline.css";
5
4
 
6
5
  @tailwind base;
7
6
  @tailwind components;
package/src/theme/themes/xspector/color.css CHANGED
@@ -1,55 +1,53 @@
1
- :root[data-theme="xspector"] {
2
- /* ------------------------------------------------------------------ */
3
- /* Semantic Colors — from variable_lasted.css */
4
- /* ------------------------------------------------------------------ */
5
1
 
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);
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;
16
13
 
17
14
  /* Function button */
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);
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;
29
26
 
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);
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;
39
34
 
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);
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;
51
45
 
52
- /* Addon */
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 ---------- */
53
51
  --background: var(--base-color-bg);
54
52
  --foreground: var(--common-white);
55
53
 
@@ -64,12 +62,12 @@
64
62
  --grey2: var(--grey2-grey2-100);
65
63
 
66
64
  --primary-foreground: var(--state-color-primary-text-solid);
67
- --secondary-foreground: var(--state-color-secondary-text-solid);
65
+ --secondary-foreground: var(--state-color-secondary-text-solid);
68
66
  --tertiary-foreground: var(--state-color-tertiary-text-solid);
69
67
  --info-foreground: var(--state-color-info-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);
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);
73
71
  --grey-foreground: var(--common-black);
74
72
  --grey2-foreground: var(--common-black);
75
73
 
package/src/theme/themes/xspector/palette.css CHANGED
@@ -1,142 +1,122 @@
1
- :root[data-theme="xspector"] {
2
- /* ------------------------------------------------------------------ */
3
- /* Color Ramps — from variable_lasted.css */
4
- /* ------------------------------------------------------------------ */
5
1
 
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
- }
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
+ }
package/src/theme/themes/xspector/state.css CHANGED
@@ -1,94 +1,89 @@
1
- :root[data-theme="xspector"] {
1
+
2
+ :root[data-theme="xspector"]{
2
3
  /* ------------------------------------------------------------------ */
3
- /* State Tokens — from variable_lasted.css */
4
+ /* State Tokens */
4
5
  /* ------------------------------------------------------------------ */
5
- /* Maps --state-color-* (code) → --state-*-xspector (Figma export) */
6
+ /* Naming Convention: --state-color-[theme]-[element?]-[state] */
7
+ /* States: [default, hover, pressed, disabled] */
6
8
 
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);
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;
18
19
 
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);
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;
30
30
 
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);
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;
42
41
 
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);
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;
54
52
 
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);
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;
66
63
 
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);
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;
78
74
 
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);
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;
90
85
 
91
- /* Disable */
92
- --state-color-disable-solid: var(--state-disable-solid-xspector);
93
- --state-color-disable-outline: var(--state-disable-outline-xspector);
86
+ --state-color-disable-solid: #454f5b;
87
+ --state-color-disable-outline: #637381;
94
88
  }
89
+