@syncedco/flow 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/bin/synced-flow.mjs +68 -68
  2. package/docs/api-contract.md +4 -0
  3. package/docs/tokens.md +4 -0
  4. package/examples/astro/src/styles/synced-flow.generated.css +70 -72
  5. package/examples/next/app/synced-flow.generated.css +70 -72
  6. package/examples/plain-html/synced-flow.generated.css +70 -72
  7. package/examples/vite/src/synced-flow.generated.css +70 -72
  8. package/examples/wordpress/assets/css/synced-flow.css +307 -73
  9. package/package.json +1 -1
  10. package/styles.css +2 -2
  11. package/tokens.css +2 -2
package/examples/wordpress/assets/css/synced-flow.css CHANGED
@@ -2,8 +2,7 @@
2
2
 
3
3
  @layer reset, tokens, base, app, layout, components, utilities, overrides;
4
4
 
5
- @layer tokens {
6
- :root {
5
+ :root {
7
6
  color-scheme: light;
8
7
  --font-sans: var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif);
9
8
  --font-display: var(--sf-font-display, ui-serif, Georgia, serif);
@@ -69,74 +68,74 @@
69
68
  --color-white: oklch(100% 0 0);
70
69
  --color-black: oklch(0% 0 0);
71
70
 
72
- --color-background: oklch(14% 0.025 248);
73
- --color-foreground: oklch(96% 0.01 92);
74
- --color-card: oklch(18% 0.024 246);
75
- --color-card-foreground: oklch(96% 0.01 92);
76
- --color-popover: oklch(18% 0.024 246);
77
- --color-popover-foreground: oklch(96% 0.01 92);
78
- --color-primary: oklch(69% 0.18 44);
79
- --color-primary-hover: oklch(64% 0.18 44);
80
- --color-primary-label: oklch(55% 0.18 44);
81
- --color-primary-border: oklch(66% 0.17 43);
82
- --color-primary-foreground: oklch(98% 0.01 95);
83
- --color-secondary: oklch(24% 0.018 22);
84
- --color-secondary-foreground: oklch(96% 0.01 92);
85
- --color-muted: oklch(26% 0.012 24);
86
- --color-muted-foreground: oklch(76% 0.01 92);
87
- --color-accent: oklch(24% 0.018 22);
88
- --color-accent-foreground: oklch(96% 0.01 92);
89
- --color-destructive: oklch(55% 0.2 28);
90
- --color-destructive-foreground: oklch(98% 0.01 95);
91
- --color-border: oklch(100% 0 0 / 0.12);
92
- --color-input: oklch(100% 0 0 / 0.12);
93
- --color-ring: oklch(69% 0.18 44);
94
- --color-heading: oklch(20% 0.02 18);
95
- --color-page-text: oklch(23% 0.02 18);
96
- --color-body: oklch(45% 0.02 28);
97
- --color-body-dark: oklch(40% 0.02 28);
98
- --color-subdued: oklch(42% 0.02 20);
99
- --color-surface: oklch(96% 0.015 80);
100
- --color-surface-alt: oklch(96.6% 0.018 82);
71
+ --color-background: var(--sf-colour-background, oklch(14% 0.025 248));
72
+ --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
73
+ --color-card: var(--sf-colour-card, oklch(18% 0.024 246));
74
+ --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
75
+ --color-popover: var(--sf-colour-popover, oklch(18% 0.024 246));
76
+ --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
77
+ --color-primary: var(--sf-colour-primary, oklch(69% 0.18 44));
78
+ --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
79
+ --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
80
+ --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
81
+ --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
82
+ --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
83
+ --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
84
+ --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
85
+ --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
86
+ --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
87
+ --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
88
+ --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
89
+ --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
90
+ --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
91
+ --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
92
+ --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
93
+ --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
94
+ --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
95
+ --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
96
+ --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
97
+ --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
98
+ --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
99
+ --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
101
100
  --color-hero-bg: oklch(8% 0.02 260);
102
- --color-green: oklch(55% 0.12 148);
103
- --color-green-dark: oklch(45% 0.12 148);
104
- --color-green-muted: oklch(40% 0.12 148);
105
- --color-green-light: oklch(90% 0.06 148);
106
- --color-green-lighter: oklch(92% 0.04 148);
107
- --color-green-bg: oklch(88% 0.07 148);
108
- --color-green-bg-alt: oklch(82% 0.1 148);
109
- --color-green-vivid: oklch(78% 0.08 148);
110
- --color-green-mid: oklch(75% 0.12 148);
111
- --color-green-deep: oklch(70% 0.14 150);
112
- --color-green-deepest: oklch(60% 0.14 150);
113
- --color-green-wash: oklch(93% 0.06 148);
114
- --color-green-wash-alt: oklch(88% 0.08 148);
115
- --color-green-gradient-from: oklch(82% 0.1 148);
116
- --color-green-gradient-to: oklch(86% 0.06 148);
117
- --color-deco-lime: oklch(80% 0.18 130);
118
- --color-deco-blue: oklch(60% 0.12 240);
119
- --color-deco-warm: oklch(80% 0.06 60);
120
- --color-deco-warm-light: oklch(92% 0.02 80);
121
- --color-deco-warm-mid: oklch(80% 0.15 60);
122
- --color-purple-light: oklch(95% 0.05 280);
123
- --color-purple-mid: oklch(92% 0.05 280);
124
- --color-purple-dark: oklch(90% 0.06 280);
125
- --color-purple-darker: oklch(87% 0.07 280);
126
- --color-purple-icon: oklch(55% 0.2 280);
127
- --color-warm-light: oklch(95.6% 0.05 22);
128
- --color-warm-mid: oklch(95% 0.04 40);
129
- --color-warm-grad-to: oklch(90% 0.08 30);
130
- --color-warm-grad-to-alt: oklch(90% 0.06 30);
131
- --color-warm-icon: oklch(60% 0.17 44);
132
- --color-cool-light: oklch(92% 0.04 200);
133
- --color-cool-dark: oklch(87% 0.06 200);
134
- --color-primary-glow: oklch(80% 0.12 44);
135
- --color-primary-soft: oklch(69% 0.18 44 / 0.10);
136
- --color-primary-soft-border: oklch(69% 0.18 44 / 0.30);
137
- --color-primary-soft-border-light: oklch(69% 0.18 44 / 0.25);
138
- --color-primary-soft-text: oklch(85% 0.08 44);
139
- --color-primary-highlight: oklch(75% 0.14 44);
101
+ --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
102
+ --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
103
+ --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
104
+ --color-green-light: var(--sf-colour-green-light, oklch(90% 0.06 148));
105
+ --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
106
+ --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
107
+ --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
108
+ --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
109
+ --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
110
+ --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
111
+ --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
112
+ --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
113
+ --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
114
+ --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
115
+ --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
116
+ --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
117
+ --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
118
+ --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
119
+ --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
120
+ --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
121
+ --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
122
+ --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
123
+ --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
124
+ --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
125
+ --color-purple-icon: var(--sf-colour-purple-icon, oklch(55% 0.2 280));
126
+ --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
127
+ --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
128
+ --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
129
+ --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
130
+ --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
131
+ --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
132
+ --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
133
+ --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
134
+ --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
135
+ --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
136
+ --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
137
+ --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
138
+ --color-primary-highlight: var(--sf-colour-primary-highlight, oklch(75% 0.14 44));
140
139
 
141
140
  --shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.06);
142
141
  --shadow-md: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.08);
@@ -150,10 +149,10 @@
150
149
  --duration-normal: 220ms;
151
150
  --duration-slow: 360ms;
152
151
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
152
+ --icon-size: 1em;
153
+ --icon-stroke: 2;
153
154
  }
154
- }
155
155
 
156
- @layer tokens {
157
156
  :root {
158
157
  --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
159
158
  --font-sans: var(--sf-font-sans);
@@ -197,7 +196,6 @@
197
196
  --sf-input-radius: 0.5rem;
198
197
  --sf-input-block-size: 2.75rem;
199
198
  }
200
- }
201
199
 
202
200
  @layer reset {
203
201
  *, *::before, *::after { box-sizing: border-box; }
@@ -321,6 +319,87 @@
321
319
  gap: var(--space-s);
322
320
  }
323
321
 
322
+ .sf-toolbar {
323
+ align-items: center;
324
+ display: flex;
325
+ flex-wrap: wrap;
326
+ gap: var(--space-s);
327
+ justify-content: space-between;
328
+ }
329
+
330
+ .sf-app-shell {
331
+ background: var(--color-background);
332
+ color: var(--color-foreground);
333
+ display: grid;
334
+ grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
335
+ min-block-size: 100dvh;
336
+ }
337
+
338
+ .sf-app-sidebar {
339
+ align-self: start;
340
+ background: var(--color-surface);
341
+ border-inline-end: 1px solid var(--color-border);
342
+ display: flex;
343
+ flex-direction: column;
344
+ gap: var(--space-s);
345
+ max-block-size: 100dvh;
346
+ min-block-size: 100dvh;
347
+ overflow: auto;
348
+ padding: var(--space-s);
349
+ position: sticky;
350
+ inset-block-start: 0;
351
+ }
352
+
353
+ .sf-app-sidebar__brand {
354
+ align-items: center;
355
+ display: flex;
356
+ gap: var(--space-xs);
357
+ padding-block-end: var(--space-s);
358
+ }
359
+
360
+ .sf-app-sidebar .sf-nav {
361
+ align-items: stretch;
362
+ flex-direction: column;
363
+ justify-content: flex-start;
364
+ }
365
+
366
+ .sf-app-sidebar .sf-kicker {
367
+ text-align: start;
368
+ }
369
+
370
+ .sf-app-sidebar .sf-nav__list {
371
+ align-items: stretch;
372
+ flex-direction: column;
373
+ inline-size: 100%;
374
+ margin-block: 0;
375
+ padding-inline-start: var(--space-2xs);
376
+ }
377
+
378
+ .sf-app-sidebar .sf-nav__list > li {
379
+ inline-size: 100%;
380
+ }
381
+
382
+ .sf-app-sidebar .sf-nav__link {
383
+ --icon-size: var(--step-0);
384
+ gap: var(--space-xs);
385
+ inline-size: 100%;
386
+ justify-content: flex-start;
387
+ min-block-size: 2.5rem;
388
+ padding-block: var(--space-2xs);
389
+ padding-inline: var(--space-xs);
390
+ text-align: start;
391
+ }
392
+
393
+ .sf-app-sidebar > footer {
394
+ border-block-start: 1px solid var(--color-border);
395
+ padding-block-start: var(--space-s);
396
+ }
397
+
398
+ .sf-app-main {
399
+ min-inline-size: 0;
400
+ padding: var(--sf-app-main-padding, var(--space-m-l));
401
+ }
402
+
324
403
  .sf-grid {
325
404
  display: grid;
326
405
  gap: var(--grid-gutter);
@@ -381,6 +460,35 @@
381
460
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-min, 18rem)), 1fr));
382
461
  }
383
462
 
463
+ .sf-metric-grid,
464
+ .sf-pipeline {
465
+ display: grid;
466
+ gap: var(--space-s);
467
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 11rem)), 1fr));
468
+ }
469
+
470
+ @media (max-width: 56rem) {
471
+ .sf-app-shell {
472
+ grid-template-columns: 1fr;
473
+ }
474
+
475
+ .sf-app-main {
476
+ --sf-app-main-padding: var(--space-s);
477
+ }
478
+
479
+ .sf-app-sidebar {
480
+ border-block-end: 1px solid var(--color-border);
481
+ border-inline-end: 0;
482
+ max-block-size: none;
483
+ min-block-size: auto;
484
+ position: static;
485
+ }
486
+
487
+ .sf-app-sidebar > footer {
488
+ margin-block-start: 0;
489
+ }
490
+ }
491
+
384
492
  @container (min-width: 42rem) {
385
493
  .sf-panel-grid[data-density="featured"] > :first-child {
386
494
  grid-column: span 2;
@@ -440,7 +548,23 @@
440
548
  .sf-button--destructive { background: var(--color-destructive); color: var(--color-destructive-foreground); }
441
549
  .sf-button--sm { --button-size: 2.25rem; --button-padding-inline: var(--space-xs); }
442
550
  .sf-button--lg { --button-size: 3rem; --button-padding-inline: var(--space-m); }
443
- .sf-button--icon { --button-size: 2.75rem; inline-size: 2.75rem; padding-inline: 0; }
551
+ .sf-button--icon,
552
+ .sf-icon-button { --button-size: 2.75rem; inline-size: 2.75rem; padding-inline: 0; }
553
+
554
+ .sf-icon {
555
+ block-size: var(--icon-size, 1em);
556
+ color: var(--icon-color, currentColor);
557
+ flex: 0 0 auto;
558
+ inline-size: var(--icon-size, 1em);
559
+ stroke-width: var(--icon-stroke, 2);
560
+ vertical-align: -0.125em;
561
+ }
562
+
563
+ .sf-icon--xs { --icon-size: var(--step--1); }
564
+ .sf-icon--sm { --icon-size: var(--step-0); }
565
+ .sf-icon--md { --icon-size: var(--step-1); }
566
+ .sf-icon--lg { --icon-size: var(--step-2); }
567
+ .sf-icon--xl { --icon-size: var(--step-3); }
444
568
 
445
569
  .sf-card {
446
570
  background: var(--card-bg, var(--color-card));
@@ -494,6 +618,111 @@
494
618
  padding: .45em .75em;
495
619
  }
496
620
 
621
+ .sf-avatar {
622
+ align-items: center;
623
+ aspect-ratio: 1;
624
+ background: color-mix(in oklch, var(--color-primary) 14%, transparent);
625
+ border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
626
+ border-radius: var(--radius-full);
627
+ color: var(--color-primary);
628
+ display: inline-flex;
629
+ flex: 0 0 auto;
630
+ font-size: var(--step--1);
631
+ font-weight: 800;
632
+ inline-size: var(--avatar-size, 2.25rem);
633
+ justify-content: center;
634
+ line-height: 1;
635
+ }
636
+
637
+ .sf-chart {
638
+ --chart-accent: var(--color-primary);
639
+ }
640
+
641
+ .sf-chart__plot {
642
+ background: color-mix(in oklch, var(--color-surface) 72%, transparent);
643
+ border: 1px solid var(--color-border);
644
+ border-radius: var(--radius-lg);
645
+ overflow: hidden;
646
+ padding: var(--space-xs);
647
+ }
648
+
649
+ .sf-chart--wide {
650
+ --chart-block-size: 14rem;
651
+ }
652
+
653
+ .sf-chart__svg {
654
+ block-size: var(--chart-block-size, 12rem);
655
+ display: block;
656
+ inline-size: 100%;
657
+ }
658
+
659
+ .sf-chart__grid,
660
+ .sf-chart__axis {
661
+ fill: none;
662
+ stroke: var(--color-border);
663
+ stroke-width: 1;
664
+ vector-effect: non-scaling-stroke;
665
+ }
666
+
667
+ .sf-chart__area {
668
+ fill: color-mix(in oklch, var(--chart-accent) 18%, transparent);
669
+ }
670
+
671
+ .sf-chart__line {
672
+ fill: none;
673
+ stroke: var(--chart-accent);
674
+ stroke-linecap: round;
675
+ stroke-linejoin: round;
676
+ stroke-width: 3;
677
+ vector-effect: non-scaling-stroke;
678
+ }
679
+
680
+ .sf-chart__point {
681
+ fill: var(--chart-accent);
682
+ stroke: var(--color-card);
683
+ stroke-width: 2;
684
+ }
685
+
686
+ .sf-chart__legend {
687
+ align-items: center;
688
+ display: flex;
689
+ flex-wrap: wrap;
690
+ gap: var(--space-xs);
691
+ }
692
+
693
+ .sf-chart__legend-item {
694
+ align-items: center;
695
+ color: var(--color-muted-foreground);
696
+ display: inline-flex;
697
+ gap: var(--space-3xs);
698
+ }
699
+
700
+ .sf-chart__swatch {
701
+ aspect-ratio: 1;
702
+ background: var(--chart-accent);
703
+ border-radius: var(--radius-full);
704
+ display: inline-block;
705
+ inline-size: .75rem;
706
+ }
707
+
708
+ .sf-meter-list {
709
+ display: grid;
710
+ gap: var(--space-xs);
711
+ }
712
+
713
+ .sf-meter-row {
714
+ display: grid;
715
+ gap: var(--space-3xs);
716
+ }
717
+
718
+ .sf-meter {
719
+ accent-color: var(--chart-accent, var(--color-primary));
720
+ block-size: .625rem;
721
+ border-radius: var(--radius-full);
722
+ inline-size: 100%;
723
+ overflow: hidden;
724
+ }
725
+
497
726
  .sf-field {
498
727
  display: grid;
499
728
  gap: var(--space-2xs);
@@ -628,6 +857,11 @@
628
857
  text-decoration: none;
629
858
  }
630
859
 
860
+ .sf-push-block-end { margin-block-start: auto; }
861
+ .sf-push-block-start { margin-block-end: auto; }
862
+ .sf-push-inline-end { margin-inline-start: auto; }
863
+ .sf-push-inline-start { margin-inline-end: auto; }
864
+
631
865
  .sf-full-bleed {
632
866
  inline-size: 100vw;
633
867
  margin-inline-start: 50%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@syncedco/flow",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@11.2.2",
package/styles.css CHANGED
@@ -163,7 +163,7 @@
163
163
  --sf-icon-stroke: 2;
164
164
  }
165
165
 
166
- :where(.sf-theme-light, [data-sf-theme="light"]) {
166
+ .sf-theme-light, [data-sf-theme="light"] {
167
167
  color-scheme: light;
168
168
  --sf-colour-background: var(--sf-colour-neutral-50);
169
169
  --sf-colour-foreground: var(--sf-colour-neutral-900);
@@ -179,7 +179,7 @@
179
179
  --sf-colour-link-hover: var(--sf-colour-orange-600);
180
180
  }
181
181
 
182
- :where(.sf-theme-dark, [data-sf-theme="dark"]) {
182
+ .sf-theme-dark, [data-sf-theme="dark"] {
183
183
  color-scheme: dark;
184
184
  --sf-colour-background: var(--sf-colour-neutral-950);
185
185
  --sf-colour-foreground: oklch(96% 0.008 86);
package/tokens.css CHANGED
@@ -163,7 +163,7 @@
163
163
  --sf-icon-stroke: 2;
164
164
  }
165
165
 
166
- :where(.sf-theme-light, [data-sf-theme="light"]) {
166
+ .sf-theme-light, [data-sf-theme="light"] {
167
167
  color-scheme: light;
168
168
  --sf-colour-background: var(--sf-colour-neutral-50);
169
169
  --sf-colour-foreground: var(--sf-colour-neutral-900);
@@ -179,7 +179,7 @@
179
179
  --sf-colour-link-hover: var(--sf-colour-orange-600);
180
180
  }
181
181
 
182
- :where(.sf-theme-dark, [data-sf-theme="dark"]) {
182
+ .sf-theme-dark, [data-sf-theme="dark"] {
183
183
  color-scheme: dark;
184
184
  --sf-colour-background: var(--sf-colour-neutral-950);
185
185
  --sf-colour-foreground: oklch(96% 0.008 86);