@ceebee/ui 1.0.1 → 1.0.2

package/dist/styles.css

@@ -231,7 +231,9 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* Someone who asked their system for more contrast gets stronger edges and darker secondary
    text, without the palette changing hue underneath them. */
 @media (prefers-contrast: more) {
-  :root {
+  /* `html:root` deliberately outranks a Skin's later `:root` rule. Contrast is a reader
+     preference, so a brand Skin may change hue but must not weaken these accessibility edges. */
+  html:root {
     --cb-border: oklch(0.7 0.014 280);
     --cb-border-strong: oklch(0.45 0.02 280);
     --cb-fg-muted: oklch(0.35 0.02 280);
@@ -240,8 +242,8 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
     --cb-glass-border-strong: oklch(0.45 0.02 280);
   }
 
-  :root[data-theme="dark"],
-  :root:not([data-theme="light"]) {
+  html:root[data-theme="dark"],
+  html:root:not([data-theme="light"]) {
     --cb-border: oklch(0.58 0.026 280);
     --cb-border-strong: oklch(0.72 0.03 280);
     --cb-fg-muted: oklch(0.88 0.012 280);
@@ -258,6 +260,9 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   --cb-duration-base: 220ms;
   --cb-duration-slow: 380ms;
   --cb-duration-deliberate: 620ms;
+  --cb-duration-stagger-tight: 40ms;
+  --cb-duration-stagger-standard: 60ms;
+  --cb-duration-stagger-relaxed: 80ms;
 
   --cb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --cb-ease-entrance: cubic-bezier(0.05, 0.7, 0.1, 1);
@@ -272,6 +277,49 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   :root { --cb-motion-scale: 0; }
 }
 
+/* tokens/surface.css */
+/* Component Tokens shared by every platform Surface rendering. */
+:root {
+  --cb-surface-tinted-edge-strength: 0.22;
+  --cb-surface-gradient-start-strength: 0.26;
+  --cb-surface-gradient-end-strength: 0.06;
+  --cb-surface-gradient-edge-strength: 0.24;
+}
+
+/* tokens/data-visualization.css */
+/* Component Tokens shared by the web and Flutter mini-chart renderings. */
+:root {
+  --cb-mini-chart-track-strength: 0.08;
+  --cb-mini-chart-area-strength: 0.16;
+  --cb-mini-chart-bar-strength: 0.70;
+  --cb-mini-chart-line-width: 0.09375rem;
+  --cb-mini-chart-marker-radius: 0.15625rem;
+  --cb-mini-chart-bar-gap: 0.125rem;
+  --cb-mini-chart-min-bar: 0.0625rem;
+  --cb-mini-chart-bar-radius: 0.0625rem;
+  --cb-mini-chart-donut-size-sm: 4rem;
+  --cb-mini-chart-donut-size-md: 7.5rem;
+  --cb-mini-chart-donut-size-lg: 10rem;
+  --cb-mini-chart-donut-thickness-sm: 0.5rem;
+  --cb-mini-chart-donut-thickness-md: 1rem;
+  --cb-mini-chart-donut-thickness-lg: 1.5rem;
+  --cb-mini-chart-width-sm: 6rem;
+  --cb-mini-chart-width-md: 7.5rem;
+  --cb-mini-chart-width-lg: 10rem;
+  --cb-mini-chart-height-sm: 1.5rem;
+  --cb-mini-chart-height-md: 2rem;
+  --cb-mini-chart-height-lg: 3rem;
+  --cb-mini-chart-padding: 0.0625rem;
+}
+
+/* tokens/skeleton.css */
+/* Skeleton component Tokens shared by web and Flutter renderings. */
+:root {
+  --cb-skeleton-fill-strength: 0.28;
+  --cb-skeleton-opacity-min: 0.56;
+  --cb-skeleton-opacity-max: 1;
+}
+
 /* foundation/layout.css */
 .cb-flex { display: flex; gap: var(--cb-flex-gap); }
 .cb-flex--column { flex-direction: column; }
@@ -361,7 +409,11 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* Tint mixes the accent into the surface so one strength token retunes every tinted card. */
 .cb-surface--tinted {
   background: color-mix(in oklch, var(--cb-surface-accent) calc(var(--cb-tint-strength) * 100%), var(--cb-surface));
-  border-color: color-mix(in oklch, var(--cb-surface-accent) 22%, transparent);
+  border-color: color-mix(
+    in oklch,
+    var(--cb-surface-accent) calc(var(--cb-surface-tinted-edge-strength) * 100%),
+    transparent
+  );
 }
 
 .cb-surface--glass {
@@ -391,10 +443,22 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-surface--gradient {
   background: linear-gradient(
     var(--cb-gradient-angle),
-    color-mix(in oklch, var(--cb-surface-accent) 26%, var(--cb-surface)),
-    color-mix(in oklch, var(--cb-surface-accent) 6%, var(--cb-surface))
+    color-mix(
+      in oklch,
+      var(--cb-surface-accent) calc(var(--cb-surface-gradient-start-strength) * 100%),
+      var(--cb-surface)
+    ),
+    color-mix(
+      in oklch,
+      var(--cb-surface-accent) calc(var(--cb-surface-gradient-end-strength) * 100%),
+      var(--cb-surface)
+    )
+  );
+  border-color: color-mix(
+    in oklch,
+    var(--cb-surface-accent) calc(var(--cb-surface-gradient-edge-strength) * 100%),
+    transparent
   );
-  border-color: color-mix(in oklch, var(--cb-surface-accent) 24%, transparent);
 }
 
 .cb-elevation--none { box-shadow: var(--cb-surface-material-shadow); }
@@ -657,7 +721,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* data/donut.css */
 .cb-donut { position: relative; display: inline-grid; place-items: center; }
 .cb-donut svg { position: absolute; inset: 0; }
-.cb-donut__track { stroke: color-mix(in oklch, var(--cb-fg) 8%, transparent); }
+.cb-donut__track { stroke: color-mix(in oklch, var(--cb-fg) calc(var(--cb-mini-chart-track-strength) * 100%), transparent); }
 .cb-donut__arc { transition: stroke-dasharray var(--cb-duration-deliberate) var(--cb-ease-entrance); }
 /* Reduced motion: the arcs are drawn at their final length rather than growing into place. */
 @media (prefers-reduced-motion: reduce) {
@@ -690,10 +754,10 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-sparkline[data-hue="amber"] { --cb-spark-accent: var(--cb-decor-amber); }
 .cb-sparkline[data-hue="rose"] { --cb-spark-accent: var(--cb-decor-rose); }
 
-.cb-sparkline__line { stroke: var(--cb-spark-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.cb-sparkline__area { fill: color-mix(in oklch, var(--cb-spark-accent) 16%, transparent); }
+.cb-sparkline__line { stroke: var(--cb-spark-accent); stroke-width: var(--cb-mini-chart-line-width); stroke-linecap: round; stroke-linejoin: round; }
+.cb-sparkline__area { fill: color-mix(in oklch, var(--cb-spark-accent) calc(var(--cb-mini-chart-area-strength) * 100%), transparent); }
 .cb-sparkline__last { fill: var(--cb-spark-accent); }
-.cb-sparkline__bar { fill: color-mix(in oklch, var(--cb-spark-accent) 70%, transparent); }
+.cb-sparkline__bar { fill: color-mix(in oklch, var(--cb-spark-accent) calc(var(--cb-mini-chart-bar-strength) * 100%), transparent); }
 
 /* data/leaderboard.css */
 .cb-leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cb-space-1); font-family: var(--cb-font-sans); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {