@breathe-ds/ui 0.0.0-stage → 0.1.1

package/theme.css

@@ -0,0 +1,40 @@
+/*
+  @breathe-ds/ui — theme.css  (tokens-first, v0.1)
+
+  Contrato de tokens da família Cuidado Global (ecossistema RTA/Mariangela).
+  As CORES são PAPÉIS: o valor de cada uma vem de uma CSS var `--cg-*` que
+  CADA SITE define (ttcab petróleo/creme, creeta petróleo/névoa/magenta…).
+  Assim os sites herdam a MESMA estrutura e nomes, com a própria paleta.
+
+  Uso no globals.css de um site (Tailwind v4):
+    @import "tailwindcss";
+    @import "@breathe-ds/ui/theme.css";
+    @import "@breathe-ds/ui/tokens/ttcab.css";   (ou defina os --cg-* inline)
+
+  Escalas fixas (tipografia-papel, raio, motion) são compartilhadas aqui.
+  Contrastes medidos de cada paleta: ver README.md e os arquivos tokens/*.
+*/
+@theme {
+  /* ── Cores (papéis) — valor vem dos --cg-* do site ── */
+  --color-surface: var(--cg-surface);              /* fundo base */
+  --color-surface-panel: var(--cg-surface-panel);  /* painel escuro (footer/CTA) */
+  --color-ink: var(--cg-ink);                      /* texto principal / títulos */
+  --color-ink-soft: var(--cg-ink-soft);            /* texto secundário */
+  --color-ink-body: var(--cg-ink-body);            /* corpo de leitura */
+  --color-action: var(--cg-action);                /* CTA/destaque — nunca texto puro */
+  --color-action-text: var(--cg-action-text);      /* texto na cor de ação (AA) */
+  --color-on-action: var(--cg-on-action);          /* texto SOBRE a cor de ação (botão) */
+  --color-line: var(--cg-line);                    /* hairlines/bordas */
+
+  /* ── Tipografia (papéis; família real vem dos --cg-font-*) ── */
+  --font-heading: var(--cg-font-heading, system-ui, sans-serif);
+  --font-body: var(--cg-font-body, Arial, system-ui, sans-serif);
+
+  /* ── Raio ── */
+  --radius-xl: 24px;
+  --radius-2xl: 28px;
+  --radius-pill: 9999px;
+
+  /* ── Motion — curva assinatura da família ── */
+  --ease-cg: cubic-bezier(0.2, 0.8, 0.2, 1);
+}

package/tokens/creeta.css

@@ -0,0 +1,21 @@
+/*
+  Paleta Creeta (clínica RTA em Floripa) — petróleo + névoa + magenta.
+  Valores do novo.creeta. Contrastes medidos (fórmula WCAG):
+   - surface #eef3f4 / ink #144753 ............ ~9,1:1 (AAA)
+   - surface #eef3f4 / ink-soft #52707a ....... ~4,7:1 (AA)
+   - action #ab2781 (magenta) é o CTA ("Agendar"); texto sobre ele = branco.
+*/
+:root {
+  --cg-surface: #eef3f4;        /* névoa */
+  --cg-surface-panel: #144753;  /* petróleo */
+  --cg-ink: #144753;            /* petróleo */
+  --cg-ink-soft: #52707a;
+  --cg-ink-body: #1e4f5b;
+  --cg-action: #ab2781;         /* magenta (Agendar) */
+  --cg-action-text: #8f1f6c;    /* magenta mais escuro p/ texto */
+  --cg-on-action: #ffffff;      /* branco sobre magenta */
+  --cg-line: rgb(20 71 83 / 0.16);
+  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
+  --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree */
+}
+CSS

package/tokens/neutral.css

@@ -0,0 +1,21 @@
+/*
+  Paleta NEUTRA — o padrão do Breathe. O design system é neutro de propósito:
+  a cor vem de CADA aplicação (ttcab, creeta…). Use isto como base e sobrescreva
+  os --cg-* no :root do seu site. Monocromático (cinza/quase-preto) pra deixar
+  claro que é um placeholder "traga sua cor".
+   - surface #ffffff / ink #18181b ............ ~17:1 (AAA)
+   - surface #ffffff / ink-soft #71717a ....... ~4,8:1 (AA)
+*/
+:root {
+  --cg-surface: #ffffff;
+  --cg-surface-panel: #18181b;
+  --cg-ink: #18181b;
+  --cg-ink-soft: #71717a;
+  --cg-ink-body: #3f3f46;
+  --cg-action: #18181b;
+  --cg-action-text: #52525b;
+  --cg-on-action: #ffffff;
+  --cg-line: rgb(0 0 0 / 0.12);
+  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixo da família) */
+  --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree (fixo da família) */
+}

package/tokens/ttcab.css

@@ -0,0 +1,22 @@
+/*
+  Paleta TTCAB (petróleo + creme). Contrastes medidos:
+   - surface #fbf5e9 / ink #144753 ............ 9,41:1 (AAA)
+   - surface #fbf5e9 / ink-soft #54707a ....... 4,86:1 (AA)
+   - surface #fbf5e9 / ink-body #1e4f5b ....... 8,32:1 (AAA)
+   - surface #fbf5e9 / action-text #9a5d07 .... 4,90:1 (AA)
+   - surface-panel #144753 / surface (texto) .. 9,41:1 (AAA)
+   - action #f6a22a é DECORATIVO/CTA — nunca texto sobre creme.
+*/
+:root {
+  --cg-surface: #fbf5e9;
+  --cg-surface-panel: #144753;
+  --cg-ink: #144753;
+  --cg-ink-soft: #54707a;
+  --cg-ink-body: #1e4f5b;
+  --cg-action: #f6a22a;
+  --cg-on-action: #144753;   /* ink sobre orange */
+  --cg-action-text: #9a5d07;
+  --cg-line: rgb(20 71 83 / 0.16);
+  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
+  --cg-font-body: var(--font-figtree), system-ui, sans-serif;      /* Figtree */
+}