@breathe-ds/ui 0.1.1 → 0.3.0

package/theme.css

@@ -1,40 +1,106 @@
 /*
   @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.
+  Token contract of the Cuidado Global family (RTA/Mariangela ecosystem).
+  COLORS are ROLES: the value of each one comes from a `--cg-*` CSS var that
+  EACH SITE defines (ttcab petrol/cream, creeta petrol/mist/magenta…).
+  This way the sites inherit the SAME structure and names, with their own palette.
 
-  Uso no globals.css de um site (Tailwind v4):
+  Usage in a site's globals.css (Tailwind v4):
     @import "tailwindcss";
     @import "@breathe-ds/ui/theme.css";
-    @import "@breathe-ds/ui/tokens/ttcab.css";   (ou defina os --cg-* inline)
+    @import "@breathe-ds/ui/tokens/ttcab.css";   (or define the --cg-* inline)
 
-  Escalas fixas (tipografia-papel, raio, motion) são compartilhadas aqui.
-  Contrastes medidos de cada paleta: ver README.md e os arquivos tokens/*.
+  Fixed scales (typography roles, radius, motion) are shared here.
+  Measured contrasts of each palette: see README.md and the tokens/* files.
 */
 @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-*) ── */
+  /* ── Colors (roles) — value comes from the site's --cg-* ── */
+  --color-surface: var(--cg-surface);              /* base background */
+  --color-surface-panel: var(--cg-surface-panel);  /* dark panel (footer/CTA) */
+  --color-card: var(--cg-card, #ffffff);           /* raised surface: cards, pills, menus over the page */
+  --color-ink: var(--cg-ink);                      /* primary text / headings */
+  --color-ink-soft: var(--cg-ink-soft);            /* secondary text */
+  --color-ink-body: var(--cg-ink-body);            /* body copy */
+  --color-action: var(--cg-action);                /* CTA/highlight — never plain text */
+  --color-action-text: var(--cg-action-text);      /* text in the action color (AA) */
+  --color-on-action: var(--cg-on-action);          /* text ON the action color (button) */
+  --color-line: var(--cg-line);                    /* hairlines/borders */
+
+  /* ── Typography (roles; actual family comes from --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 ── */
   --radius-xl: 24px;
   --radius-2xl: 28px;
   --radius-pill: 9999px;
 
-  /* ── Motion — curva assinatura da família ── */
+  /* ── Motion — the family's signature curve ── */
   --ease-cg: cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+
+/* ── Base behaviour the whole family shares ──
+   Smooth scrolling for anchors (AnchorNav, "On this page", BottomNav); off
+   for people who asked for reduced motion. The header sticks at the top
+   (~5rem) and, on phones, the BottomNav sticks at the bottom: without this
+   padding the control that receives keyboard focus would stop hidden behind
+   them (WCAG 2.4.11). Anchored sections may still add their own scroll-margin. */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 6rem;
+    scroll-padding-bottom: 7rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+}
+
+/* Outbound/anchor arrow on links: takes a small step toward where the link
+   goes, on hover. Used by Footer, List, Byline, PersonChip, PillList. */
+@media (prefers-reduced-motion: no-preference) {
+  .cg-arrow-go {
+    transition: transform 150ms var(--ease-cg);
+  }
+  a:hover .cg-arrow-go,
+  .group:hover .cg-arrow-go {
+    transform: translate(2px, -2px);
+  }
+  .cg-arrow-down {
+    transition: transform 150ms var(--ease-cg);
+  }
+  a:hover .cg-arrow-down,
+  .group:hover .cg-arrow-down {
+    transform: translateY(2px);
+  }
+}
+
+/* ── BreatheMark: the symbol "breathes" (scale pulse); off under reduced motion ── */
+@keyframes breathe-mark-inhale {
+  0%, 100% { transform: scale(0.93); }
+  50%      { transform: scale(1.05); }
+}
+.breathe-mark__g {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: breathe-mark-inhale var(--breathe-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
+}
+.breathe-mark--static .breathe-mark__g { animation: none; }
+@media (prefers-reduced-motion: reduce) { .breathe-mark__g { animation: none; } }
+      
+
+/* ── Lockup entrance: symbol (scale + slight turn) → name (slides in) → tagline.
+   Same vocabulary as the Curtain; under reduced motion only a short fade. ── */
+.cg-lockup--entrance .cg-lockup__mark{ animation: cg-lockup-mark 500ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) var(--cg-entrance-delay,0ms) both; }
+.cg-lockup--entrance .cg-lockup__name{ animation: cg-lockup-name 420ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) calc(var(--cg-entrance-delay,0ms) + 420ms) both; }
+.cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-tag 360ms ease calc(var(--cg-entrance-delay,0ms) + 700ms) both; }
+@keyframes cg-lockup-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
+@keyframes cg-lockup-name{ from{ opacity:0; transform:translateX(-8px); } }
+@keyframes cg-lockup-tag{ from{ opacity:0; transform:translateY(4px); } }
+@media (prefers-reduced-motion:reduce){
+  .cg-lockup--entrance .cg-lockup__mark, .cg-lockup--entrance .cg-lockup__name, .cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-fade 240ms ease var(--cg-entrance-delay,0ms) both; }
+  @keyframes cg-lockup-fade{ from{ opacity:0; } }
+}

package/tokens/creeta.css

@@ -1,21 +1,23 @@
 /*
-  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.
+  Creeta palette (RTA clinic in Floripa) — petrol + mist + magenta.
+  Values from novo.creeta. Measured contrasts (WCAG formula):
+   - surface #eef3f4 / ink #144753 ............ ~9.1:1 (AAA)
+   - surface #eef3f4 / ink-soft #266675 ....... 5.79:1 (AA) — the site's "teal-escuro":
+     second tone of two-tone headings, eyebrows, strong links
+   - surface #eef3f4 / ink-body #1e4f5b ....... 8.07:1 (AAA)
+   - action #ab2781 (magenta) is the CTA ("Agendar"); text on it = white.
 */
 :root {
-  --cg-surface: #eef3f4;        /* névoa */
-  --cg-surface-panel: #144753;  /* petróleo */
-  --cg-ink: #144753;            /* petróleo */
-  --cg-ink-soft: #52707a;
+  --cg-surface: #eef3f4;        /* mist */
+  --cg-surface-panel: #144753;  /* petrol */
+  --cg-card: #ffffff;           /* cards, pills and menus over the page */
+  --cg-ink: #144753;            /* petrol */
+  --cg-ink-soft: #266675;       /* teal-escuro */
   --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-action-text: #8f1f6c;    /* darker magenta for text */
+  --cg-on-action: #ffffff;      /* white on 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

@@ -1,21 +1,27 @@
 /*
-  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)
+  NEUTRAL palette — the Breathe default. The design system is neutral on
+  purpose: color comes from EACH application (ttcab, creeta…). Use this as the
+  base and override the --cg-* in your site's :root. Monochrome (gray/near-black)
+  to make it clear it is a "bring your own color" placeholder.
+  The page is a light gray and the cards are white: the family is tonal (mist on
+  creeta, cream on ttcab), so the neutral palette is too — a white page would
+  swallow the white cards.
+   - surface #f4f4f5 / ink #18181b ............ 16.1:1 (AAA)
+   - surface #f4f4f5 / ink-soft #65656e ....... 5.25:1 (AA)
+   - surface #f4f4f5 / ink-body #3f3f46 ....... 9.5:1 (AAA)
+   - card #ffffff / ink-soft #65656e .......... 5.77:1 (AA)
 */
 :root {
-  --cg-surface: #ffffff;
+  --cg-surface: #f4f4f5;        /* page: light gray, so white cards read */
   --cg-surface-panel: #18181b;
+  --cg-card: #ffffff;
   --cg-ink: #18181b;
-  --cg-ink-soft: #71717a;
+  --cg-ink-soft: #65656e;
   --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) */
+  --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixed across the family) */
+  --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree (fixed across the family) */
 }

package/tokens/ttcab.css

@@ -1,20 +1,21 @@
 /*
-  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.
+  TTCAB palette (petrol + cream). Measured contrasts:
+   - 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 (text) ... 9.41:1 (AAA)
+   - action #f6a22a is DECORATIVE/CTA — never text on cream.
 */
 :root {
   --cg-surface: #fbf5e9;
   --cg-surface-panel: #144753;
+  --cg-card: #ffffff;           /* cards, pills and menus over the page */
   --cg-ink: #144753;
   --cg-ink-soft: #54707a;
   --cg-ink-body: #1e4f5b;
   --cg-action: #f6a22a;
-  --cg-on-action: #144753;   /* ink sobre orange */
+  --cg-on-action: #144753;   /* ink on orange */
   --cg-action-text: #9a5d07;
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */

package/components/Cortina.tsx

@@ -1,152 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import { BreatheMark } from "./BreatheMark";
-
-type Props = {
-  /** Nome da marca (ex.: "creeta", "TTCAB", "Breathe"). */
-  name: ReactNode;
-  /** Linha abaixo do nome (ex.: "Centro de Reequilíbrio Toracoabdominal"). */
-  tagline?: ReactNode;
-  /** Símbolo à esquerda do nome. Padrão: o BreatheMark (anel + ponto). Cada
-   *  site injeta o seu logotipo aqui. */
-  logo?: ReactNode;
-  /** Quando `name` é um wordmark svg: altura dele como fração da altura do
-   *  símbolo, do manual da marca (ex.: `CREETA_LOCKUP.wordmarkPerSymbol`). */
-  wordmarkRatio?: number;
-  /** Lado do símbolo. Padrão `left`; o TTCAB é `right` (`TTCAB_LOCKUP.symbolSide`). */
-  symbolSide?: "left" | "right";
-  /** Chave do sessionStorage (quando há o script de cabeça). */
-  storageKey?: string;
-  /** Chamado quando a cortina termina de subir. */
-  onDone?: () => void;
-  className?: string;
-};
-
-/**
- * Cortina de entrada da família Cuidado Global — tela cheia, na cor do site
- * (tokens surface/ink), com o logotipo + nome se formando no centro e a
- * tagline embaixo; depois ela sobe e mostra a página. Espelha a `Cortina` do
- * creeta, mas neutra: a paleta e o logotipo vêm de cada app.
- *
- * - É toda em CSS (estilo embutido): sem JavaScript ela sobe do mesmo jeito,
- *   então nunca fica presa na frente do site.
- * - Não recebe clique nem foco e não existe para leitor de tela (aria-hidden).
- * - Com movimento reduzido (ou impressão) não aparece.
- * - Para aparecer só na 1ª visita da sessão, ponha `cortinaHeadScript()` no
- *   <head> (antes da pintura): em visita repetida o <html> já nasce com
- *   data-cg-cortina="vista" e a cortina não é desenhada — sem piscar.
- *
- * Ao terminar de subir, o <html> ganha data-cg-cortina-fim (para o topo das
- * páginas "pousar" só depois dela, nunca numa troca de tela) e chama onDone.
- */
-export function Cortina({ name, tagline, logo, wordmarkRatio, symbolSide = "left", storageKey, onDone, className }: Props) {
-  const el = useRef<HTMLDivElement>(null);
-  const [gone, setGone] = useState(false);
-
-  useEffect(() => {
-    const node = el.current;
-    if (!node) return;
-    const aoTerminar = (e: AnimationEvent) => {
-      if (e.animationName !== "cg-cortina-sobe") return;
-      document.documentElement.setAttribute("data-cg-cortina-fim", "");
-      try {
-        if (storageKey) sessionStorage.setItem(storageKey, "1");
-      } catch {
-        /* sessionStorage bloqueado: a cortina só aparece de novo, nada quebra */
-      }
-      onDone?.();
-      setGone(true);
-    };
-    node.addEventListener("animationend", aoTerminar);
-    return () => node.removeEventListener("animationend", aoTerminar);
-  }, [onDone, storageKey]);
-
-  if (gone) return null;
-
-  return (
-    <div ref={el} className={`cg-cortina${className ? ` ${className}` : ""}`} aria-hidden="true">
-      <style>{CORTINA_CSS}</style>
-      {/* Símbolo à esquerda: ele abraça o bloco nome+tagline. À direita (TTCAB):
-          ele encosta no nome, na mesma linha, e a tagline fica embaixo — senão
-          o símbolo iria parar depois da tagline, longe do wordmark. */}
-      {(() => {
-        const mark = <span className="cg-cortina__mark">{logo ?? <BreatheMark size={60} duration={5} />}</span>;
-        const nameEl = (
-          <span
-            className="cg-cortina__name"
-            style={wordmarkRatio ? ({ "--cg-wordmark": `calc(var(--cg-cortina-mark) * ${wordmarkRatio})` } as CSSProperties) : undefined}
-          >
-            {name}
-          </span>
-        );
-        const tag = tagline ? <span className="cg-cortina__tag">{tagline}</span> : null;
-        return symbolSide === "right" ? (
-          <div className="cg-cortina__lockup cg-cortina__lockup--right">
-            <span className="cg-cortina__row">{nameEl}{mark}</span>
-            {tag}
-          </div>
-        ) : (
-          <div className="cg-cortina__lockup">
-            {mark}
-            <span className="cg-cortina__text">{nameEl}{tag}</span>
-          </div>
-        );
-      })()}
-    </div>
-  );
-}
-
-/**
- * Script para o <head> (antes da pintura): marca a cortina como vista nesta
- * sessão, para não repetir ao navegar nem ao recarregar. Sem ele, a cortina
- * aparece a cada carregamento.
- *   // Next (app/layout):
- *   <script dangerouslySetInnerHTML={{ __html: cortinaHeadScript("cg-cortina") }} />
- */
-export function cortinaHeadScript(storageKey = "cg-cortina") {
-  const k = JSON.stringify(storageKey);
-  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-cortina','vista')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
-}
-
-const CORTINA_CSS = `
-.cg-cortina{
-  --cg-cortina-mark: clamp(40px,7.4vw,60px); /* altura do símbolo */
-  position:fixed; inset:0 0 -40px; padding-bottom:40px;
-  z-index:120; display:grid; place-items:center;
-  border-radius:0 0 32px 32px;
-  background:var(--color-surface,#fff); color:var(--color-ink,#14323a);
-  box-shadow:0 24px 60px -20px rgba(0,0,0,.28);
-  pointer-events:none;
-  animation:cg-cortina-sobe 700ms cubic-bezier(.77,0,.175,1) 2200ms both;
-}
-/* gap ≈ 1/3 do corpo do nome: o anel é curvo, então o vão óptico lê um pouco maior que o geométrico */
-.cg-cortina__lockup{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); padding:0 24px; }
-.cg-cortina__lockup--right{ flex-direction:column; align-items:flex-start; }
-.cg-cortina__row{ display:flex; align-items:center; gap:clamp(10px,1.6vw,16px); }
-.cg-cortina__lockup--right .cg-cortina__name{ animation-name:cg-cortina-nome-dir; }
-.cg-cortina__mark{ display:inline-flex; color:var(--color-ink,#14323a);
-  animation:cg-cortina-mark 700ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) both; }
-/* símbolo ~1.25× o corpo do nome (a caixa do SVG é justa ao glifo), fluido.
-   Por altura: um símbolo injetado não-quadrado (TTCAB) mantém a proporção. */
-.cg-cortina__mark svg{ height:var(--cg-cortina-mark); width:auto; }
-.cg-cortina__text{ display:flex; flex-direction:column; min-width:0; }
-.cg-cortina__name{
-  font-family:var(--font-heading,system-ui,sans-serif);
-  font-weight:700; font-size:clamp(2rem,6vw,3rem); line-height:1; letter-spacing:-.02em;
-  animation:cg-cortina-nome 600ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) 480ms both;
-}
-.cg-cortina__tag{
-  margin-top:.55rem; font-family:var(--font-body,system-ui,sans-serif);
-  font-size:clamp(.8rem,2.4vw,1rem); line-height:1.3; color:var(--color-ink-soft,#54707a);
-  animation:cg-cortina-tag 500ms ease 820ms both;
-}
-@keyframes cg-cortina-sobe{ to{ transform:translateY(-100%); visibility:hidden; } }
-@keyframes cg-cortina-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
-@keyframes cg-cortina-nome{ from{ opacity:0; transform:translateX(-8px); } }
-@keyframes cg-cortina-nome-dir{ from{ opacity:0; transform:translateX(8px); } }
-@keyframes cg-cortina-tag{ from{ opacity:0; transform:translateY(4px); } }
-html[data-cg-cortina="vista"] .cg-cortina{ display:none; }
-@media (prefers-reduced-motion:reduce){ .cg-cortina{ display:none; } }
-@media print{ .cg-cortina{ display:none; } }
-`;