@x-green/components 0.1.0 → 0.3.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 (13) hide show
  1. package/README.md +25 -37
  2. package/dist/components/button.d.ts +2 -1
  3. package/dist/components/index.d.ts +0 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.ts +0 -1
  6. package/dist/index.js +1 -416
  7. package/dist/theme.css +216 -0
  8. package/package.json +11 -4
  9. package/dist/tokens/index.d.ts +0 -8
  10. package/dist/tokens/primitives/colors.d.ts +0 -234
  11. package/dist/tokens/primitives/typography.d.ts +0 -32
  12. package/dist/tokens/semantic/colors.d.ts +0 -201
  13. package/dist/tokens/semantic/typography.d.ts +0 -100
package/dist/theme.css ADDED
@@ -0,0 +1,216 @@
1
+ @theme {
2
+ --color-primary: #008149;
3
+ --color-primary-hover: #006137;
4
+ --color-outline: #f0f5fb;
5
+ --color-error: #bb3030;
6
+ --color-error-hover: #8c2424;
7
+
8
+ --color-neutral-25: #ebf0f6;
9
+ --color-neutral-50: #e5eaf1;
10
+ --color-neutral-100: #dae0e7;
11
+ --color-neutral-200: #c5cad3;
12
+ --color-neutral-300: #afb5c0;
13
+ --color-neutral-400: #9a9fac;
14
+ --color-neutral-500: #848a98;
15
+ --color-neutral-600: #6a6e7a;
16
+ --color-neutral-700: #4f535b;
17
+ --color-neutral-800: #35373d;
18
+ --color-neutral-900: #1a1c1e;
19
+ --color-neutral-950: #0d0e0f;
20
+
21
+ --color-green-50: #e6f6ef;
22
+ --color-green-100: #cceccc;
23
+ --color-green-200: #99d999;
24
+ --color-green-300: #66c766;
25
+ --color-green-400: #33b433;
26
+ --color-green-500: #00a000;
27
+ --color-green-600: #008100;
28
+ --color-green-700: #006100;
29
+ --color-green-800: #004000;
30
+ --color-green-900: #002000;
31
+ --color-green-950: #001000;
32
+
33
+ --color-blue-50: #e6ecf6;
34
+ --color-blue-100: #ccd9ec;
35
+ --color-blue-200: #99b3d9;
36
+ --color-blue-300: #668cc6;
37
+ --color-blue-400: #3366b3;
38
+ --color-blue-500: #0040a0;
39
+ --color-blue-600: #003380;
40
+ --color-blue-700: #002660;
41
+ --color-blue-800: #001a40;
42
+ --color-blue-900: #000d20;
43
+ --color-blue-950: #000610;
44
+
45
+ --color-purple-50: #ede6f6;
46
+ --color-purple-100: #dbccec;
47
+ --color-purple-200: #b899d9;
48
+ --color-purple-300: #9466c6;
49
+ --color-purple-400: #7133b3;
50
+ --color-purple-500: #4d00a0;
51
+ --color-purple-600: #3e0080;
52
+ --color-purple-700: #2e0060;
53
+ --color-purple-800: #1f0040;
54
+ --color-purple-900: #0f0020;
55
+ --color-purple-950: #080010;
56
+
57
+ --color-red-50: #fdecec;
58
+ --color-red-100: #fbd8d8;
59
+ --color-red-200: #f7b1b1;
60
+ --color-red-300: #f28a8a;
61
+ --color-red-400: #ee6363;
62
+ --color-red-500: #ea3c3c;
63
+ --color-red-600: #bb3030;
64
+ --color-red-700: #8c2424;
65
+ --color-red-800: #5e1818;
66
+ --color-red-900: #2f0c0c;
67
+ --color-red-950: #170606;
68
+
69
+ --color-orange-50: #fff1e8;
70
+ --color-orange-100: #ffe4d0;
71
+ --color-orange-200: #ffc8a1;
72
+ --color-orange-300: #ffad73;
73
+ --color-orange-400: #ff9144;
74
+ --color-orange-500: #ff7615;
75
+ --color-orange-600: #cc5e11;
76
+ --color-orange-700: #99470d;
77
+ --color-orange-800: #662f08;
78
+ --color-orange-900: #331804;
79
+ --color-orange-950: #190c02;
80
+
81
+ --color-yellow-50: #fff8e8;
82
+ --color-yellow-100: #fff2d0;
83
+ --color-yellow-200: #ffe5a1;
84
+ --color-yellow-300: #ffd773;
85
+ --color-yellow-400: #ffca44;
86
+ --color-yellow-500: #ffbd15;
87
+ --color-yellow-600: #cc9711;
88
+ --color-yellow-700: #99710d;
89
+ --color-yellow-800: #664c08;
90
+ --color-yellow-900: #332604;
91
+ --color-yellow-950: #191302;
92
+
93
+ --color-cyan-50: #e8fffc;
94
+ --color-cyan-100: #d0fffa;
95
+ --color-cyan-200: #a1fff4;
96
+ --color-cyan-300: #73ffef;
97
+ --color-cyan-400: #44ffe9;
98
+ --color-cyan-500: #15ffe4;
99
+ --color-cyan-600: #11ccb6;
100
+ --color-cyan-700: #0d9989;
101
+ --color-cyan-800: #08665b;
102
+ --color-cyan-900: #04332e;
103
+ --color-cyan-950: #021917;
104
+ }
105
+
106
+ @utility heading-h1 {
107
+ font-family: var(--default-font-family);
108
+ font-weight: 600;
109
+ font-size: 60px;
110
+ line-height: 72px;
111
+ }
112
+
113
+ @utility heading-h2 {
114
+ font-family: var(--default-font-family);
115
+ font-weight: 600;
116
+ font-size: 48px;
117
+ line-height: 56px;
118
+ }
119
+
120
+ @utility heading-h3 {
121
+ font-family: var(--default-font-family);
122
+ font-weight: 600;
123
+ font-size: 40px;
124
+ line-height: 48px;
125
+ }
126
+
127
+ @utility heading-h4 {
128
+ font-family: var(--default-font-family);
129
+ font-weight: 600;
130
+ font-size: 32px;
131
+ line-height: 40px;
132
+ }
133
+
134
+ @utility heading-h5 {
135
+ font-family: var(--default-font-family);
136
+ font-weight: 600;
137
+ font-size: 24px;
138
+ line-height: 28px;
139
+ }
140
+
141
+ @utility heading-h6 {
142
+ font-family: var(--default-font-family);
143
+ font-weight: 600;
144
+ font-size: 20px;
145
+ line-height: 24px;
146
+ }
147
+
148
+ @utility body-sm {
149
+ font-family: var(--default-font-family);
150
+ font-weight: 400;
151
+ font-size: 14px;
152
+ line-height: 16px;
153
+ }
154
+
155
+ @utility body-sm-semibold {
156
+ font-family: var(--default-font-family);
157
+ font-weight: 600;
158
+ font-size: 14px;
159
+ line-height: 16px;
160
+ }
161
+
162
+ @utility body-sm-link {
163
+ font-family: var(--default-font-family);
164
+ font-weight: 400;
165
+ font-size: 14px;
166
+ line-height: 16px;
167
+ }
168
+
169
+ @utility body-md {
170
+ font-family: var(--default-font-family);
171
+ font-weight: 400;
172
+ font-size: 16px;
173
+ line-height: 20px;
174
+ }
175
+
176
+ @utility body-md-semibold {
177
+ font-family: var(--default-font-family);
178
+ font-weight: 600;
179
+ font-size: 16px;
180
+ line-height: 20px;
181
+ }
182
+
183
+ @utility body-md-link {
184
+ font-family: var(--default-font-family);
185
+ font-weight: 400;
186
+ font-size: 16px;
187
+ line-height: 20px;
188
+ }
189
+
190
+ @utility body-lg {
191
+ font-family: var(--default-font-family);
192
+ font-weight: 400;
193
+ font-size: 20px;
194
+ line-height: 24px;
195
+ }
196
+
197
+ @utility body-lg-semibold {
198
+ font-family: var(--default-font-family);
199
+ font-weight: 600;
200
+ font-size: 20px;
201
+ line-height: 24px;
202
+ }
203
+
204
+ @utility body-lg-link {
205
+ font-family: var(--default-font-family);
206
+ font-weight: 400;
207
+ font-size: 20px;
208
+ line-height: 24px;
209
+ }
210
+
211
+ @utility caption {
212
+ font-family: var(--default-font-family);
213
+ font-weight: 400;
214
+ font-size: 12px;
215
+ line-height: 16px;
216
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@x-green/components",
3
- "version": "0.1.0",
4
- "description": "Design system Xgreen: tokens e componentes React.",
3
+ "version": "0.3.0",
4
+ "description": "Design system Xgreen: componentes React.",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
7
7
  "publishConfig": {
@@ -20,7 +20,8 @@
20
20
  ".": {
21
21
  "types": "./dist/index.d.ts",
22
22
  "import": "./dist/index.js"
23
- }
23
+ },
24
+ "./theme.css": "./dist/theme.css"
24
25
  },
25
26
  "scripts": {
26
27
  "dev": "vite",
@@ -33,7 +34,13 @@
33
34
  },
34
35
  "peerDependencies": {
35
36
  "react": ">=18",
36
- "react-dom": ">=18"
37
+ "react-dom": ">=18",
38
+ "tailwindcss": ">=4"
39
+ },
40
+ "peerDependenciesMeta": {
41
+ "tailwindcss": {
42
+ "optional": true
43
+ }
37
44
  },
38
45
  "dependencies": {
39
46
  "tailwind-variants": "^3.3.1"
package/dist/tokens/index.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export { colorCssVariables, colorCssVars, colors, colorShadeOpacity, } from './primitives/colors';
2
- export type { ColorCssVars, ColorFamily, ColorFamilyName, Colors, ColorShade, } from './primitives/colors';
3
- export { fontFamily, fontSize, fontWeight, lineHeight, } from './primitives/typography';
4
- export type { FontFamily, FontSize, FontWeight, LineHeight, } from './primitives/typography';
5
- export { button, semanticColorCssVariables, semanticColors } from './semantic/colors';
6
- export type { ButtonTokens, SemanticColors } from './semantic/colors';
7
- export { typography } from './semantic/typography';
8
- export type { TypographyToken, TypographyTokenName, } from './semantic/typography';
package/dist/tokens/primitives/colors.d.ts DELETED
@@ -1,234 +0,0 @@
1
- export declare const colorShadeOpacity: {
2
- readonly 25: "5%";
3
- readonly 50: "10%";
4
- readonly 100: "20%";
5
- readonly 200: "40%";
6
- readonly 300: "60%";
7
- readonly 400: "80%";
8
- readonly 500: "100%";
9
- readonly 600: "80%";
10
- readonly 700: "60%";
11
- readonly 800: "40%";
12
- readonly 900: "20%";
13
- readonly 950: "10%";
14
- };
15
- export declare const colors: {
16
- readonly neutral: {
17
- readonly 25: "#EBF0F6";
18
- readonly 50: "#E5EAF1";
19
- readonly 100: "#DAE0E7";
20
- readonly 200: "#C5CAD3";
21
- readonly 300: "#AFB5C0";
22
- readonly 400: "#9A9FAC";
23
- readonly 500: "#848A98";
24
- readonly 600: "#6A6E7A";
25
- readonly 700: "#4F535B";
26
- readonly 800: "#35373D";
27
- readonly 900: "#1A1C1E";
28
- readonly 950: "#0D0E0F";
29
- };
30
- readonly green: {
31
- readonly 50: "#E6F6EF";
32
- readonly 100: "#CCECCC";
33
- readonly 200: "#99D999";
34
- readonly 300: "#66C766";
35
- readonly 400: "#33B433";
36
- readonly 500: "#00A000";
37
- readonly 600: "#008100";
38
- readonly 700: "#006100";
39
- readonly 800: "#004000";
40
- readonly 900: "#002000";
41
- readonly 950: "#001000";
42
- };
43
- readonly blue: {
44
- readonly 50: "#E6ECF6";
45
- readonly 100: "#CCD9EC";
46
- readonly 200: "#99B3D9";
47
- readonly 300: "#668CC6";
48
- readonly 400: "#3366B3";
49
- readonly 500: "#0040A0";
50
- readonly 600: "#003380";
51
- readonly 700: "#002660";
52
- readonly 800: "#001A40";
53
- readonly 900: "#000D20";
54
- readonly 950: "#000610";
55
- };
56
- readonly purple: {
57
- readonly 50: "#EDE6F6";
58
- readonly 100: "#DBCCEC";
59
- readonly 200: "#B899D9";
60
- readonly 300: "#9466C6";
61
- readonly 400: "#7133B3";
62
- readonly 500: "#4D00A0";
63
- readonly 600: "#3E0080";
64
- readonly 700: "#2E0060";
65
- readonly 800: "#1F0040";
66
- readonly 900: "#0F0020";
67
- readonly 950: "#080010";
68
- };
69
- readonly red: {
70
- readonly 50: "#FDECEC";
71
- readonly 100: "#FBD8D8";
72
- readonly 200: "#F7B1B1";
73
- readonly 300: "#F28A8A";
74
- readonly 400: "#EE6363";
75
- readonly 500: "#EA3C3C";
76
- readonly 600: "#BB3030";
77
- readonly 700: "#8C2424";
78
- readonly 800: "#5E1818";
79
- readonly 900: "#2F0C0C";
80
- readonly 950: "#170606";
81
- };
82
- readonly orange: {
83
- readonly 50: "#FFF1E8";
84
- readonly 100: "#FFE4D0";
85
- readonly 200: "#FFC8A1";
86
- readonly 300: "#FFAD73";
87
- readonly 400: "#FF9144";
88
- readonly 500: "#FF7615";
89
- readonly 600: "#CC5E11";
90
- readonly 700: "#99470D";
91
- readonly 800: "#662F08";
92
- readonly 900: "#331804";
93
- readonly 950: "#190C02";
94
- };
95
- readonly yellow: {
96
- readonly 50: "#FFF8E8";
97
- readonly 100: "#FFF2D0";
98
- readonly 200: "#FFE5A1";
99
- readonly 300: "#FFD773";
100
- readonly 400: "#FFCA44";
101
- readonly 500: "#FFBD15";
102
- readonly 600: "#CC9711";
103
- readonly 700: "#99710D";
104
- readonly 800: "#664C08";
105
- readonly 900: "#332604";
106
- readonly 950: "#191302";
107
- };
108
- readonly cyan: {
109
- readonly 50: "#E8FFFC";
110
- readonly 100: "#D0FFFA";
111
- readonly 200: "#A1FFF4";
112
- readonly 300: "#73FFEF";
113
- readonly 400: "#44FFE9";
114
- readonly 500: "#15FFE4";
115
- readonly 600: "#11CCB6";
116
- readonly 700: "#0D9989";
117
- readonly 800: "#08665B";
118
- readonly 900: "#04332E";
119
- readonly 950: "#021917";
120
- };
121
- };
122
- export type Colors = typeof colors;
123
- export type ColorFamilyName = keyof Colors;
124
- export type ColorShade = keyof typeof colorShadeOpacity;
125
- export type ColorFamily<Name extends ColorFamilyName = ColorFamilyName> = Colors[Name];
126
- export declare const colorCssVariables: Record<string, string>;
127
- export declare const colorCssVars: {
128
- readonly neutral: {
129
- readonly 25: "var(--color-neutral-25)";
130
- readonly 50: "var(--color-neutral-50)";
131
- readonly 100: "var(--color-neutral-100)";
132
- readonly 200: "var(--color-neutral-200)";
133
- readonly 300: "var(--color-neutral-300)";
134
- readonly 400: "var(--color-neutral-400)";
135
- readonly 500: "var(--color-neutral-500)";
136
- readonly 600: "var(--color-neutral-600)";
137
- readonly 700: "var(--color-neutral-700)";
138
- readonly 800: "var(--color-neutral-800)";
139
- readonly 900: "var(--color-neutral-900)";
140
- readonly 950: "var(--color-neutral-950)";
141
- };
142
- readonly green: {
143
- readonly 50: "var(--color-green-50)";
144
- readonly 100: "var(--color-green-100)";
145
- readonly 200: "var(--color-green-200)";
146
- readonly 300: "var(--color-green-300)";
147
- readonly 400: "var(--color-green-400)";
148
- readonly 500: "var(--color-green-500)";
149
- readonly 600: "var(--color-green-600)";
150
- readonly 700: "var(--color-green-700)";
151
- readonly 800: "var(--color-green-800)";
152
- readonly 900: "var(--color-green-900)";
153
- readonly 950: "var(--color-green-950)";
154
- };
155
- readonly blue: {
156
- readonly 50: "var(--color-blue-50)";
157
- readonly 100: "var(--color-blue-100)";
158
- readonly 200: "var(--color-blue-200)";
159
- readonly 300: "var(--color-blue-300)";
160
- readonly 400: "var(--color-blue-400)";
161
- readonly 500: "var(--color-blue-500)";
162
- readonly 600: "var(--color-blue-600)";
163
- readonly 700: "var(--color-blue-700)";
164
- readonly 800: "var(--color-blue-800)";
165
- readonly 900: "var(--color-blue-900)";
166
- readonly 950: "var(--color-blue-950)";
167
- };
168
- readonly purple: {
169
- readonly 50: "var(--color-purple-50)";
170
- readonly 100: "var(--color-purple-100)";
171
- readonly 200: "var(--color-purple-200)";
172
- readonly 300: "var(--color-purple-300)";
173
- readonly 400: "var(--color-purple-400)";
174
- readonly 500: "var(--color-purple-500)";
175
- readonly 600: "var(--color-purple-600)";
176
- readonly 700: "var(--color-purple-700)";
177
- readonly 800: "var(--color-purple-800)";
178
- readonly 900: "var(--color-purple-900)";
179
- readonly 950: "var(--color-purple-950)";
180
- };
181
- readonly red: {
182
- readonly 50: "var(--color-red-50)";
183
- readonly 100: "var(--color-red-100)";
184
- readonly 200: "var(--color-red-200)";
185
- readonly 300: "var(--color-red-300)";
186
- readonly 400: "var(--color-red-400)";
187
- readonly 500: "var(--color-red-500)";
188
- readonly 600: "var(--color-red-600)";
189
- readonly 700: "var(--color-red-700)";
190
- readonly 800: "var(--color-red-800)";
191
- readonly 900: "var(--color-red-900)";
192
- readonly 950: "var(--color-red-950)";
193
- };
194
- readonly orange: {
195
- readonly 50: "var(--color-orange-50)";
196
- readonly 100: "var(--color-orange-100)";
197
- readonly 200: "var(--color-orange-200)";
198
- readonly 300: "var(--color-orange-300)";
199
- readonly 400: "var(--color-orange-400)";
200
- readonly 500: "var(--color-orange-500)";
201
- readonly 600: "var(--color-orange-600)";
202
- readonly 700: "var(--color-orange-700)";
203
- readonly 800: "var(--color-orange-800)";
204
- readonly 900: "var(--color-orange-900)";
205
- readonly 950: "var(--color-orange-950)";
206
- };
207
- readonly yellow: {
208
- readonly 50: "var(--color-yellow-50)";
209
- readonly 100: "var(--color-yellow-100)";
210
- readonly 200: "var(--color-yellow-200)";
211
- readonly 300: "var(--color-yellow-300)";
212
- readonly 400: "var(--color-yellow-400)";
213
- readonly 500: "var(--color-yellow-500)";
214
- readonly 600: "var(--color-yellow-600)";
215
- readonly 700: "var(--color-yellow-700)";
216
- readonly 800: "var(--color-yellow-800)";
217
- readonly 900: "var(--color-yellow-900)";
218
- readonly 950: "var(--color-yellow-950)";
219
- };
220
- readonly cyan: {
221
- readonly 50: "var(--color-cyan-50)";
222
- readonly 100: "var(--color-cyan-100)";
223
- readonly 200: "var(--color-cyan-200)";
224
- readonly 300: "var(--color-cyan-300)";
225
- readonly 400: "var(--color-cyan-400)";
226
- readonly 500: "var(--color-cyan-500)";
227
- readonly 600: "var(--color-cyan-600)";
228
- readonly 700: "var(--color-cyan-700)";
229
- readonly 800: "var(--color-cyan-800)";
230
- readonly 900: "var(--color-cyan-900)";
231
- readonly 950: "var(--color-cyan-950)";
232
- };
233
- };
234
- export type ColorCssVars = typeof colorCssVars;
package/dist/tokens/primitives/typography.d.ts DELETED
@@ -1,32 +0,0 @@
1
- export declare const fontFamily: {
2
- readonly sans: "var(--default-font-family)";
3
- };
4
- export declare const fontWeight: {
5
- readonly regular: 400;
6
- readonly semibold: 600;
7
- };
8
- export declare const fontSize: {
9
- readonly xs: "12px";
10
- readonly sm: "14px";
11
- readonly md: "16px";
12
- readonly lg: "20px";
13
- readonly xl: "24px";
14
- readonly '2xl': "32px";
15
- readonly '3xl': "40px";
16
- readonly '4xl': "48px";
17
- readonly '5xl': "60px";
18
- };
19
- export declare const lineHeight: {
20
- readonly 16: "16px";
21
- readonly 20: "20px";
22
- readonly 24: "24px";
23
- readonly 28: "28px";
24
- readonly 40: "40px";
25
- readonly 48: "48px";
26
- readonly 56: "56px";
27
- readonly 72: "72px";
28
- };
29
- export type FontFamily = (typeof fontFamily)[keyof typeof fontFamily];
30
- export type FontWeight = (typeof fontWeight)[keyof typeof fontWeight];
31
- export type FontSize = (typeof fontSize)[keyof typeof fontSize];
32
- export type LineHeight = (typeof lineHeight)[keyof typeof lineHeight];