@seedgrid/fe-theme 2026.3.19 → 2026.3.20

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 (2) hide show
  1. package/README.md +57 -131
  2. package/package.json +7 -7
package/README.md CHANGED
@@ -1,16 +1,15 @@
1
1
  # @seedgrid/fe-theme
2
2
 
3
- Sistema de temas do SeedGrid baseado em **seed color** com geração automática de paletas harmoniosas.
3
+ Sistema de temas do SeedGrid que gera paletas harmônicas, suporta os modos light/dark/auto, expõe tokens prontos e permite troca de tema em tempo de execução.
4
4
 
5
5
  ## Características
6
6
 
7
- - 🎨 **Geração automática de paletas** a partir de uma cor seed
8
- - 🌓 **Dark/Light mode** com suporte a `auto` (detecta preferência do sistema)
9
- - 📦 **Paletas completas** 50-900 para todas as cores (primary, secondary, tertiary, warning, error, info, success)
10
- - 🎯 **Tokens de componentes** pré-configurados (botões, inputs, cards, etc.)
11
- - 💾 **Persistência** de preferências no localStorage
12
- - ⚡ **CSS Variables** para integração com Tailwind
13
- - 🔄 **Troca dinâmica** de tema em runtime
7
+ - **Geração automática de paletas** a partir de uma cor seed com rampas completas (50‑900).
8
+ - **Modo `auto`** que respeita a preferência do sistema, além de `light` e `dark`.
9
+ - **Persistência** de preferências (`seed`, `mode`, `radius`) no `localStorage`.
10
+ - **Tokens CSS** (`--sg-*`) que se integram facilmente com Tailwind, CSS-in-JS ou classes utilitárias.
11
+ - **Hooks reativos** (`useSgTheme`) e `SeedThemeProvider` para trocar tema, atualizar modos e personalizar variáveis.
12
+ - Híbrido com `ThemeProvider` antigo para migração suave.
14
13
 
15
14
  ## Instalação
16
15
 
@@ -18,163 +17,90 @@ Sistema de temas do SeedGrid baseado em **seed color** com geração automática
18
17
  pnpm add @seedgrid/fe-theme
19
18
  ```
20
19
 
21
- ## Uso Básico
22
-
23
- ### 1. Configurar o Provider
20
+ ## Uso básico
24
21
 
25
22
  ```tsx
26
23
  import { SeedThemeProvider } from "@seedgrid/fe-theme";
27
24
 
28
- export default function RootLayout({ children }: { children: React.ReactNode }) {
25
+ export default function Root({ children }: { children: React.ReactNode }) {
29
26
  return (
30
- <html lang="pt-br">
31
- <body className="bg-[rgb(var(--sg-bg))] text-[rgb(var(--sg-text))]">
32
- <SeedThemeProvider
33
- initialTheme={{
34
- seed: "#16803D", // Verde SeedGrid
35
- mode: "auto", // "light" | "dark" | "auto"
36
- radius: 12,
37
- persistMode: true,
38
- }}
39
- >
40
- {children}
41
- </SeedThemeProvider>
42
- </body>
43
- </html>
27
+ <SeedThemeProvider
28
+ initialTheme={{
29
+ seed: "#16803D",
30
+ mode: "auto",
31
+ radius: 12,
32
+ persistMode: true
33
+ }}
34
+ >
35
+ {children}
36
+ </SeedThemeProvider>
44
37
  );
45
38
  }
46
39
  ```
47
40
 
48
- ### 2. Usar o Hook
41
+ ## Hooks e APIs
49
42
 
50
- ```tsx
51
- "use client";
43
+ - `useSgTheme()` retorna `{ currentMode, setMode, seed, setTheme, reset }`.
44
+ - `SeedThemeProvider` aceita `initialTheme`, `persistMode`, `seed`, `radius` e `customVars`.
45
+ - `ThemeProvider`/`useTheme` antigos permanecem como alias para facilitar migração.
46
+
47
+ ## Exemplos
52
48
 
49
+ ### Toggle de modo
50
+
51
+ ```tsx
53
52
  import { useSgTheme } from "@seedgrid/fe-theme";
54
53
 
55
54
  export function ThemeToggle() {
56
- const { setMode, currentMode, setTheme } = useSgTheme();
55
+ const { currentMode, setMode } = useSgTheme();
57
56
 
58
57
  return (
59
- <div className="flex gap-2">
60
- <button onClick={() => setMode(currentMode === "light" ? "dark" : "light")}>
61
- Toggle Mode ({currentMode})
62
- </button>
63
-
64
- <button onClick={() => setTheme({ seed: "#0EA5E9" })}>
65
- Mudar para Azul
66
- </button>
67
- </div>
58
+ <button
59
+ onClick={() => setMode(currentMode === "light" ? "dark" : "light")}
60
+ >
61
+ Alternar para {currentMode === "light" ? "dark" : "light"}
62
+ </button>
68
63
  );
69
64
  }
70
65
  ```
71
66
 
72
- ## CSS Variables Disponíveis
73
-
74
- ### Cores Base
75
- - `--sg-bg` - Background principal
76
- - `--sg-surface` - Superfícies (cards, modais)
77
- - `--sg-text` - Texto principal
78
- - `--sg-muted` - Texto secundário
79
- - `--sg-border` - Bordas
80
- - `--sg-ring` - Focus ring
81
-
82
- ### Paletas (50-900)
83
- - `--sg-primary-{50-900}` - Cor primária
84
- - `--sg-secondary-{50-900}` - Cor secundária
85
- - `--sg-tertiary-{50-900}` - Cor terciária
86
- - `--sg-warning-{50-900}` - Avisos
87
- - `--sg-error-{50-900}` - Erros
88
- - `--sg-info-{50-900}` - Informações
89
- - `--sg-success-{50-900}` - Sucesso
90
-
91
- ### Tokens de Componentes
92
- - `--sg-btn-{variant}-bg` - Background de botões
93
- - `--sg-input-border` - Borda de inputs
94
- - `--sg-card-bg` - Background de cards
95
- - E muitos outros...
96
-
97
- ## Exemplos de Uso com Tailwind
98
-
99
- ### Botão
100
- ```tsx
101
- <button className="
102
- rounded-[var(--sg-radius)]
103
- bg-[rgb(var(--sg-primary-600))]
104
- text-[rgb(var(--sg-on-primary))]
105
- hover:bg-[rgb(var(--sg-primary-700))]
106
- active:bg-[rgb(var(--sg-primary-800))]
107
- border border-[rgb(var(--sg-border))]
108
- focus:outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]
109
- px-4 py-2
110
- ">
111
- Salvar
112
- </button>
113
- ```
67
+ ### Atualizar seed e tokens adicionais
114
68
 
115
- ### Card
116
69
  ```tsx
117
- <div className="
118
- rounded-[var(--sg-radius)]
119
- bg-[rgb(var(--sg-surface))]
120
- border border-[rgb(var(--sg-border))]
121
- p-4
122
- ">
123
- <h3 className="text-[rgb(var(--sg-text))] font-semibold">Título</h3>
124
- <p className="text-[rgb(var(--sg-muted))]">Descrição</p>
125
- </div>
70
+ const { setTheme } = useSgTheme();
71
+
72
+ setTheme({
73
+ seed: "#0EA5E9",
74
+ customVars: {
75
+ "--sg-radius": "6px",
76
+ "--sg-border": "214 41 132"
77
+ }
78
+ });
126
79
  ```
127
80
 
128
- ### Alert
129
- ```tsx
130
- <div className="
131
- rounded-[var(--sg-radius)]
132
- bg-[rgb(var(--sg-warning-100))]
133
- text-[rgb(var(--sg-warning-700))]
134
- border border-[rgb(var(--sg-warning-300))]
135
- p-4
136
- ">
137
- <strong>Atenção:</strong> Algo importante aconteceu.
138
- </div>
139
- ```
81
+ ## Variáveis CSS disponíveis
140
82
 
141
- ## Customização Avançada
83
+ - `--sg-bg`, `--sg-surface`, `--sg-text`, `--sg-muted`, `--sg-border`, `--sg-ring`
84
+ - Paletas completas `--sg-{primary,secondary,tertiary,success,warning,error,info}-{50..900}`
85
+ - Tokens de componentes como `--sg-btn-{variant}-bg`, `--sg-input-border`, `--sg-card-bg`, `--sg-radius`
142
86
 
143
- ### Sobrescrever Cores Semânticas
144
- ```tsx
145
- <SeedThemeProvider
146
- initialTheme={{
147
- seed: "#16803D",
148
- warning: "#FF9800", // Laranja customizado
149
- error: "#F44336", // Vermelho customizado
150
- info: "#2196F3", // Azul customizado
151
- success: "#4CAF50", // Verde customizado
152
- }}
153
- />
154
- ```
87
+ ## Integração com Tailwind
88
+
89
+ Use `rgb(var(--sg-primary-600))` em classes utilitárias para aplicar cores reativas:
155
90
 
156
- ### Custom CSS Variables
157
91
  ```tsx
158
- <SeedThemeProvider
159
- initialTheme={{
160
- seed: "#16803D",
161
- customVars: {
162
- "--sg-radius": "8px",
163
- "--sg-primary-600": "255 0 0", // RGB format
164
- },
165
- }}
166
- />
92
+ <button className="bg-[rgb(var(--sg-primary-600))] text-[rgb(var(--sg-on-primary))]">
93
+ Salvar
94
+ </button>
167
95
  ```
168
96
 
169
- ## Migração do ThemeProvider Antigo
170
-
171
- O provider antigo ainda está disponível para compatibilidade, mas está marcado como deprecated:
97
+ ## Migração do provider antigo
172
98
 
173
99
  ```tsx
174
- // ❌ Antigo (deprecated)
100
+ // 🔴 Antigo (deprecated)
175
101
  import { ThemeProvider, useTheme } from "@seedgrid/fe-theme";
176
102
 
177
- // ✅ Novo (recomendado)
103
+ // ✅ Novo recomendado
178
104
  import { SeedThemeProvider, useSgTheme } from "@seedgrid/fe-theme";
179
105
  ```
180
106
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seedgrid/fe-theme",
3
- "version": "2026.3.19",
3
+ "version": "2026.3.20",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -21,12 +21,8 @@
21
21
  "files": [
22
22
  "dist"
23
23
  ],
24
- "scripts": {
25
- "build": "tsc -p tsconfig.json && node ./scripts/copy-i18n.mjs",
26
- "typecheck": "tsc -p tsconfig.json --noEmit"
27
- },
28
24
  "dependencies": {
29
- "@seedgrid/fe-core": "workspace:*"
25
+ "@seedgrid/fe-core": "2026.3.20"
30
26
  },
31
27
  "peerDependencies": {
32
28
  "react": "^18.2.0 || ^19.0.0"
@@ -34,5 +30,9 @@
34
30
  "devDependencies": {
35
31
  "@types/react": "^19.0.0",
36
32
  "fs-extra": "^11.2.0"
33
+ },
34
+ "scripts": {
35
+ "build": "tsc -p tsconfig.json && node ./scripts/copy-i18n.mjs",
36
+ "typecheck": "tsc -p tsconfig.json --noEmit"
37
37
  }
38
- }
38
+ }