@syncedco/flow 0.3.0 → 0.3.2

package/styles.css

@@ -21,6 +21,7 @@
     --sf-type-caption-sm: var(--sf-step--2);
     --sf-type-caption: var(--sf-step--1);
     --sf-type-body: var(--sf-step-0);
+    --sf-text-base: var(--sf-type-body);
     --sf-type-lead: var(--sf-step-1);
     --sf-type-h6: var(--sf-step-1);
     --sf-type-h5: var(--sf-step-2);
@@ -150,6 +151,13 @@
     --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
     --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
     --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
+    --sf-z-sticky: 20;
+    --sf-z-header: 20;
+    --sf-z-backdrop: 25;
+    --sf-z-drawer: 30;
+    --sf-z-overlay: 40;
+    --sf-z-toast: 50;
+    --sf-z-skip-link: 999;
     --sf-duration-fast: 150ms;
     --sf-duration-normal: 220ms;
     --sf-duration-slow: 360ms;
@@ -210,13 +218,32 @@
     --sf-colour-border: oklch(100% 0 0 / 0.14);
     --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
     --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
+    --sf-colour-primary: var(--sf-colour-orange-500);
+    --sf-colour-primary-hover: oklch(80% 0.14 50);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
+    --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
     --sf-colour-link: var(--sf-colour-orange-500);
     --sf-colour-link-hover: oklch(80% 0.14 50);
+    --sf-colour-success: oklch(72% 0.13 150);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
+    --sf-colour-warning: oklch(84% 0.15 82);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
+    --sf-colour-danger: oklch(70% 0.18 28);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
+    --sf-colour-info: oklch(76% 0.12 205);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
+    --sf-colour-ring: var(--sf-colour-orange-500);
+    --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
   }
 @layer reset {
   *, *::before, *::after { box-sizing: border-box; }
   *:where(:not(dialog)) { margin: 0; }
-  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+  html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
   body { min-block-size: 100%; }
   img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
   img, video { block-size: auto; }
@@ -228,6 +255,7 @@
   html {
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
+    font-size: 100%;
     scroll-behavior: smooth;
   }
 
@@ -235,7 +263,7 @@
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
     font-family: var(--sf-font-sans);
-    font-size: var(--sf-type-body);
+    font-size: var(--sf-text-base);
     line-height: var(--sf-line-height-body);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -438,7 +466,7 @@
     justify-content: space-between;
     min-block-size: var(--sf-app-header-height);
     padding-inline: var(--sf-space-s-m);
-    z-index: 20;
+    z-index: var(--sf-z-header);
   }
 
   .sf-app-shell[data-layout~="fixed-header"] {
@@ -521,6 +549,7 @@
     }
 
     .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
+      block-size: 100dvh;
       box-shadow: var(--sf-shadow-xl);
       inline-size: min(18rem, calc(100vw - var(--sf-space-l)));
       inset-block: 0;
@@ -529,7 +558,7 @@
       min-block-size: 100dvh;
       position: fixed;
       transform: translateX(-100%);
-      z-index: 30;
+      z-index: var(--sf-z-drawer);
     }
 
     .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
@@ -541,7 +570,7 @@
       display: block;
       inset: 0;
       position: fixed;
-      z-index: 25;
+      z-index: var(--sf-z-backdrop);
     }
   }
 
@@ -685,7 +714,7 @@
   .sf-sticky-top {
     position: sticky;
     inset-block-start: var(--sf-sticky-offset, 0);
-    z-index: var(--sf-sticky-z, 20);
+    z-index: var(--sf-sticky-z, var(--sf-z-sticky));
   }
 
   .sf-media-object {
@@ -1206,6 +1235,16 @@
     to { transform: translateX(-50%); }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-button:hover, .sf-card--interactive:hover) {
+      transform: none;
+    }
+
+    .sf-marquee__track {
+      animation: none;
+    }
+  }
+
   .sf-command-list {
     display: grid;
     font-family: var(--sf-font-mono);
@@ -1611,7 +1650,7 @@
   }
 
   .sf-filter-bar {
-    align-items: end;
+    align-items: var(--sf-filter-bar-align, center);
     background: var(--sf-colour-surface);
     border: 1px solid var(--sf-colour-border);
     border-radius: var(--sf-radius-panel);
@@ -1758,6 +1797,10 @@
     inline-size: .42em;
   }
 
+  :where(.sf-status[data-dot="false"], .sf-status--label)::before {
+    content: none;
+  }
+
   .sf-status[data-tone="success"] {
     --sf-status-bg: var(--sf-colour-success-soft);
     --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
@@ -2192,6 +2235,7 @@
   :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
     display: grid;
     gap: var(--sf-space-xs);
+    z-index: var(--sf-z-overlay);
   }
 
   .sf-popover {
@@ -2263,7 +2307,7 @@
     inset-block-start: var(--sf-space-s);
     inset-inline-end: var(--sf-space-s);
     position: fixed;
-    z-index: 50;
+    z-index: var(--sf-z-toast);
   }
 
   .sf-banner {
@@ -2378,6 +2422,7 @@
   }
 
   .sf-tab {
+    align-items: center;
     border-block-end: 0.125rem solid transparent;
     border-radius: var(--sf-radius-full);
     color: var(--sf-colour-muted);
@@ -2656,7 +2701,7 @@
     text-decoration: none;
     transform: translateY(calc(-100% - var(--sf-space-m)));
     transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
-    z-index: 999;
+    z-index: var(--sf-z-skip-link);
   }
 
   .sf-skip-link:focus-visible {

package/tokens.css

@@ -21,6 +21,7 @@
     --sf-type-caption-sm: var(--sf-step--2);
     --sf-type-caption: var(--sf-step--1);
     --sf-type-body: var(--sf-step-0);
+    --sf-text-base: var(--sf-type-body);
     --sf-type-lead: var(--sf-step-1);
     --sf-type-h6: var(--sf-step-1);
     --sf-type-h5: var(--sf-step-2);
@@ -150,6 +151,13 @@
     --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
     --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
     --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
+    --sf-z-sticky: 20;
+    --sf-z-header: 20;
+    --sf-z-backdrop: 25;
+    --sf-z-drawer: 30;
+    --sf-z-overlay: 40;
+    --sf-z-toast: 50;
+    --sf-z-skip-link: 999;
     --sf-duration-fast: 150ms;
     --sf-duration-normal: 220ms;
     --sf-duration-slow: 360ms;
@@ -210,6 +218,25 @@
     --sf-colour-border: oklch(100% 0 0 / 0.14);
     --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
     --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
+    --sf-colour-primary: var(--sf-colour-orange-500);
+    --sf-colour-primary-hover: oklch(80% 0.14 50);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
+    --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
     --sf-colour-link: var(--sf-colour-orange-500);
     --sf-colour-link-hover: oklch(80% 0.14 50);
+    --sf-colour-success: oklch(72% 0.13 150);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
+    --sf-colour-warning: oklch(84% 0.15 82);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
+    --sf-colour-danger: oklch(70% 0.18 28);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
+    --sf-colour-info: oklch(76% 0.12 205);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
+    --sf-colour-ring: var(--sf-colour-orange-500);
+    --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
   }

package/utilities.css

@@ -145,7 +145,7 @@
     text-decoration: none;
     transform: translateY(calc(-100% - var(--sf-space-m)));
     transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
-    z-index: 999;
+    z-index: var(--sf-z-skip-link);
   }
 
   .sf-skip-link:focus-visible {