@syncedco/flow 0.1.0

package/tokens.css

@@ -0,0 +1,198 @@
+/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
+@layer reset, tokens, base, app, layout, components, utilities;
+@layer tokens {
+  :root {
+    color-scheme: light;
+
+    --sf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --sf-font-display: Fraunces, Georgia, "Times New Roman", serif;
+    --sf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+
+    --sf-step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
+    --sf-step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
+    --sf-step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --sf-step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
+    --sf-step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
+    --sf-step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
+    --sf-step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
+    --sf-step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
+    --sf-step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
+    --sf-step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
+    --sf-step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
+    --sf-type-caption: var(--sf-step--1);
+    --sf-type-body: var(--sf-step-0);
+    --sf-type-lead: var(--sf-step-1);
+    --sf-type-h6: var(--sf-step-1);
+    --sf-type-h5: var(--sf-step-2);
+    --sf-type-h4: var(--sf-step-3);
+    --sf-type-h3: var(--sf-step-4);
+    --sf-type-h2: var(--sf-step-5);
+    --sf-type-h1: var(--sf-step-6);
+    --sf-type-title: var(--sf-step-4);
+    --sf-type-display: var(--sf-step-7);
+    --sf-line-height-tight: 1;
+    --sf-line-height-heading: 1.08;
+    --sf-line-height-body: 1.5;
+    --sf-line-height-loose: 1.7;
+
+    --sf-space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
+    --sf-space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
+    --sf-space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
+    --sf-space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --sf-space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
+    --sf-space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
+    --sf-space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
+    --sf-space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
+    --sf-space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
+    --sf-space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
+    --sf-space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
+    --sf-space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
+    --sf-space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
+    --sf-space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
+    --sf-space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
+    --sf-space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
+    --sf-space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
+    --sf-space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
+    --sf-space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
+    --sf-space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
+    --sf-space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
+    --sf-gutter: var(--sf-space-s-l);
+    --sf-region: var(--sf-space-xl-2xl);
+    --sf-container-max: 90rem;
+    --sf-container-narrow: 48rem;
+    --sf-container-wide: 108rem;
+    --sf-grid-columns: 12;
+
+    --sf-radius-none: 0;
+    --sf-radius-xs: 0.25rem;
+    --sf-radius-sm: 0.375rem;
+    --sf-radius-md: 0.5rem;
+    --sf-radius-lg: 0.75rem;
+    --sf-radius-xl: 1rem;
+    --sf-radius-2xl: 1.25rem;
+    --sf-radius-3xl: 1.5rem;
+    --sf-radius-full: 999rem;
+    --sf-radius-control: var(--sf-radius-md);
+    --sf-radius-panel: var(--sf-radius-lg);
+
+    --sf-colour-neutral-0: oklch(100% 0 0);
+    --sf-colour-neutral-50: oklch(98.6% 0.006 80);
+    --sf-colour-neutral-100: oklch(96.4% 0.011 80);
+    --sf-colour-neutral-200: oklch(90.8% 0.014 78);
+    --sf-colour-neutral-300: oklch(82% 0.018 76);
+    --sf-colour-neutral-400: oklch(68% 0.018 246);
+    --sf-colour-neutral-500: oklch(53% 0.018 244);
+    --sf-colour-neutral-600: oklch(43% 0.02 244);
+    --sf-colour-neutral-700: oklch(34% 0.02 244);
+    --sf-colour-neutral-800: oklch(27% 0.022 246);
+    --sf-colour-neutral-850: oklch(22% 0.024 248);
+    --sf-colour-neutral-900: oklch(18% 0.026 250);
+    --sf-colour-neutral-950: oklch(13.5% 0.03 252);
+    --sf-colour-amber-500: oklch(78% 0.15 82);
+    --sf-colour-amber-700: oklch(54% 0.13 74);
+    --sf-colour-orange-500: oklch(74% 0.17 48);
+    --sf-colour-orange-600: oklch(68% 0.18 44);
+    --sf-colour-orange-700: oklch(58% 0.17 42);
+    --sf-colour-green-500: oklch(62% 0.13 150);
+    --sf-colour-green-600: oklch(54% 0.13 150);
+    --sf-colour-green-700: oklch(44% 0.12 150);
+    --sf-colour-cyan-500: oklch(70% 0.12 205);
+    --sf-colour-cyan-600: oklch(58% 0.12 210);
+    --sf-colour-blue-600: oklch(52% 0.14 250);
+    --sf-colour-red-600: oklch(56% 0.2 28);
+    --sf-colour-red-700: oklch(47% 0.19 28);
+    --sf-colour-background: var(--sf-colour-neutral-50);
+    --sf-colour-foreground: var(--sf-colour-neutral-900);
+    --sf-colour-muted: var(--sf-colour-neutral-700);
+    --sf-colour-subtle: var(--sf-colour-neutral-500);
+    --sf-colour-surface: var(--sf-colour-neutral-0);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
+    --sf-colour-primary: var(--sf-colour-orange-600);
+    --sf-colour-primary-hover: var(--sf-colour-orange-700);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-primary-soft: oklch(68% 0.18 44 / 0.12);
+    --sf-colour-primary-soft-border: oklch(68% 0.18 44 / 0.28);
+    --sf-colour-link: var(--sf-colour-orange-700);
+    --sf-colour-link-hover: var(--sf-colour-orange-600);
+    --sf-colour-accent: var(--sf-colour-cyan-500);
+    --sf-colour-accent-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success: var(--sf-colour-green-500);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-success-soft: oklch(62% 0.13 150 / 0.12);
+    --sf-colour-warning: var(--sf-colour-amber-500);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(78% 0.15 82 / 0.16);
+    --sf-colour-danger: var(--sf-colour-red-600);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-danger-soft: oklch(56% 0.2 28 / 0.12);
+    --sf-colour-info: var(--sf-colour-cyan-600);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-info-soft: oklch(70% 0.12 205 / 0.14);
+    --sf-colour-ring: var(--sf-colour-orange-600);
+
+    --sf-shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.08);
+    --sf-shadow-md: 0 0.75rem 1.75rem oklch(0% 0 0 / 0.12);
+    --sf-shadow-lg: 0 1.25rem 3rem oklch(0% 0 0 / 0.16);
+    --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-duration-fast: 150ms;
+    --sf-duration-normal: 220ms;
+    --sf-duration-slow: 360ms;
+    --sf-ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --sf-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
+
+    --sf-button-radius: var(--sf-radius-md);
+    --sf-button-block-size: 2.75rem;
+    --sf-button-padding-inline: var(--sf-space-s);
+    --sf-card-radius: var(--sf-radius-lg);
+    --sf-card-padding: var(--sf-space-m-l);
+    --sf-input-radius: var(--sf-radius-md);
+    --sf-input-block-size: 2.75rem;
+    --sf-input-padding-inline: var(--sf-space-s);
+    --sf-input-border: var(--sf-colour-border);
+    --sf-input-bg: var(--sf-colour-surface);
+    --sf-alert-radius: var(--sf-radius-lg);
+    --sf-alert-padding: var(--sf-space-s-m);
+    --sf-nav-gap: var(--sf-space-xs-s);
+    --sf-nav-link-radius: var(--sf-radius-sm);
+    --sf-icon-size: 1em;
+    --sf-icon-stroke: 2;
+  }
+
+  :where(.sf-theme-light, [data-sf-theme="light"]) {
+    color-scheme: light;
+    --sf-colour-background: var(--sf-colour-neutral-50);
+    --sf-colour-foreground: var(--sf-colour-neutral-900);
+    --sf-colour-muted: var(--sf-colour-neutral-700);
+    --sf-colour-subtle: var(--sf-colour-neutral-500);
+    --sf-colour-surface: var(--sf-colour-neutral-0);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
+    --sf-colour-link: var(--sf-colour-orange-700);
+    --sf-colour-link-hover: var(--sf-colour-orange-600);
+  }
+
+  :where(.sf-theme-dark, [data-sf-theme="dark"]) {
+    color-scheme: dark;
+    --sf-colour-background: var(--sf-colour-neutral-950);
+    --sf-colour-foreground: oklch(96% 0.008 86);
+    --sf-colour-muted: oklch(78% 0.012 86);
+    --sf-colour-subtle: oklch(64% 0.014 86);
+    --sf-colour-surface: var(--sf-colour-neutral-900);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-850);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-850);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-950);
+    --sf-colour-border: oklch(100% 0 0 / 0.14);
+    --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
+    --sf-colour-link: var(--sf-colour-orange-500);
+    --sf-colour-link-hover: oklch(80% 0.14 50);
+  }
+}

package/utilities.css

@@ -0,0 +1,255 @@
+/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
+@layer reset, tokens, base, app, layout, components, utilities;
+@layer utilities {
+  .sf-text-caption { font-size: var(--sf-step--1); line-height: 1.35; }
+  .sf-text-body { font-size: var(--sf-step-0); line-height: 1.5; }
+  .sf-text-lead { font-size: var(--sf-step-1); line-height: 1.45; }
+  .sf-text-h4 { font-size: var(--sf-step-3); line-height: 1.1; }
+  .sf-text-h3 { font-size: var(--sf-step-4); line-height: 1.05; }
+  .sf-text-h2 { font-size: var(--sf-step-5); line-height: 1; }
+  .sf-text-h1 { font-size: var(--sf-step-6); line-height: 1; }
+  .sf-text-display { font-size: var(--sf-step-7); line-height: .95; }
+
+  .sf-text-balance { text-wrap: balance; }
+  .sf-text-pretty { text-wrap: pretty; }
+  .sf-text-muted { color: var(--sf-colour-muted); }
+  .sf-text-subtle { color: var(--sf-colour-subtle); }
+  .sf-text-primary { color: var(--sf-colour-primary); }
+  .sf-text-success { color: var(--sf-colour-success); }
+  .sf-text-warning { color: var(--sf-colour-warning); }
+  .sf-text-danger { color: var(--sf-colour-danger); }
+
+  .sf-font-sans { font-family: var(--sf-font-sans); }
+  .sf-font-display { font-family: var(--sf-font-display); }
+  .sf-font-mono { font-family: var(--sf-font-mono); }
+
+  .sf-bg-background { background: var(--sf-colour-background); }
+  .sf-bg-surface { background: var(--sf-colour-surface); }
+  .sf-bg-surface-alt { background: var(--sf-colour-surface-alt); }
+  .sf-bg-primary-soft { background: var(--sf-colour-primary-soft); }
+  .sf-bg-success-soft { background: var(--sf-colour-success-soft); }
+  .sf-bg-warning-soft { background: var(--sf-colour-warning-soft); }
+  .sf-bg-danger-soft { background: var(--sf-colour-danger-soft); }
+
+  .sf-border { border: 1px solid var(--sf-colour-border); }
+  .sf-border-strong { border: 1px solid var(--sf-colour-border-strong); }
+  .sf-rounded { border-radius: var(--sf-radius-md); }
+  .sf-rounded-panel { border-radius: var(--sf-radius-panel); }
+  .sf-rounded-full { border-radius: var(--sf-radius-full); }
+  .sf-shadow-sm { box-shadow: var(--sf-shadow-sm); }
+  .sf-shadow-md { box-shadow: var(--sf-shadow-md); }
+  .sf-shadow-lg { box-shadow: var(--sf-shadow-lg); }
+  .sf-shadow-none { box-shadow: none; }
+
+  .sf-push-block-end { margin-block-start: auto; }
+  .sf-push-block-start { margin-block-end: auto; }
+  .sf-push-inline-end { margin-inline-start: auto; }
+  .sf-push-inline-start { margin-inline-end: auto; }
+
+  .sf-prose {
+    max-inline-size: var(--sf-prose-width, 68ch);
+  }
+
+  .sf-prose--blog { --sf-prose-width: 72ch; }
+  .sf-prose--legal { --sf-prose-width: 80ch; }
+
+  :where(.sf-prose--blog, .sf-prose--legal) > * + * {
+    margin-block-start: var(--sf-space-s);
+  }
+
+  :where(.sf-prose--blog, .sf-prose--legal) :where(h2, h3) {
+    margin-block-start: var(--sf-space-l);
+  }
+
+  .sf-meta {
+    align-items: center;
+    color: var(--sf-colour-muted);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-figure {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-caption {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+  }
+
+  .sf-table-wrap {
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    overflow-x: auto;
+  }
+
+  .sf-table-wrap table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--sf-table-min, 42rem);
+  }
+
+  .sf-table-wrap :where(th, td) {
+    border-block-end: 1px solid var(--sf-colour-border);
+    padding: var(--sf-space-xs);
+    text-align: start;
+  }
+
+  .sf-table-wrap :where(th) {
+    background: var(--sf-colour-surface-alt);
+    font-weight: 800;
+  }
+
+  :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(--sf-colour-primary);
+    border-radius: var(--sf-radius-md);
+    box-shadow: var(--sf-shadow-md);
+    color: var(--sf-colour-primary-foreground);
+    inset-block-start: var(--sf-space-s);
+    inset-inline-start: var(--sf-space-s);
+    opacity: 0;
+    padding-block: var(--sf-space-2xs);
+    padding-inline: var(--sf-space-s);
+    pointer-events: none;
+    position: fixed;
+    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;
+  }
+
+  .sf-skip-link:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  .sf-focus-ring:focus-visible {
+    outline: 0.125rem solid var(--sf-colour-ring);
+    outline-offset: .2rem;
+  }
+
+  .sf-focus-ring-inset:focus-visible {
+    outline: 0.125rem solid var(--sf-colour-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(--sf-space-m);
+  }
+
+  .sf-list-decimal {
+    list-style: decimal;
+    padding-inline-start: var(--sf-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(--sf-colour-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%);
+  }
+
+  .sf-animate-fade,
+  .sf-animate-rise,
+  .sf-animate-scale,
+  .sf-animate-slide {
+    animation-duration: var(--sf-motion-duration, var(--sf-duration-slow));
+    animation-fill-mode: both;
+    animation-timing-function: var(--sf-motion-ease, var(--sf-ease-emphasized));
+  }
+
+  .sf-animate-fade { animation-name: sf-fade; }
+  .sf-animate-rise { animation-name: sf-rise; }
+  .sf-animate-scale { animation-name: sf-scale; }
+  .sf-animate-slide { animation-name: sf-slide; }
+
+  .sf-animate-stagger > * {
+    animation-delay: calc(var(--sf-stagger-index, 0) * var(--sf-stagger-step, 80ms));
+  }
+
+  @keyframes sf-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes sf-rise {
+    from { opacity: 0; transform: translateY(var(--sf-motion-distance, var(--sf-space-s))); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes sf-scale {
+    from { opacity: 0; transform: scale(.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes sf-slide {
+    from { opacity: 0; transform: translateX(var(--sf-motion-distance, var(--sf-space-s))); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-animate-fade, .sf-animate-rise, .sf-animate-scale, .sf-animate-slide) {
+      animation: none;
+    }
+  }
+}