@x-green/components 0.2.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.
- package/README.md +16 -3
- package/dist/components/button.d.ts +2 -1
- package/dist/theme.css +216 -0
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -12,7 +12,14 @@ import { Button } from '@x-green/components'
|
|
|
12
12
|
</Button>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
O CSS do `Button` entra junto com o import.
|
|
15
|
+
O CSS do `Button` entra junto com o import. Classes extras no `className` (`w-full`, `bg-primary`, `body-md`) só existem se o app tiver Tailwind. No CSS de entrada do app:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@x-green/components/theme.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
No Vite, o plugin `@tailwindcss/vite` precisa estar ativo. Instale a extensão **Tailwind CSS IntelliSense** e recarregue a janela. Sugestões dentro de `className=""` pedem `"editor.quickSuggestions": { "strings": "on" }` nas settings do editor.
|
|
16
23
|
|
|
17
24
|
## Executar e validar
|
|
18
25
|
|
|
@@ -26,7 +33,7 @@ npm run preview
|
|
|
26
33
|
npm run build:lib
|
|
27
34
|
```
|
|
28
35
|
|
|
29
|
-
`typecheck` executa `tsc -b`. `build` gera a amostra em `site/`. `build:lib` gera o pacote em `dist/` (JS, CSS e tipos). `tailwindcss
|
|
36
|
+
`typecheck` executa `tsc -b`. `build` gera a amostra em `site/`. `build:lib` gera o pacote em `dist/` (JS, CSS compilado, `theme.css` e tipos). `tailwindcss` e `@tailwindcss/vite` são de desenvolvimento neste repo e peer opcional no app consumidor; `tailwind-variants` é dependência da lib; `react` e `react-dom` são peer dependencies.
|
|
30
37
|
|
|
31
38
|
## Publicar no npm
|
|
32
39
|
|
|
@@ -59,6 +66,7 @@ src/
|
|
|
59
66
|
├── index.ts # Reexporta só os componentes (entrada do npm)
|
|
60
67
|
├── index.lib.ts # Entrada do build da lib (importa o CSS)
|
|
61
68
|
├── lib.css # Tailwind compilado para o pacote
|
|
69
|
+
├── theme.css # @theme e @utility exportados no npm
|
|
62
70
|
├── index.css # Tailwind e estilos da amostra
|
|
63
71
|
└── main.tsx # RouterProvider
|
|
64
72
|
```
|
|
@@ -171,7 +179,12 @@ import { Button } from '@x-green/components'
|
|
|
171
179
|
</Button>
|
|
172
180
|
```
|
|
173
181
|
|
|
174
|
-
O pacote exporta `Button` e o tipo `ButtonProps`. Tokens de cor e tipografia ficam no repositório da amostra, não no pacote.
|
|
182
|
+
O pacote exporta `Button` e o tipo `ButtonProps`. Tokens de cor e tipografia ficam no repositório da amostra, não no pacote JS. O IntelliSense e as classes extras no `className` vêm do CSS de tema:
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
@import "tailwindcss";
|
|
186
|
+
@import "@x-green/components/theme.css";
|
|
187
|
+
```
|
|
175
188
|
|
|
176
189
|
## Fonte padrão
|
|
177
190
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ComponentProps } from 'react';
|
|
2
2
|
import type { VariantProps } from 'tailwind-variants';
|
|
3
3
|
import { buttonVariants } from './button-variants';
|
|
4
|
-
export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
|
|
4
|
+
export interface ButtonProps extends Omit<ComponentProps<'button'>, 'className'>, VariantProps<typeof buttonVariants> {
|
|
5
|
+
className?: string;
|
|
5
6
|
}
|
|
6
7
|
export declare function Button({ variant, className, type, children, ...props }: ButtonProps): import("react").JSX.Element;
|
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@x-green/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Design system Xgreen: componentes React.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -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"
|