@syncedco/flow 0.1.2 → 0.1.4

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

@@ -2,8 +2,7 @@
 
 @layer reset, tokens, base, app, layout, components, utilities, overrides;
 
-@layer tokens {
-  :root {
+: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);
@@ -69,74 +68,74 @@
     --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-background: var(--sf-colour-background, oklch(14% 0.025 248));
+    --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
+    --color-card: var(--sf-colour-card, oklch(18% 0.024 246));
+    --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
+    --color-popover: var(--sf-colour-popover, oklch(18% 0.024 246));
+    --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
+    --color-primary: var(--sf-colour-primary, oklch(69% 0.18 44));
+    --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
+    --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
+    --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
+    --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
+    --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
+    --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
+    --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
+    --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
+    --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
+    --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
+    --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-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --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));
+    --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
+    --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
+    --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-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);
+    --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
+    --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
+    --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
+    --color-green-light: var(--sf-colour-green-light, oklch(90% 0.06 148));
+    --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
+    --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
+    --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
+    --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
+    --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
+    --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
+    --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
+    --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
+    --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
+    --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
+    --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
+    --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
+    --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
+    --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
+    --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
+    --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
+    --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
+    --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
+    --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
+    --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
+    --color-purple-icon: var(--sf-colour-purple-icon, oklch(55% 0.2 280));
+    --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
+    --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
+    --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
+    --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
+    --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
+    --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
+    --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
+    --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
+    --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
+    --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
+    --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
+    --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
+    --color-primary-highlight: var(--sf-colour-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);
@@ -150,10 +149,10 @@
     --duration-normal: 220ms;
     --duration-slow: 360ms;
     --ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --icon-size: 1em;
+    --icon-stroke: 2;
   }
-}
 
-@layer tokens {
   :root {
     --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
     --font-sans: var(--sf-font-sans);
@@ -169,6 +168,8 @@
     --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-surface-elevated: var(--sf-colour-surface-raised);
+    --color-surface-elevated: var(--sf-colour-surface-elevated);
     --sf-colour-border: oklch(18% 0.026 250 / 0.12);
     --color-border: var(--sf-colour-border);
     --sf-colour-primary: oklch(68% 0.18 44);
@@ -197,7 +198,6 @@
     --sf-input-radius: 0.5rem;
     --sf-input-block-size: 2.75rem;
   }
-}
 
 @layer reset {
   *, *::before, *::after { box-sizing: border-box; }
@@ -321,6 +321,87 @@
     gap: var(--space-s);
   }
 
+  .sf-toolbar {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-s);
+    justify-content: space-between;
+  }
+
+  .sf-app-shell {
+    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;
+  }
+
+  .sf-app-sidebar {
+    align-self: start;
+    background: var(--color-surface);
+    border-inline-end: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+    max-block-size: 100dvh;
+    min-block-size: 100dvh;
+    overflow: auto;
+    padding: var(--space-s);
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .sf-app-sidebar__brand {
+    align-items: center;
+    display: flex;
+    gap: var(--space-xs);
+    padding-block-end: var(--space-s);
+  }
+
+  .sf-app-sidebar .sf-nav {
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .sf-app-sidebar .sf-kicker {
+    text-align: start;
+  }
+
+  .sf-app-sidebar .sf-nav__list {
+    align-items: stretch;
+    flex-direction: column;
+    inline-size: 100%;
+    margin-block: 0;
+    padding-inline-start: var(--space-2xs);
+  }
+
+  .sf-app-sidebar .sf-nav__list > li {
+    inline-size: 100%;
+  }
+
+  .sf-app-sidebar .sf-nav__link {
+    --icon-size: var(--step-0);
+    gap: var(--space-xs);
+    inline-size: 100%;
+    justify-content: flex-start;
+    min-block-size: 2.5rem;
+    padding-block: var(--space-2xs);
+    padding-inline: var(--space-xs);
+    text-align: start;
+  }
+
+  .sf-app-sidebar > footer {
+    border-block-start: 1px solid var(--color-border);
+    padding-block-start: var(--space-s);
+  }
+
+  .sf-app-main {
+    min-inline-size: 0;
+    padding: var(--sf-app-main-padding, var(--space-m-l));
+  }
+
   .sf-grid {
     display: grid;
     gap: var(--grid-gutter);
@@ -381,6 +462,35 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-min, 18rem)), 1fr));
   }
 
+  .sf-metric-grid,
+  .sf-pipeline {
+    display: grid;
+    gap: var(--space-s);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 11rem)), 1fr));
+  }
+
+  @media (max-width: 56rem) {
+    .sf-app-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .sf-app-main {
+      --sf-app-main-padding: var(--space-s);
+    }
+
+    .sf-app-sidebar {
+      border-block-end: 1px solid var(--color-border);
+      border-inline-end: 0;
+      max-block-size: none;
+      min-block-size: auto;
+      position: static;
+    }
+
+    .sf-app-sidebar > footer {
+      margin-block-start: 0;
+    }
+  }
+
   @container (min-width: 42rem) {
     .sf-panel-grid[data-density="featured"] > :first-child {
       grid-column: span 2;
@@ -440,7 +550,23 @@
   .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-button--icon,
+  .sf-icon-button { --button-size: 2.75rem; inline-size: 2.75rem; padding-inline: 0; }
+
+  .sf-icon {
+    block-size: var(--icon-size, 1em);
+    color: var(--icon-color, currentColor);
+    flex: 0 0 auto;
+    inline-size: var(--icon-size, 1em);
+    stroke-width: var(--icon-stroke, 2);
+    vertical-align: -0.125em;
+  }
+
+  .sf-icon--xs { --icon-size: var(--step--1); }
+  .sf-icon--sm { --icon-size: var(--step-0); }
+  .sf-icon--md { --icon-size: var(--step-1); }
+  .sf-icon--lg { --icon-size: var(--step-2); }
+  .sf-icon--xl { --icon-size: var(--step-3); }
 
   .sf-card {
     background: var(--card-bg, var(--color-card));
@@ -494,6 +620,111 @@
     padding: .45em .75em;
   }
 
+  .sf-avatar {
+    align-items: center;
+    aspect-ratio: 1;
+    background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+    border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
+    border-radius: var(--radius-full);
+    color: var(--color-primary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--step--1);
+    font-weight: 800;
+    inline-size: var(--avatar-size, 2.25rem);
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .sf-chart {
+    --chart-accent: var(--color-primary);
+  }
+
+  .sf-chart__plot {
+    background: color-mix(in oklch, var(--color-surface) 72%, transparent);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    padding: var(--space-xs);
+  }
+
+  .sf-chart--wide {
+    --chart-block-size: 14rem;
+  }
+
+  .sf-chart__svg {
+    block-size: var(--chart-block-size, 12rem);
+    display: block;
+    inline-size: 100%;
+  }
+
+  .sf-chart__grid,
+  .sf-chart__axis {
+    fill: none;
+    stroke: var(--color-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .sf-chart__area {
+    fill: color-mix(in oklch, var(--chart-accent) 18%, transparent);
+  }
+
+  .sf-chart__line {
+    fill: none;
+    stroke: var(--chart-accent);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .sf-chart__point {
+    fill: var(--chart-accent);
+    stroke: var(--color-card);
+    stroke-width: 2;
+  }
+
+  .sf-chart__legend {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+  }
+
+  .sf-chart__legend-item {
+    align-items: center;
+    color: var(--color-muted-foreground);
+    display: inline-flex;
+    gap: var(--space-3xs);
+  }
+
+  .sf-chart__swatch {
+    aspect-ratio: 1;
+    background: var(--chart-accent);
+    border-radius: var(--radius-full);
+    display: inline-block;
+    inline-size: .75rem;
+  }
+
+  .sf-meter-list {
+    display: grid;
+    gap: var(--space-xs);
+  }
+
+  .sf-meter-row {
+    display: grid;
+    gap: var(--space-3xs);
+  }
+
+  .sf-meter {
+    accent-color: var(--chart-accent, var(--color-primary));
+    block-size: .625rem;
+    border-radius: var(--radius-full);
+    inline-size: 100%;
+    overflow: hidden;
+  }
+
   .sf-field {
     display: grid;
     gap: var(--space-2xs);
@@ -628,6 +859,11 @@
     text-decoration: 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-full-bleed {
     inline-size: 100vw;
     margin-inline-start: 50%;

package/examples/wordpress/parts/footer.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"tagName":"footer","className":"sf-footer"} -->
-<footer class="wp-block-group sf-footer">
+<!-- wp:group {"tagName":"footer","backgroundColor":"surface-elevated","className":"sf-footer"} -->
+<footer class="wp-block-group sf-footer has-surface-elevated-background-color has-background">
   <!-- wp:group {"className":"sf-container sf-repel"} -->
   <div class="wp-block-group sf-container sf-repel">
     <!-- wp:paragraph {"className":"sf-text-muted"} -->

package/examples/wordpress/parts/header.html

@@ -1,5 +1,5 @@
-<!-- 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 {"tagName":"header","backgroundColor":"surface-elevated","className":"sf-section sf-section--compact sf-sticky-top"} -->
+<header class="wp-block-group sf-section sf-section--compact sf-sticky-top has-surface-elevated-background-color has-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"} /-->

package/examples/wordpress/theme.json

@@ -3,12 +3,65 @@
   "version": 3,
   "settings": {
     "appearanceTools": true,
+    "color": {
+      "palette": [
+        {
+          "slug": "base",
+          "name": "Base",
+          "color": "var(--sf-colour-background)"
+        },
+        {
+          "slug": "foreground",
+          "name": "Foreground",
+          "color": "var(--sf-colour-foreground)"
+        },
+        {
+          "slug": "muted",
+          "name": "Muted",
+          "color": "var(--sf-colour-muted)"
+        },
+        {
+          "slug": "surface",
+          "name": "Surface",
+          "color": "var(--sf-colour-surface)"
+        },
+        {
+          "slug": "surface-alt",
+          "name": "Surface Alt",
+          "color": "var(--sf-colour-surface-alt)"
+        },
+        {
+          "slug": "surface-elevated",
+          "name": "Surface Elevated",
+          "color": "var(--sf-colour-surface-elevated, var(--sf-colour-surface-raised))"
+        },
+        {
+          "slug": "border",
+          "name": "Border",
+          "color": "var(--sf-colour-border)"
+        },
+        {
+          "slug": "primary",
+          "name": "Primary",
+          "color": "var(--sf-colour-primary)"
+        },
+        {
+          "slug": "primary-foreground",
+          "name": "Primary Foreground",
+          "color": "var(--sf-colour-primary-foreground)"
+        }
+      ]
+    },
     "layout": {
       "contentSize": "72rem",
       "wideSize": "90rem"
     }
   },
   "styles": {
+    "color": {
+      "background": "var(--sf-colour-background)",
+      "text": "var(--sf-colour-foreground)"
+    },
     "spacing": {
       "blockGap": "var(--space-s-l)"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncedco/flow",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
   "type": "module",
   "packageManager": "pnpm@11.2.2",

package/src/presets.mjs

@@ -10,6 +10,7 @@ export const themePresets = {
       muted: 'oklch(45% 0.018 236)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(96.4% 0.011 80)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(18% 0.026 250 / 0.12)',
       primary: 'oklch(68% 0.18 44)',
       primaryHover: 'oklch(60% 0.17 42)',
@@ -46,6 +47,7 @@ export const themePresets = {
       muted: 'oklch(44.6% 0.043 257)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(96.8% 0.007 247)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(20.8% 0.042 265 / 0.12)',
       primary: 'oklch(52% 0.14 250)',
       primaryHover: 'oklch(44% 0.13 250)',
@@ -84,6 +86,7 @@ export const themePresets = {
       muted: 'oklch(43% 0.02 65)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(94% 0.02 80)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(18% 0.022 55 / 0.14)',
       primary: 'oklch(58% 0.17 42)',
       primaryHover: 'oklch(50% 0.16 40)',
@@ -122,6 +125,7 @@ export const themePresets = {
       muted: 'oklch(78% 0.012 86)',
       surface: 'oklch(18% 0.026 250)',
       surfaceAlt: 'oklch(22% 0.024 248)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(100% 0 0 / 0.14)',
       primary: 'oklch(70% 0.12 205)',
       primaryHover: 'oklch(76% 0.12 205)',

package/styles.css

@@ -163,7 +163,7 @@
     --sf-icon-stroke: 2;
   }
 
-  :where(.sf-theme-light, [data-sf-theme="light"]) {
+  .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);
@@ -179,7 +179,7 @@
     --sf-colour-link-hover: var(--sf-colour-orange-600);
   }
 
-  :where(.sf-theme-dark, [data-sf-theme="dark"]) {
+  .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);

package/tokens.css

@@ -163,7 +163,7 @@
     --sf-icon-stroke: 2;
   }
 
-  :where(.sf-theme-light, [data-sf-theme="light"]) {
+  .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);
@@ -179,7 +179,7 @@
     --sf-colour-link-hover: var(--sf-colour-orange-600);
   }
 
-  :where(.sf-theme-dark, [data-sf-theme="dark"]) {
+  .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);