@breathe-ds/ui 0.3.0 → 0.4.0

package/theme.css

@@ -25,6 +25,8 @@
   --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-action-tint: var(--cg-action-tint, var(--cg-surface));  /* highlighted panel/card: a 6% wash of the action color */
+  --color-action-line: var(--cg-action-line, var(--cg-action));   /* border of a highlighted card (3:1 on surface) */
   --color-line: var(--cg-line);                    /* hairlines/borders */
 
   /* ── Typography (roles; actual family comes from --cg-font-*) ── */
@@ -57,6 +59,20 @@
       scroll-behavior: auto;
     }
   }
+  /* Tailwind v4's reset leaves buttons with the default cursor; in the family
+     everything that can be tapped shows the hand: buttons, links, the summary
+     of a collapse, labels of controls, selects. Disabled ones keep the arrow. */
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  a[href],
+  summary,
+  label[for],
+  select:not(:disabled),
+  input[type="checkbox"]:not(:disabled),
+  input[type="radio"]:not(:disabled),
+  input[type="file"]:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 /* Outbound/anchor arrow on links: takes a small step toward where the link
@@ -104,3 +120,127 @@
   .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; } }
 }
+
+/* Rail: the horizontal list hides its scrollbar (the progress bar under it says how much is left). */
+.cg-no-scrollbar {
+  scrollbar-width: none;
+}
+.cg-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Care flow drawings (CareSteps): ChatPreview, PlanTimeline, PhotoSequence ──
+   Ported from novo.creeta's globals.css. Only opacity and transform. */
+
+/* ChatPreview: each bubble animates when it enters; the component sets the
+   rhythm (and the loop). Nothing animates without data-state="playing". */
+@keyframes cg-bubble-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+}
+@keyframes cg-dot-pulse {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: none;
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+.cg-chat[data-state="playing"] .cg-bubble {
+  animation: cg-bubble-in 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+.cg-chat[data-state="playing"] .cg-typing i {
+  animation: cg-dot-pulse 900ms ease-in-out calc(var(--n) * 140ms) infinite;
+}
+.cg-chat[data-paused] .cg-bubble,
+.cg-chat[data-paused] .cg-typing i {
+  animation-play-state: paused;
+}
+
+/* PlanTimeline, 6s loop: the line comes down from 0.2s to 1.7s and each dot
+   lights up when it arrives (0.2s, 0.95s, 1.7s); everything stays lit until
+   5.1s, goes off and restarts. One set of keyframes per dot. */
+@keyframes cg-plan-line {
+  0%, 3.3% { opacity: 1; transform: scaleY(0); }
+  28.3%, 85% { opacity: 1; transform: scaleY(1); }
+  92%, 100% { opacity: 0; transform: scaleY(1); }
+}
+@keyframes cg-plan-dot-1 {
+  0%, 3.3% { opacity: 0; transform: scale(0.3); }
+  8.6%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes cg-plan-dot-2 {
+  0%, 15.8% { opacity: 0; transform: scale(0.3); }
+  21.1%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes cg-plan-dot-3 {
+  0%, 28.3% { opacity: 0; transform: scale(0.3); }
+  33.6%, 85% { opacity: 1; transform: none; }
+  92%, 100% { opacity: 0; transform: scale(0.3); }
+}
+/* The name out of turn stays at 75%, not less: ink at 75% over the card still
+   passes AA (creeta measured 5.03:1; at 45% it failed, WCAG 1.4.3). */
+@keyframes cg-plan-name-1 {
+  0%, 3.3%, 92%, 100% { opacity: 0.75; }
+  8.6%, 85% { opacity: 1; }
+}
+@keyframes cg-plan-name-2 {
+  0%, 15.8%, 92%, 100% { opacity: 0.75; }
+  21.1%, 85% { opacity: 1; }
+}
+@keyframes cg-plan-name-3 {
+  0%, 28.3%, 92%, 100% { opacity: 0.75; }
+  33.6%, 85% { opacity: 1; }
+}
+.cg-plan[data-state="waiting"] .cg-plan-line { transform: scaleY(0); }
+.cg-plan[data-state="waiting"] .cg-plan-dot { opacity: 0; }
+.cg-plan[data-state="waiting"] .cg-plan-name { opacity: 0.75; }
+.cg-plan[data-state="playing"] .cg-plan-line { animation: cg-plan-line 6s linear infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="1"] .cg-plan-dot { animation: cg-plan-dot-1 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="2"] .cg-plan-dot { animation: cg-plan-dot-2 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="3"] .cg-plan-dot { animation: cg-plan-dot-3 6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="1"] .cg-plan-name { animation: cg-plan-name-1 6s ease infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="2"] .cg-plan-name { animation: cg-plan-name-2 6s ease infinite; }
+.cg-plan[data-state="playing"] .cg-plan-step[data-n="3"] .cg-plan-name { animation: cg-plan-name-3 6s ease infinite; }
+/* Paused on the button, or off screen. Same weight as the rules above and after them. */
+.cg-plan[data-state][data-stopped] .cg-plan-line,
+.cg-plan[data-state][data-stopped] .cg-plan-step .cg-plan-dot,
+.cg-plan[data-state][data-stopped] .cg-plan-step .cg-plan-name {
+  animation-play-state: paused;
+}
+
+/* PhotoSequence: the hidden checkbox pauses the photos through CSS. */
+.cg-seq-pause:checked ~ .cg-seq img {
+  animation-play-state: paused !important;
+}
+
+/* Reduced motion: the components do not even start; this is the second lock,
+   in case the preference changes with the page open. The sequence keeps the
+   first photo and loses the control (a nameless checkbox in the tab order
+   would fail WCAG 4.1.2). */
+@media (prefers-reduced-motion: reduce) {
+  .cg-chat .cg-bubble,
+  .cg-chat .cg-typing i,
+  .cg-plan .cg-plan-line,
+  .cg-plan .cg-plan-dot,
+  .cg-plan .cg-plan-name {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+  .cg-seq img {
+    animation: none !important;
+  }
+  .cg-seq-control,
+  .cg-seq-pause {
+    display: none;
+  }
+}

package/tokens/creeta.css

@@ -16,6 +16,8 @@
   --cg-ink-body: #1e4f5b;
   --cg-action: #ab2781;         /* magenta (Agendar) */
   --cg-action-text: #8f1f6c;    /* darker magenta for text */
+  --cg-action-tint: #eae7ed;  /* 6% magenta over mist: highlighted card */
+  --cg-action-line: #ab2781;    /* magenta itself: 5.62:1 on mist */
   --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 */

package/tokens/neutral.css

@@ -20,6 +20,8 @@
   --cg-ink-body: #3f3f46;
   --cg-action: #18181b;
   --cg-action-text: #52525b;
+  --cg-action-tint: #e9e9ea;
+  --cg-action-line: #18181b;
   --cg-on-action: #ffffff;
   --cg-line: rgb(0 0 0 / 0.12);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand (fixed across the family) */

package/tokens/ttcab.css

@@ -3,9 +3,15 @@
    - 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 #fbf5e9 / action-text #bd3f0c .... 4.98:1 (AA)
    - surface-panel #144753 / surface (text) ... 9.41:1 (AAA)
-   - action #f6a22a is DECORATIVE/CTA — never text on cream.
+   - action #e8541e / on-action #ffffff ...... 3.67:1 — the accent button
+   The action color is a vivid red-orange with WHITE text (decided 2026-10-29,
+   the Cloudflare/Airbnb route): 3.67:1 passes the 3:1 of UI components and of
+   large text, NOT the 4.5:1 of normal text. Conscious exception, limited to the
+   accent Button (one per block, same type scale as the other buttons). Small
+   controls never put white on it (ink, or action-tint + action-text). The logo
+   keeps its own #f6a22a.
 */
 :root {
   --cg-surface: #fbf5e9;
@@ -14,9 +20,11 @@
   --cg-ink: #144753;
   --cg-ink-soft: #54707a;
   --cg-ink-body: #1e4f5b;
-  --cg-action: #f6a22a;
-  --cg-on-action: #144753;   /* ink on orange */
-  --cg-action-text: #9a5d07;
+  --cg-action: #e8541e;      /* vivid red-orange: white on it 3.67:1 (large text / UI 3:1) */
+  --cg-on-action: #ffffff;
+  --cg-action-text: #bd3f0c;   /* 4.98:1 on cream, 4.64:1 on the tint */
+  --cg-action-tint: #faebdd;   /* 6% action over cream: highlighted card (ink 8.75:1) */
+  --cg-action-line: #e8541e;   /* the action color itself: 3.38:1 on cream */
   --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 */