@flytedan/flytebot-design-system 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/tokens.css

@@ -409,6 +409,50 @@
   :root{--dur-instant:40ms;/* @kind other */--dur-fast:80ms;/* @kind other */--dur-base:120ms;/* @kind other */--dur-slow:160ms;/* @kind other */--dur-panel:200ms;/* @kind other */--skeleton-dur:0ms/* @kind other */}
 }
 
+/* ============ tokens/appearance.css ============ */
+/* MP-208 — the [data-text-scale]/[data-contrast]/[data-motion] rules AppearanceMenu
+   (components/platform/AppearanceMenu.tsx) and its store (kits/appearance.ts) drive by
+   setting attributes on document.documentElement. Consolidated from this repo's own
+   docs-site demo (text scale, high contrast) and media-planner's local copy (adds the
+   reduced-motion override) — every consuming app gets all three from importing this
+   stylesheet alone, none of it re-implemented per app. */
+
+/* Text scale: a zoom multiplier, same mechanism the pre-MP-208 copies used (JS-set
+   body.style.zoom) but expressed as a CSS token+rule pair instead, so no per-app JS is
+   needed to apply it. "md" is 100% — the default, absent-attribute case below. */
+:root{--text-scale-zoom:1;/* @kind other */}
+:root[data-text-scale="sm"]{--text-scale-zoom:.9;/* @kind other */}
+:root[data-text-scale="lg"]{--text-scale-zoom:1.15;/* @kind other */}
+:root[data-text-scale="xl"]{--text-scale-zoom:1.3;/* @kind other */}
+body{zoom:var(--text-scale-zoom);}
+
+/* High contrast: sharpen the two tokens that carry most of the system's "quiet" UI —
+   hairline borders and secondary/muted text — up to the next, stronger step the theme
+   already defines for both light and dark (this file's colors.css section above). Also
+   widens the focus ring so keyboard focus reads unmistakably against every surface. */
+[data-contrast="high"]{
+  --border:var(--border-strong);
+  --text-muted:var(--text-2);
+  --focus-ring:0 0 0 2px var(--page),0 0 0 4px var(--text);
+}
+
+/* Reduced motion: forces every duration token above down to (near) zero, regardless of
+   the OS setting — this can only ever ADD reduced motion on top of the
+   `prefers-reduced-motion` floor already applied above, never remove it, since that
+   media query keeps applying underneath this attribute. */
+[data-motion="reduce"]{
+  --dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-panel:0ms;--skeleton-dur:0ms;
+}
+[data-motion="reduce"] *,
+[data-motion="reduce"] *::before,
+[data-motion="reduce"] *::after{
+  animation-duration:.001ms!important;
+  animation-delay:0ms!important;
+  animation-iteration-count:1!important;
+  transition-duration:.001ms!important;
+  scroll-behavior:auto!important;
+}
+
 /* ============ tokens/layout.css ============ */
 :root{
   --sidebar-w:264px;/* @kind spacing */