@syncedco/flow 0.1.0

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

@@ -0,0 +1,641 @@
+/* Generated by @syncedco/flow. Edit synced-flow.config.mjs or run synced-flow build to refresh. */
+
+@layer reset, tokens, base, app, layout, components, utilities, overrides;
+
+@layer tokens {
+  :root {
+    color-scheme: light;
+    --font-sans: var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif);
+    --font-display: var(--sf-font-display, ui-serif, Georgia, serif);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+    --step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
+    --step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
+    --step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
+    --step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
+    --step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
+    --step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
+    --step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
+    --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);
+
+    --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
+    --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
+    --space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
+    --space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
+    --space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
+    --space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
+    --space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
+    --space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
+    --space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
+    --space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
+    --space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
+    --space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
+    --space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
+    --space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
+    --space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
+    --space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
+    --space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
+    --space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
+    --space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
+    --space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
+
+    --grid-max-width: 90rem;
+    --grid-gutter: var(--space-s-l);
+    --grid-columns: 12;
+
+    --radius-none: 0;
+    --radius-xs: 0.25rem;
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.25rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 999rem;
+    --radius: var(--radius-xl);
+
+    --color-ink-950: oklch(14% 0.025 248);
+    --color-ink-900: oklch(18% 0.024 246);
+    --color-ink-800: oklch(24% 0.022 244);
+    --color-ink-700: oklch(34% 0.02 240);
+    --color-ink-600: oklch(45% 0.018 236);
+    --color-ink-500: oklch(56% 0.015 232);
+    --color-paper: oklch(98.6% 0.014 78);
+    --color-paper-alt: oklch(96.6% 0.018 82);
+    --color-white: oklch(100% 0 0);
+    --color-black: oklch(0% 0 0);
+
+    --color-background: oklch(14% 0.025 248);
+    --color-foreground: oklch(96% 0.01 92);
+    --color-card: oklch(18% 0.024 246);
+    --color-card-foreground: oklch(96% 0.01 92);
+    --color-popover: oklch(18% 0.024 246);
+    --color-popover-foreground: oklch(96% 0.01 92);
+    --color-primary: oklch(69% 0.18 44);
+    --color-primary-hover: oklch(64% 0.18 44);
+    --color-primary-label: oklch(55% 0.18 44);
+    --color-primary-border: oklch(66% 0.17 43);
+    --color-primary-foreground: oklch(98% 0.01 95);
+    --color-secondary: oklch(24% 0.018 22);
+    --color-secondary-foreground: oklch(96% 0.01 92);
+    --color-muted: oklch(26% 0.012 24);
+    --color-muted-foreground: oklch(76% 0.01 92);
+    --color-accent: oklch(24% 0.018 22);
+    --color-accent-foreground: oklch(96% 0.01 92);
+    --color-destructive: oklch(55% 0.2 28);
+    --color-destructive-foreground: oklch(98% 0.01 95);
+    --color-border: oklch(100% 0 0 / 0.12);
+    --color-input: oklch(100% 0 0 / 0.12);
+    --color-ring: oklch(69% 0.18 44);
+    --color-heading: oklch(20% 0.02 18);
+    --color-page-text: oklch(23% 0.02 18);
+    --color-body: oklch(45% 0.02 28);
+    --color-body-dark: oklch(40% 0.02 28);
+    --color-subdued: oklch(42% 0.02 20);
+    --color-surface: oklch(96% 0.015 80);
+    --color-surface-alt: oklch(96.6% 0.018 82);
+    --color-hero-bg: oklch(8% 0.02 260);
+    --color-green: oklch(55% 0.12 148);
+    --color-green-dark: oklch(45% 0.12 148);
+    --color-green-muted: oklch(40% 0.12 148);
+    --color-green-light: oklch(90% 0.06 148);
+    --color-green-lighter: oklch(92% 0.04 148);
+    --color-green-bg: oklch(88% 0.07 148);
+    --color-green-bg-alt: oklch(82% 0.1 148);
+    --color-green-vivid: oklch(78% 0.08 148);
+    --color-green-mid: oklch(75% 0.12 148);
+    --color-green-deep: oklch(70% 0.14 150);
+    --color-green-deepest: oklch(60% 0.14 150);
+    --color-green-wash: oklch(93% 0.06 148);
+    --color-green-wash-alt: oklch(88% 0.08 148);
+    --color-green-gradient-from: oklch(82% 0.1 148);
+    --color-green-gradient-to: oklch(86% 0.06 148);
+    --color-deco-lime: oklch(80% 0.18 130);
+    --color-deco-blue: oklch(60% 0.12 240);
+    --color-deco-warm: oklch(80% 0.06 60);
+    --color-deco-warm-light: oklch(92% 0.02 80);
+    --color-deco-warm-mid: oklch(80% 0.15 60);
+    --color-purple-light: oklch(95% 0.05 280);
+    --color-purple-mid: oklch(92% 0.05 280);
+    --color-purple-dark: oklch(90% 0.06 280);
+    --color-purple-darker: oklch(87% 0.07 280);
+    --color-purple-icon: oklch(55% 0.2 280);
+    --color-warm-light: oklch(95.6% 0.05 22);
+    --color-warm-mid: oklch(95% 0.04 40);
+    --color-warm-grad-to: oklch(90% 0.08 30);
+    --color-warm-grad-to-alt: oklch(90% 0.06 30);
+    --color-warm-icon: oklch(60% 0.17 44);
+    --color-cool-light: oklch(92% 0.04 200);
+    --color-cool-dark: oklch(87% 0.06 200);
+    --color-primary-glow: oklch(80% 0.12 44);
+    --color-primary-soft: oklch(69% 0.18 44 / 0.10);
+    --color-primary-soft-border: oklch(69% 0.18 44 / 0.30);
+    --color-primary-soft-border-light: oklch(69% 0.18 44 / 0.25);
+    --color-primary-soft-text: oklch(85% 0.08 44);
+    --color-primary-highlight: oklch(75% 0.14 44);
+
+    --shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.06);
+    --shadow-md: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.08);
+    --shadow-lg: 0 1rem 2rem oklch(0% 0 0 / 0.1);
+    --shadow-xl: 0 1.5rem 3rem oklch(0% 0 0 / 0.14);
+    --shadow-2xl: 0 2rem 4rem oklch(0% 0 0 / 0.18);
+    --shadow-primary-cta: 0 0.875rem 1.875rem oklch(69% 0.18 44 / 0.24);
+    --shadow-glow: 0 0 2rem oklch(69% 0.18 44 / 0.28);
+
+    --duration-fast: 150ms;
+    --duration-normal: 220ms;
+    --duration-slow: 360ms;
+    --ease-standard: cubic-bezier(.2, 0, 0, 1);
+  }
+}
+
+@layer tokens {
+  :root {
+    --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --font-sans: var(--sf-font-sans);
+    --sf-font-display: Fraunces, Georgia, serif;
+    --font-display: var(--sf-font-display);
+    --sf-colour-background: oklch(98.6% 0.006 80);
+    --color-background: var(--sf-colour-background);
+    --sf-colour-foreground: oklch(18% 0.026 250);
+    --color-foreground: var(--sf-colour-foreground);
+    --sf-colour-muted: oklch(45% 0.018 236);
+    --color-muted: var(--sf-colour-muted);
+    --sf-colour-surface: oklch(100% 0 0);
+    --color-surface: var(--sf-colour-surface);
+    --sf-colour-surface-alt: oklch(96.4% 0.011 80);
+    --color-surface-alt: var(--sf-colour-surface-alt);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --color-border: var(--sf-colour-border);
+    --sf-colour-primary: oklch(68% 0.18 44);
+    --color-primary: var(--sf-colour-primary);
+    --sf-colour-primary-hover: oklch(60% 0.17 42);
+    --color-primary-hover: var(--sf-colour-primary-hover);
+    --sf-colour-primary-foreground: oklch(100% 0 0);
+    --color-primary-foreground: var(--sf-colour-primary-foreground);
+    --sf-colour-accent: oklch(70% 0.12 205);
+    --color-accent: var(--sf-colour-accent);
+    --sf-colour-link: oklch(58% 0.17 42);
+    --color-link: var(--sf-colour-link);
+    --sf-colour-link-hover: oklch(68% 0.18 44);
+    --color-link-hover: var(--sf-colour-link-hover);
+    --sf-colour-ring: oklch(68% 0.18 44);
+    --color-ring: var(--sf-colour-ring);
+    --sf-button-radius: 0.5rem;
+    --button-radius: 0.5rem;
+    --sf-button-block-size: 2.75rem;
+    --button-size: 2.75rem;
+    --sf-button-padding-inline: var(--sf-space-s);
+    --button-padding-inline: var(--sf-space-s);
+    --sf-card-radius: 0.75rem;
+    --card-radius: 0.75rem;
+    --sf-card-padding: var(--sf-space-m-l);
+    --sf-input-radius: 0.5rem;
+    --sf-input-block-size: 2.75rem;
+  }
+}
+
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  *:where(:not(dialog)) { margin: 0; }
+  html { -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; }
+  input, button, textarea, select { font: inherit; }
+  button, input:where([type="button"], [type="submit"], [type="reset"]) { appearance: button; }
+  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
+}
+
+@layer base {
+  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);
+    line-height: 1.5;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(h1, h2, h3, h4) {
+    color: inherit;
+    font-family: var(--font-display, var(--sf-font-display, ui-serif, Georgia, serif));
+    text-wrap: balance;
+  }
+
+  :where(p, li) { text-wrap: pretty; }
+
+  :where(a) {
+    color: inherit;
+    text-decoration-color: color-mix(in oklch, currentColor 55%, transparent);
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: .08em;
+    text-underline-offset: .18em;
+  }
+
+  :where(button:not(:disabled), [role="button"]:not(:disabled), a[href]) { cursor: pointer; }
+
+  :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
+
+  :where(:focus-visible) {
+    outline: 2px solid var(--color-ring);
+    outline-offset: .2rem;
+  }
+
+  ::selection {
+    background: color-mix(in oklch, var(--color-primary) 24%, transparent);
+    color: var(--color-card);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer app {
+  :where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(ol, ul, menu) {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  :where(button) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+  }
+
+  :where(fieldset) {
+    border: 0;
+    padding: 0;
+  }
+
+  :where(legend) { padding: 0; }
+}
+
+@layer layout {
+  .sf-container {
+    inline-size: min(100% - (var(--grid-gutter) * 2), var(--grid-max-width));
+    margin-inline: auto;
+  }
+
+  .sf-section {
+    padding-block: var(--space-xl-2xl);
+  }
+
+  .sf-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-space, var(--space-s));
+  }
+
+  .sf-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: var(--cluster-align, center);
+    justify-content: var(--cluster-justify, flex-start);
+    gap: var(--cluster-space, var(--space-s));
+  }
+
+  .sf-repel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-s);
+  }
+
+  .sf-grid {
+    display: grid;
+    gap: var(--grid-gutter);
+  }
+
+  .sf-auto-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auto-grid-min, 16rem)), 1fr));
+    gap: var(--grid-gutter);
+  }
+
+  .sf-split {
+    display: grid;
+    gap: var(--split-gap, var(--grid-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 24rem)), 1fr));
+  }
+
+  .sf-centre {
+    box-sizing: content-box;
+    margin-inline: auto;
+    max-inline-size: var(--centre-size, 65ch);
+  }
+
+  .sf-sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--grid-gutter);
+  }
+
+  .sf-sidebar > :first-child {
+    flex-basis: var(--sidebar-width, 20rem);
+    flex-grow: 1;
+  }
+
+  .sf-sidebar > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(100%, var(--sidebar-content-min, 50%));
+  }
+
+  .sf-frame {
+    aspect-ratio: var(--frame-ratio, 16 / 9);
+    overflow: hidden;
+  }
+
+  .sf-frame > :where(img, video) {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  .sf-flow > * + * { margin-block-start: var(--flow-space, var(--space-s)); }
+
+  .sf-panel-grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--grid-gutter);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-min, 18rem)), 1fr));
+  }
+
+  @container (min-width: 42rem) {
+    .sf-panel-grid[data-density="featured"] > :first-child {
+      grid-column: span 2;
+    }
+  }
+
+  :where(.space-y-1, .space-y-2, .space-y-3, .space-y-4, .space-y-5, .space-y-6, .space-y-8, .space-y-10, .space-y-12) > * + * {
+    margin-block-start: var(--sf-space-y);
+  }
+
+  :where(.space-x-1, .space-x-2, .space-x-3, .space-x-4, .space-x-5, .space-x-6, .space-x-8) > * + * {
+    margin-inline-start: var(--sf-space-x);
+  }
+
+  .divide-y > * + * { border-block-start-width: var(--sf-divide-y); }
+  .divide-x > * + * { border-inline-start-width: var(--sf-divide-x); }
+}
+
+@layer components {
+  .sf-button {
+    align-items: center;
+    border-radius: var(--button-radius, var(--radius-md));
+    display: inline-flex;
+    font-size: var(--button-font-size, var(--step--1));
+    font-weight: 700;
+    gap: var(--space-2xs);
+    justify-content: center;
+    min-block-size: var(--button-size, 2.75rem);
+    padding-block: var(--button-padding-block, .625rem);
+    padding-inline: var(--button-padding-inline, var(--space-s));
+    text-decoration: none;
+    transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+    white-space: nowrap;
+  }
+
+  .sf-button:disabled,
+  .sf-button[aria-disabled="true"] {
+    opacity: .55;
+    pointer-events: none;
+  }
+
+  .sf-button--default {
+    background: var(--button-bg, var(--color-primary));
+    border: 1px solid var(--button-border, var(--color-primary-border));
+    box-shadow: var(--shadow-primary-cta);
+    color: var(--button-fg, var(--color-primary-foreground));
+  }
+
+  .sf-button--default:hover { background: var(--color-primary-hover); }
+  .sf-button--outline { background: transparent; border: 1px solid color-mix(in oklch, var(--color-ink-950) 12%, transparent); color: var(--color-heading); }
+  .sf-button--outline:hover { background: var(--color-surface); }
+  .sf-button--secondary { background: var(--color-secondary); color: var(--color-secondary-foreground); }
+  .sf-button--secondary:hover { background: color-mix(in oklch, var(--color-secondary) 80%, white); }
+  .sf-button--ghost { background: transparent; color: var(--color-heading); }
+  .sf-button--ghost:hover { background: var(--color-surface); }
+  .sf-button--link { min-block-size: auto; padding: 0; color: var(--color-primary); text-decoration: underline; text-underline-offset: .25em; box-shadow: none; }
+  .sf-button--destructive { background: var(--color-destructive); color: var(--color-destructive-foreground); }
+  .sf-button--sm { --button-size: 2.25rem; --button-padding-inline: var(--space-xs); }
+  .sf-button--lg { --button-size: 3rem; --button-padding-inline: var(--space-m); }
+  .sf-button--icon { --button-size: 2.75rem; inline-size: 2.75rem; padding-inline: 0; }
+
+  .sf-card {
+    background: var(--card-bg, var(--color-card));
+    border: 1px solid var(--card-border, var(--color-border));
+    border-radius: var(--card-radius, var(--radius-lg));
+    box-shadow: var(--card-shadow, var(--shadow-sm));
+    color: var(--card-fg, var(--color-card-foreground));
+    padding: var(--card-padding, var(--space-m-l));
+  }
+
+  .sf-card--interactive {
+    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+  }
+
+  .sf-card--interactive:hover {
+    border-color: color-mix(in oklch, var(--color-primary) 32%, var(--color-border));
+    box-shadow: var(--shadow-md);
+    transform: translateY(-0.125rem);
+  }
+
+  .sf-section-header {
+    display: grid;
+    gap: var(--space-xs);
+    max-inline-size: var(--section-header-width, 54rem);
+  }
+
+  .sf-section-header[data-align="center"] {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  .sf-kicker {
+    color: var(--color-primary);
+    font-size: var(--step--1);
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sf-badge {
+    align-items: center;
+    background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+    border: 1px solid color-mix(in oklch, var(--color-primary) 24%, transparent);
+    border-radius: var(--radius-full);
+    color: var(--color-primary);
+    display: inline-flex;
+    font-size: var(--step--1);
+    font-weight: 700;
+    gap: var(--space-3xs);
+    line-height: 1;
+    padding: .45em .75em;
+  }
+
+  .sf-field {
+    display: grid;
+    gap: var(--space-2xs);
+  }
+
+  .sf-field > label {
+    color: var(--color-muted-foreground);
+    font-size: var(--step--1);
+    font-weight: 700;
+  }
+
+  .sf-input {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    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);
+  }
+
+  .sf-input:focus-visible {
+    border-color: var(--color-ring);
+    outline: 0.125rem solid color-mix(in oklch, var(--color-ring) 24%, transparent);
+    outline-offset: 0;
+  }
+}
+
+@layer utilities {
+  .sf-text-caption { font-size: var(--step--1); line-height: 1.35; }
+  .sf-text-body { font-size: var(--step-0); line-height: 1.5; }
+  .sf-text-lead { font-size: var(--step-1); line-height: 1.45; }
+  .sf-text-h4 { font-size: var(--step-3); line-height: 1.1; }
+  .sf-text-h3 { font-size: var(--step-4); line-height: 1.05; }
+  .sf-text-h2 { font-size: var(--step-5); line-height: 1; }
+  .sf-text-h1 { font-size: var(--step-6); line-height: 1; }
+  .sf-text-display { font-size: var(--step-7); line-height: .95; }
+
+  .sf-prose {
+    max-inline-size: var(--prose-width, 68ch);
+  }
+
+  :where(.sf-visually-hidden, .sr-only) {
+    block-size: 0.0625rem;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 0.0625rem;
+    margin: -0.0625rem;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  :where(.sf-not-visually-hidden, .not-sr-only) {
+    block-size: auto;
+    clip: auto;
+    clip-path: none;
+    inline-size: auto;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: static;
+    white-space: normal;
+  }
+
+  .sf-skip-link {
+    background: var(--color-primary);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    color: var(--color-primary-foreground);
+    inset-block-start: var(--space-s);
+    inset-inline-start: var(--space-s);
+    padding-block: var(--space-2xs);
+    padding-inline: var(--space-s);
+    position: fixed;
+    text-decoration: none;
+    transform: translateY(calc(-100% - var(--space-m)));
+    transition: transform var(--duration-fast) var(--ease-standard);
+    z-index: 999;
+  }
+
+  .sf-skip-link:focus-visible { transform: translateY(0); }
+
+  .sf-focus-ring:focus-visible {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: .2rem;
+  }
+
+  .sf-focus-ring-inset:focus-visible {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: -0.125rem;
+  }
+
+  .sf-touch-target {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+  }
+
+  .sf-list-reset {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .sf-list-disc {
+    list-style: disc;
+    padding-inline-start: var(--space-m);
+  }
+
+  .sf-list-decimal {
+    list-style: decimal;
+    padding-inline-start: var(--space-m);
+  }
+
+  :where(.sf-link, .sf-link-subtle) {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: .08em;
+    text-underline-offset: .18em;
+  }
+
+  .sf-link { color: var(--color-primary); }
+
+  .sf-link:hover,
+  .sf-link-subtle:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .sf-link-plain {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .sf-full-bleed {
+    inline-size: 100vw;
+    margin-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+@layer utilities {
+  [class~="flex"]{display:flex}
+
+}

package/examples/wordpress/functions.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Synced Flow WordPress example enqueue.
+ */
+
+add_action('wp_enqueue_scripts', function () {
+    wp_enqueue_style(
+        'synced-flow',
+        get_theme_file_uri('assets/css/synced-flow.css'),
+        [],
+        wp_get_theme()->get('Version')
+    );
+});

package/examples/wordpress/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "synced-flow-wordpress-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "flow:build": "synced-flow build",
+    "flow:check": "synced-flow build --check",
+    "flow:lint": "synced-flow lint",
+    "flow:watch": "synced-flow watch",
+    "flow:doctor": "synced-flow doctor"
+  },
+  "dependencies": {
+    "@syncedco/flow": "file:../.."
+  }
+}

package/examples/wordpress/parts/footer.html

@@ -0,0 +1,12 @@
+<!-- wp:group {"tagName":"footer","className":"sf-footer"} -->
+<footer class="wp-block-group sf-footer">
+  <!-- wp:group {"className":"sf-container sf-repel"} -->
+  <div class="wp-block-group sf-container sf-repel">
+    <!-- wp:paragraph {"className":"sf-text-muted"} -->
+    <p class="sf-text-muted">Built with Synced Flow.</p>
+    <!-- /wp:paragraph -->
+    <!-- wp:navigation {"className":"sf-nav__list"} /-->
+  </div>
+  <!-- /wp:group -->
+</footer>
+<!-- /wp:group -->

package/examples/wordpress/parts/header.html

@@ -0,0 +1,10 @@
+<!-- wp:group {"tagName":"header","className":"sf-section sf-section--compact sf-sticky-top sf-bg-background"} -->
+<header class="wp-block-group sf-section sf-section--compact sf-sticky-top sf-bg-background">
+  <!-- wp:group {"className":"sf-container sf-nav","layout":{"type":"flex","justifyContent":"space-between"}} -->
+  <div class="wp-block-group sf-container sf-nav">
+    <!-- wp:site-title {"className":"sf-nav__link"} /-->
+    <!-- wp:navigation {"className":"sf-nav__list"} /-->
+  </div>
+  <!-- /wp:group -->
+</header>
+<!-- /wp:group -->