@syncedco/flow 0.3.0 → 0.3.2

package/examples/wordpress/assets/css/synced-flow.css

@@ -19,6 +19,8 @@
     --step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
     --step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
     --step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
+    --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
     --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
     --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
@@ -88,7 +90,9 @@
     --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
     --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
     --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
+    --color-border-subtle: var(--sf-colour-border-subtle, oklch(100% 0 0 / 0.08));
     --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-backdrop: var(--sf-colour-backdrop, oklch(0% 0 0 / 0.56));
     --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
     --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
     --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
@@ -97,6 +101,14 @@
     --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
     --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
     --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
+    --color-surface-hover: var(--sf-colour-surface-hover, color-mix(in oklch, var(--color-surface-alt) 86%, var(--color-primary)));
+    --color-surface-raised-2: var(--sf-colour-surface-raised-2, color-mix(in oklch, var(--color-surface) 86%, white));
+    --color-categorical-1: var(--sf-colour-categorical-1, var(--color-primary));
+    --color-categorical-2: var(--sf-colour-categorical-2, var(--color-green));
+    --color-categorical-3: var(--sf-colour-categorical-3, var(--color-deco-blue));
+    --color-categorical-4: var(--sf-colour-categorical-4, var(--color-deco-lime));
+    --color-categorical-5: var(--sf-colour-categorical-5, var(--color-warm-icon));
+    --color-categorical-6: var(--sf-colour-categorical-6, var(--color-purple-icon));
     --color-hero-bg: oklch(8% 0.02 260);
     --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
     --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
@@ -202,7 +214,7 @@
 @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; }
@@ -212,11 +224,15 @@
 }
 
 @layer base {
+  html {
+    font-size: 100%;
+  }
+
   body {
     background: var(--color-background);
     color: var(--color-foreground);
     font-family: var(--font-inter, var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif));
-    font-size: var(--step-0);
+    font-size: var(--text-base);
     line-height: 1.5;
     font-feature-settings: "rlig" 1, "calt" 1;
     -webkit-font-smoothing: antialiased;
@@ -244,7 +260,7 @@
   :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
 
   :where(:focus-visible) {
-    outline: 2px solid var(--color-ring);
+    outline: 0.125rem solid var(--color-ring);
     outline-offset: .2rem;
   }
 
@@ -330,11 +346,47 @@
   }
 
   .sf-app-shell {
+    --sf-app-header-height: 4rem;
+    --sf-app-sidebar-collapsed-width: 4.75rem;
     background: var(--color-background);
     color: var(--color-foreground);
     display: grid;
     grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
     min-block-size: 100dvh;
+    position: relative;
+    transition: grid-template-columns var(--duration-normal) var(--ease-standard);
+  }
+
+  .sf-app-header {
+    align-items: center;
+    background: var(--color-card);
+    border-block-end: 1px solid var(--color-border);
+    display: flex;
+    gap: var(--space-s);
+    grid-column: 1 / -1;
+    justify-content: space-between;
+    min-block-size: var(--sf-app-header-height);
+    padding-inline: var(--space-s-m);
+    z-index: 20;
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] {
+    grid-template-rows: var(--sf-app-header-height) minmax(0, 1fr);
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] .sf-app-header {
+    inset-block-start: 0;
+    position: sticky;
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] .sf-app-sidebar {
+    inset-block-start: var(--sf-app-header-height);
+    max-block-size: calc(100dvh - var(--sf-app-header-height));
+    min-block-size: calc(100dvh - var(--sf-app-header-height));
+  }
+
+  .sf-app-shell[data-collapsed="true"] {
+    grid-template-columns: var(--sf-app-sidebar-collapsed-width) minmax(0, 1fr);
   }
 
   .sf-app-sidebar {
@@ -350,6 +402,7 @@
     padding: var(--space-s);
     position: sticky;
     inset-block-start: 0;
+    transition: transform var(--duration-normal) var(--ease-standard), inline-size var(--duration-normal) var(--ease-standard);
   }
 
   .sf-app-sidebar__brand {
@@ -402,6 +455,58 @@
     padding: var(--sf-app-main-padding, var(--space-m-l));
   }
 
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar {
+    overflow-x: hidden;
+  }
+
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar__brand,
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar .sf-nav__link {
+    justify-content: center;
+  }
+
+  .sf-app-shell[data-collapsed="true"] [data-hide-collapsed="true"] {
+    display: none;
+  }
+
+  .sf-app-backdrop {
+    display: none;
+  }
+
+  @media (max-width: 48rem) {
+    .sf-app-shell[data-mobile="drawer"] {
+      display: block;
+    }
+
+    .sf-app-shell[data-mobile="drawer"] .sf-app-header {
+      position: sticky;
+      inset-block-start: 0;
+    }
+
+    .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
+      box-shadow: var(--shadow-xl);
+      inline-size: min(18rem, calc(100vw - var(--space-l)));
+      inset-block: 0;
+      inset-inline-start: 0;
+      max-block-size: none;
+      min-block-size: 100dvh;
+      position: fixed;
+      transform: translateX(-100%);
+      z-index: 30;
+    }
+
+    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
+      transform: translateX(0);
+    }
+
+    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-backdrop {
+      background: var(--color-backdrop);
+      display: block;
+      inset: 0;
+      position: fixed;
+      z-index: 25;
+    }
+  }
+
   .sf-grid {
     display: grid;
     gap: var(--grid-gutter);
@@ -725,11 +830,268 @@
     overflow: hidden;
   }
 
+  .sf-progress {
+    accent-color: var(--progress-color, var(--color-primary));
+    block-size: var(--progress-size, .625rem);
+    inline-size: 100%;
+  }
+
+  .sf-progress::-webkit-progress-bar {
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-full);
+  }
+
+  .sf-progress::-webkit-progress-value,
+  .sf-progress::-moz-progress-bar {
+    background: var(--progress-color, var(--color-primary));
+    border-radius: var(--radius-full);
+  }
+
+  .sf-skeleton {
+    background: color-mix(in oklch, var(--color-surface-alt) 82%, var(--color-foreground));
+    border-radius: var(--skeleton-radius, var(--radius-md));
+    color: transparent;
+    min-block-size: var(--skeleton-block-size, 1em);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sf-skeleton {
+      animation: sf-skeleton-pulse 1.4s var(--ease-standard) infinite alternate;
+    }
+  }
+
+  @keyframes sf-skeleton-pulse {
+    to { opacity: .62; }
+  }
+
+  .sf-filter-bar {
+    align-items: end;
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    padding: var(--space-s);
+  }
+
+  .sf-filter-bar > :where(.sf-field, form, label) {
+    flex: 1 1 min(100%, 14rem);
+  }
+
+  .sf-filter-bar > :where(.sf-button, button, a) {
+    flex: 0 0 auto;
+  }
+
+  .sf-data-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--data-table-min, 44rem);
+  }
+
+  .sf-data-table :where(th, td) {
+    border-block-end: 1px solid var(--color-border);
+    padding-block: var(--data-table-padding-block, var(--space-xs));
+    padding-inline: var(--data-table-padding-inline, var(--space-s));
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .sf-data-table :where(th) {
+    background: var(--color-surface-alt);
+    color: var(--color-muted-foreground);
+    font-size: var(--step--1);
+    font-weight: 800;
+  }
+
+  .sf-data-table :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--color-primary) 6%, transparent);
+  }
+
+  .sf-data-table[data-density="compact"] {
+    --data-table-padding-block: var(--space-2xs);
+    --data-table-padding-inline: var(--space-xs);
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort) {
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    font: inherit;
+    font-weight: inherit;
+    gap: var(--space-3xs);
+    padding: 0;
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort]::after {
+    color: var(--color-muted-foreground);
+    content: "\2195";
+    font-size: var(--step--2);
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort="ascending"]::after { content: "\2191"; }
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort="descending"]::after { content: "\2193"; }
+
+  .sf-data-table tr[data-clickable="true"] {
+    cursor: pointer;
+  }
+
+  .sf-data-table tr[data-clickable="true"]:focus-within {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: -0.125rem;
+  }
+
+  @container (max-width: 38rem) {
+    .sf-table-wrap[data-view="cards"] {
+      border: 0;
+      overflow: visible;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table,
+    .sf-table-wrap[data-view="cards"] .sf-data-table :where(thead, tbody, tr, th, td) {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table thead {
+      display: none;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table tr {
+      background: var(--color-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      margin-block-end: var(--space-xs);
+      padding: var(--space-xs);
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table td {
+      align-items: center;
+      border: 0;
+      display: flex;
+      gap: var(--space-s);
+      justify-content: space-between;
+      padding-block: var(--space-2xs);
+      padding-inline: 0;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table td::before {
+      color: var(--color-muted-foreground);
+      content: attr(data-label);
+      font-size: var(--step--1);
+      font-weight: 800;
+    }
+  }
+
+  .sf-status {
+    align-items: center;
+    background: var(--status-bg, var(--color-surface-alt));
+    border: 1px solid var(--status-border, var(--color-border));
+    border-radius: var(--radius-full);
+    color: var(--status-color, var(--color-foreground));
+    display: inline-flex;
+    font-size: var(--step--1);
+    font-weight: 700;
+    gap: var(--space-3xs);
+    line-height: 1;
+    min-block-size: 1.75rem;
+    padding-inline: .7em;
+  }
+
+  .sf-status[data-size="sm"] {
+    font-size: var(--step--2);
+    min-block-size: 1.35rem;
+    padding-inline: .55em;
+  }
+
+  .sf-status::before {
+    background: currentColor;
+    block-size: .42em;
+    border-radius: var(--radius-full);
+    content: "";
+    inline-size: .42em;
+  }
+
+  .sf-status[data-tone="success"] {
+    --status-bg: var(--sf-colour-success-soft, oklch(62% 0.13 150 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="warning"] {
+    --status-bg: var(--sf-colour-warning-soft, oklch(78% 0.15 82 / 0.16));
+    --status-border: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 38%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 70%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="danger"] {
+    --status-bg: var(--sf-colour-danger-soft, oklch(56% 0.2 28 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="info"] {
+    --status-bg: var(--sf-colour-info-soft, oklch(70% 0.12 205 / 0.14));
+    --status-border: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 76%, var(--color-foreground));
+  }
+
+  .sf-data-list {
+    display: grid;
+  }
+
+  .sf-data-list > * {
+    align-items: center;
+    border-block-end: 1px solid var(--color-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    justify-content: space-between;
+    padding-block: var(--space-xs);
+  }
+
+  .sf-data-list > :last-child {
+    border-block-end: 0;
+  }
+
+  .sf-empty-state {
+    align-items: center;
+    background: var(--color-surface-alt);
+    border: 1px dashed var(--color-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-muted-foreground);
+    display: grid;
+    gap: var(--space-xs);
+    justify-items: center;
+    padding: var(--space-l);
+    text-align: center;
+  }
+
+  .sf-settings-section,
+  .sf-detail-panel {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: grid;
+    gap: var(--space-s);
+    padding: var(--space-m);
+  }
+
+  .sf-detail-panel {
+    background: var(--color-surface-alt);
+  }
+
   .sf-field {
     display: grid;
     gap: var(--space-2xs);
   }
 
+  .sf-form[data-density="compact"],
+  .sf-field[data-density="compact"] {
+    --input-block-size: 2.25rem;
+    --input-padding-inline: var(--space-xs);
+  }
+
   .sf-field > label {
     color: var(--color-muted-foreground);
     font-size: var(--step--1);
@@ -742,7 +1104,41 @@
     border-radius: var(--input-radius, var(--radius-md));
     color: var(--color-foreground);
     min-block-size: var(--input-block-size, 2.75rem);
-    padding-inline: var(--space-s);
+    padding-inline: var(--input-padding-inline, var(--space-s));
+  }
+
+  .sf-search {
+    position: relative;
+  }
+
+  .sf-search::before {
+    block-size: .75em;
+    border: 0.125em solid currentColor;
+    border-radius: var(--radius-full);
+    color: var(--color-muted-foreground);
+    content: "";
+    inline-size: .75em;
+    inset-block-start: 50%;
+    inset-inline-start: var(--space-xs);
+    line-height: 1;
+    position: absolute;
+    transform: translateY(-58%);
+  }
+
+  .sf-search::after {
+    background: var(--color-muted-foreground);
+    block-size: .125em;
+    content: "";
+    inline-size: .45em;
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--space-xs) + .58em);
+    position: absolute;
+    transform: translateY(120%) rotate(45deg);
+    transform-origin: inline-start center;
+  }
+
+  .sf-search > .sf-input {
+    padding-inline-start: var(--space-l);
   }
 
   .sf-input:focus-visible {

package/layout.css

@@ -116,7 +116,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"] {
@@ -199,6 +199,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;
@@ -207,7 +208,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 {
@@ -219,7 +220,7 @@
       display: block;
       inset: 0;
       position: fixed;
-      z-index: 25;
+      z-index: var(--sf-z-backdrop);
     }
   }
 
@@ -363,7 +364,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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@syncedco/flow",
-  "version": "0.3.0",
-  "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
+  "version": "0.3.2",
+  "description": "AI-friendly fluid CSS design system for brand-consistent websites and agency builds.",
   "type": "module",
   "packageManager": "pnpm@11.2.2",
   "license": "MIT",
@@ -63,6 +63,7 @@
     "examples",
     "skills",
     "src",
+    "CHANGELOG.md",
     "CODE_OF_CONDUCT.md",
     "CONTRIBUTING.md",
     "LICENSE",

package/reset.css

@@ -3,7 +3,7 @@
 @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; }