@marsaude/tokens 1.0.1 → 1.0.2
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 +78 -6
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -1,15 +1,87 @@
|
|
|
1
|
-
|
|
1
|
+
```markdown
|
|
2
|
+
# Sira Design Tokens (@marsaude/tokens)
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
Pacote de Design Tokens do Sira Design System. Este pacote contém as variáveis de estilo (cores, tipografia, espaçamentos) geradas automaticamente a partir do Style Dictionary.
|
|
4
5
|
|
|
6
|
+
## 📦 Instalação
|
|
7
|
+
|
|
8
|
+
Para instalar a versão mais recente no seu projeto:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @marsaude/tokens
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 🚀 Como Usar
|
|
18
|
+
|
|
19
|
+
Este pacote expõe diferentes arquivos SCSS dependendo da sua necessidade (apenas variáveis ou classes utilitárias).
|
|
20
|
+
|
|
21
|
+
### 1. Importando as Variáveis (Recomendado)
|
|
22
|
+
|
|
23
|
+
Para ter acesso às variáveis CSS/SCSS (ex: cores, fontes) em todo o seu projeto, importe o arquivo principal no seu `styles.scss` global:
|
|
24
|
+
|
|
25
|
+
```scss
|
|
26
|
+
// No arquivo src/styles.scss
|
|
27
|
+
@import '@marsaude/tokens/mobile';
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**Exemplo de uso no CSS:**
|
|
32
|
+
|
|
33
|
+
```scss
|
|
34
|
+
.meu-componente {
|
|
35
|
+
// Use as variáveis CSS definidas pelos tokens
|
|
36
|
+
background-color: var(--mar-color-brand-primary);
|
|
37
|
+
padding: var(--mar-spacing-md);
|
|
38
|
+
border-radius: var(--mar-radius-sm);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 2. Importando Classes Utilitárias
|
|
44
|
+
|
|
45
|
+
Se você precisa das classes utilitárias geradas (helpers), utilize o import específico:
|
|
46
|
+
|
|
47
|
+
```scss
|
|
48
|
+
@import '@marsaude/tokens/mobile-classes';
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## 🛠️ Desenvolvimento e Publicação (Para Mantenedores)
|
|
55
|
+
|
|
56
|
+
### Como gerar os tokens
|
|
57
|
+
|
|
58
|
+
Se você alterou os arquivos de configuração ou os tokens brutos, regenere os arquivos de build:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npm run build
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Como publicar uma nova versão
|
|
66
|
+
|
|
67
|
+
O script de publicação já garante que o build seja rodado automaticamente antes de enviar.
|
|
68
|
+
|
|
69
|
+
1. **Atualize a versão** (se necessário):
|
|
5
70
|
```bash
|
|
6
|
-
|
|
71
|
+
npm version patch
|
|
72
|
+
|
|
7
73
|
```
|
|
8
74
|
|
|
9
|
-
Otherwise, install Style Dictionary locally for this project first, `cd` into this directory and run:
|
|
10
75
|
|
|
76
|
+
2. **Publique no NPM:**
|
|
11
77
|
```bash
|
|
12
|
-
npm
|
|
78
|
+
npm publish --access public
|
|
79
|
+
|
|
13
80
|
```
|
|
14
81
|
|
|
15
|
-
|
|
82
|
+
|
|
83
|
+
*(Certifique-se de que o token de acesso granular está configurado corretamente na sua máquina).*
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@marsaude/tokens",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Design Tokens do Sira Design System",
|
|
6
6
|
"publishConfig": {
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "node build-tokens.js --verbose",
|
|
20
|
-
"publish": "npm publish --access public"
|
|
21
|
-
"prepublishOnly": "npm run build"
|
|
20
|
+
"publish": "npm run build && npm publish --access public"
|
|
22
21
|
},
|
|
23
22
|
"devDependencies": {
|
|
24
23
|
"@tokens-studio/sd-transforms": "^1.3.0",
|