pswex-design-system 7.0.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/LICENSE.md +16 -0
- package/README.md +67 -0
- package/bin/instalar.mjs +62 -0
- package/package.json +31 -0
- package/skill/README.md +57 -0
- package/skill/SKILL.md +117 -0
- package/skill/assets/PROMPT-FIGMA.md +138 -0
- package/skill/assets/catalogo-icones.json +324 -0
- package/skill/assets/figma-variables.json +764 -0
- package/skill/assets/manifesto.json +1287 -0
- package/skill/assets/pswex.tokens.json +694 -0
- package/skill/assets/styles.css +381 -0
- package/skill/assets/tokens.css +81 -0
- package/skill/references/classes.md +27 -0
- package/skill/references/componentes.md +628 -0
- package/skill/references/cor.md +166 -0
- package/skill/references/fundos.md +43 -0
- package/skill/references/icones.md +71 -0
- package/skill/references/voz.md +76 -0
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* Tokens da PSWEX. Gerado de ds/styles.css, nao edite a mao. */
|
|
2
|
+
:root{
|
|
3
|
+
/* marca / principal */
|
|
4
|
+
--navy:#232F3E;
|
|
5
|
+
--red:#C7273E;
|
|
6
|
+
--teal:#1F4768;
|
|
7
|
+
/* marca / secundaria */
|
|
8
|
+
--mint:#C1EDCC;
|
|
9
|
+
--sky:#7CCFDB;
|
|
10
|
+
--leaf:#669933;
|
|
11
|
+
--lime:#99CC33;
|
|
12
|
+
/* marca / variacao */
|
|
13
|
+
--navy-700:#35485F;
|
|
14
|
+
--navy-800:#2B3A4D;
|
|
15
|
+
--navy-900:#1B2531;
|
|
16
|
+
--navy-950:#19212C;
|
|
17
|
+
--red-600:#A92135;
|
|
18
|
+
--red-700:#941D2E;
|
|
19
|
+
--sky-800:#267F8C;
|
|
20
|
+
--leaf-800:#4A6F25;
|
|
21
|
+
/* marca / neutro */
|
|
22
|
+
--charcoal:#353437;
|
|
23
|
+
--gray-dark:#4D4D4C;
|
|
24
|
+
--gray-mid:#656565;
|
|
25
|
+
--ice:#FFFCF1;
|
|
26
|
+
--offwhite:#F4F4EE;
|
|
27
|
+
/* sobre-cor / texto */
|
|
28
|
+
--lime-ink:#232F3E;
|
|
29
|
+
--on-bright:#232F3E;
|
|
30
|
+
--ondark-200:#AFBCCC;
|
|
31
|
+
--ondark-400:#94A6BC;
|
|
32
|
+
--red-ondark:#F4808F;
|
|
33
|
+
/* sobre-cor / linha */
|
|
34
|
+
--line-inv:rgba(196,219,241,.24);
|
|
35
|
+
/* layout / medida */
|
|
36
|
+
--shell:1200px;
|
|
37
|
+
/* layout / raio */
|
|
38
|
+
--r:14px;
|
|
39
|
+
--r-lg:22px;
|
|
40
|
+
/* layout / sombra */
|
|
41
|
+
--shadow:0 1px 3px rgba(35,47,62,.08),0 6px 14px -8px rgba(35,47,62,.12);
|
|
42
|
+
--shadow-lg:0 2px 6px rgba(35,47,62,.10),0 14px 28px -14px rgba(35,47,62,.18);
|
|
43
|
+
/* tema / fundo */
|
|
44
|
+
--bg:var(--snow);
|
|
45
|
+
--surface:var(--paper);
|
|
46
|
+
--paper:#FFFFFF;
|
|
47
|
+
--snow:#FFFAFA;
|
|
48
|
+
--beige:#F8F4E3;
|
|
49
|
+
--light:#F2F3F4;
|
|
50
|
+
--teal-50:#E9F0F7;
|
|
51
|
+
/* tema / texto */
|
|
52
|
+
--fg:var(--navy);
|
|
53
|
+
--ink:var(--navy);
|
|
54
|
+
--ink-2:var(--gray-dark);
|
|
55
|
+
--ink-3:var(--gray-mid);
|
|
56
|
+
--muted:var(--gray-mid);
|
|
57
|
+
/* tema / acento */
|
|
58
|
+
--accent-txt:var(--red);
|
|
59
|
+
--accent-2-txt:var(--teal);
|
|
60
|
+
/* tema / linha */
|
|
61
|
+
--line:#D5DBE2;
|
|
62
|
+
--line-300:#9CA7B4;
|
|
63
|
+
}
|
|
64
|
+
[data-theme=dark]{
|
|
65
|
+
--accent-2-txt:#8FC5DE;
|
|
66
|
+
--accent-txt:#F4808F;
|
|
67
|
+
--beige:#1E2732;
|
|
68
|
+
--bg:#12181F;
|
|
69
|
+
--fg:#EEF3F8;
|
|
70
|
+
--ink:#EEF3F8;
|
|
71
|
+
--ink-2:#C3CFDC;
|
|
72
|
+
--ink-3:#A3B2C2;
|
|
73
|
+
--light:#1A222C;
|
|
74
|
+
--line:#2C3947;
|
|
75
|
+
--line-300:#44566A;
|
|
76
|
+
--muted:#9FB0C2;
|
|
77
|
+
--paper:#1B242F;
|
|
78
|
+
--snow:#151D26;
|
|
79
|
+
--surface:var(--paper);
|
|
80
|
+
--teal-50:#17222E;
|
|
81
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Vocabulário de classe
|
|
2
|
+
|
|
3
|
+
Escreva em classe do sistema, não em CSS novo. As que existem:
|
|
4
|
+
|
|
5
|
+
| Família | Classes |
|
|
6
|
+
|---|---|
|
|
7
|
+
| estrutura | `shell`, `split` com `split-a` `split-b` `split-c`, `row2` |
|
|
8
|
+
| fundo de seção | `dark`, `tint`, `tint-blue`, `tint-mint`, `on-dark` |
|
|
9
|
+
| texto | `eyebrow`, `lead`, `sm`, `xs`, `tag` |
|
|
10
|
+
| botão | `btn` com `btn--cta` `btn--red` `btn--ghost`, `txtlink` |
|
|
11
|
+
| bloco | `card`, `cards` com `c2` `c3` `c4`, `case` e `case-body`, `quote`, `quotes`, `sec-head` |
|
|
12
|
+
| lista | `ticks` (e `ticks no` para o X), `steps-list`, `pill-list`, `selos` e `selo` |
|
|
13
|
+
| formulário | `lead-form`, `field`, `consent`, `err`, `ok-msg` |
|
|
14
|
+
| hero | `hero`, `hero-actions`, `hero-note` |
|
|
15
|
+
| casco | `topbar` com `brand` e `nav`, `footer.site` com `cols` e `foot-col`, `legal`, `skip` |
|
|
16
|
+
| prova | `wall` com `grid` e `cell`, `vid`, `ratingbar` com `stars` |
|
|
17
|
+
| celular | `phone-stage`, `phone`, `phone-screen`, `bubble` e `bubble me`, `step`, `steps-mobile` |
|
|
18
|
+
| modal do WhatsApp | `wa-modal`, `wa-backdrop`, `wa-card`, `wa-x`, `wa-eyebrow`, `wa-sub`, `wa-form`, `wa-go`, `wa-nota` |
|
|
19
|
+
| gradiente | `grad` e as variantes `grad-v` `grad-card` `grad-azul` `grad-vermelho`, sempre junto com `dark` |
|
|
20
|
+
| ícone | `card-ico` para o ícone dentro de card e caso |
|
|
21
|
+
| outros | `faq` em `details`, `rv` e `rv in` |
|
|
22
|
+
|
|
23
|
+
`btn--cta` é o lime e entra uma vez por tela, na ação que converte.
|
|
24
|
+
|
|
25
|
+
Três breakpoints decidem o que aparece, e errar a largura do quadro esconde metade do componente:
|
|
26
|
+
`nav` some abaixo de 960px, `split` vira uma coluna abaixo de 900px, e os `step` do celular saem da
|
|
27
|
+
posição absoluta e empilham abaixo de 1100px.
|