@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/bin/synced-flow.mjs CHANGED
@@ -3569,7 +3569,7 @@ function buildThemeCss(theme) {
3569
3569
  sections.push(` :root {\n${root.join('\n')}\n }`)
3570
3570
  }
3571
3571
  if (dark.length) {
3572
- sections.push(` :where(.sf-theme-dark, [data-sf-theme="dark"]) {\n${dark.join('\n')}\n }`)
3572
+ sections.push(` .sf-theme-dark, [data-sf-theme="dark"] {\n${dark.join('\n')}\n }`)
3573
3573
  }
3574
3574
 
3575
3575
  return sections.join('\n\n')
@@ -3651,74 +3651,74 @@ ${pairs.join('\n')}
3651
3651
  --color-white: ${colours.white};
3652
3652
  --color-black: ${colours.black};
3653
3653
 
3654
- --color-background: ${colours.ink950};
3655
- --color-foreground: oklch(96% 0.01 92);
3656
- --color-card: ${colours.ink900};
3657
- --color-card-foreground: oklch(96% 0.01 92);
3658
- --color-popover: ${colours.ink900};
3659
- --color-popover-foreground: oklch(96% 0.01 92);
3660
- --color-primary: ${colours.orange600};
3661
- --color-primary-hover: oklch(64% 0.18 44);
3662
- --color-primary-label: oklch(55% 0.18 44);
3663
- --color-primary-border: oklch(66% 0.17 43);
3664
- --color-primary-foreground: oklch(98% 0.01 95);
3665
- --color-secondary: oklch(24% 0.018 22);
3666
- --color-secondary-foreground: oklch(96% 0.01 92);
3667
- --color-muted: oklch(26% 0.012 24);
3668
- --color-muted-foreground: oklch(76% 0.01 92);
3669
- --color-accent: oklch(24% 0.018 22);
3670
- --color-accent-foreground: oklch(96% 0.01 92);
3671
- --color-destructive: ${colours.red600};
3672
- --color-destructive-foreground: oklch(98% 0.01 95);
3673
- --color-border: oklch(100% 0 0 / 0.12);
3674
- --color-input: oklch(100% 0 0 / 0.12);
3675
- --color-ring: ${colours.orange600};
3676
- --color-heading: oklch(20% 0.02 18);
3677
- --color-page-text: oklch(23% 0.02 18);
3678
- --color-body: oklch(45% 0.02 28);
3679
- --color-body-dark: oklch(40% 0.02 28);
3680
- --color-subdued: oklch(42% 0.02 20);
3681
- --color-surface: ${colours.surfaceAlt};
3682
- --color-surface-alt: ${colours.paperAlt};
3654
+ --color-background: var(--sf-colour-background, ${colours.ink950});
3655
+ --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
3656
+ --color-card: var(--sf-colour-card, ${colours.ink900});
3657
+ --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
3658
+ --color-popover: var(--sf-colour-popover, ${colours.ink900});
3659
+ --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
3660
+ --color-primary: var(--sf-colour-primary, ${colours.orange600});
3661
+ --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
3662
+ --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
3663
+ --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
3664
+ --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
3665
+ --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
3666
+ --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
3667
+ --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
3668
+ --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
3669
+ --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
3670
+ --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
3671
+ --color-destructive: var(--sf-colour-destructive, ${colours.red600});
3672
+ --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
3673
+ --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
3674
+ --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
3675
+ --color-ring: var(--sf-colour-ring, ${colours.orange600});
3676
+ --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
3677
+ --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
3678
+ --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
3679
+ --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
3680
+ --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
3681
+ --color-surface: var(--sf-colour-surface, ${colours.surfaceAlt});
3682
+ --color-surface-alt: var(--sf-colour-surface-alt, ${colours.paperAlt});
3683
3683
  --color-hero-bg: oklch(8% 0.02 260);
3684
- --color-green: ${colours.green600};
3685
- --color-green-dark: ${colours.green700};
3686
- --color-green-muted: oklch(40% 0.12 148);
3687
- --color-green-light: ${colours.green100};
3688
- --color-green-lighter: oklch(92% 0.04 148);
3689
- --color-green-bg: oklch(88% 0.07 148);
3690
- --color-green-bg-alt: oklch(82% 0.1 148);
3691
- --color-green-vivid: oklch(78% 0.08 148);
3692
- --color-green-mid: oklch(75% 0.12 148);
3693
- --color-green-deep: oklch(70% 0.14 150);
3694
- --color-green-deepest: oklch(60% 0.14 150);
3695
- --color-green-wash: oklch(93% 0.06 148);
3696
- --color-green-wash-alt: oklch(88% 0.08 148);
3697
- --color-green-gradient-from: oklch(82% 0.1 148);
3698
- --color-green-gradient-to: oklch(86% 0.06 148);
3699
- --color-deco-lime: oklch(80% 0.18 130);
3700
- --color-deco-blue: oklch(60% 0.12 240);
3701
- --color-deco-warm: oklch(80% 0.06 60);
3702
- --color-deco-warm-light: oklch(92% 0.02 80);
3703
- --color-deco-warm-mid: oklch(80% 0.15 60);
3704
- --color-purple-light: oklch(95% 0.05 280);
3705
- --color-purple-mid: oklch(92% 0.05 280);
3706
- --color-purple-dark: oklch(90% 0.06 280);
3707
- --color-purple-darker: oklch(87% 0.07 280);
3708
- --color-purple-icon: ${colours.purple600};
3709
- --color-warm-light: oklch(95.6% 0.05 22);
3710
- --color-warm-mid: oklch(95% 0.04 40);
3711
- --color-warm-grad-to: oklch(90% 0.08 30);
3712
- --color-warm-grad-to-alt: oklch(90% 0.06 30);
3713
- --color-warm-icon: oklch(60% 0.17 44);
3714
- --color-cool-light: oklch(92% 0.04 200);
3715
- --color-cool-dark: oklch(87% 0.06 200);
3716
- --color-primary-glow: oklch(80% 0.12 44);
3717
- --color-primary-soft: oklch(69% 0.18 44 / 0.10);
3718
- --color-primary-soft-border: oklch(69% 0.18 44 / 0.30);
3719
- --color-primary-soft-border-light: oklch(69% 0.18 44 / 0.25);
3720
- --color-primary-soft-text: oklch(85% 0.08 44);
3721
- --color-primary-highlight: oklch(75% 0.14 44);
3684
+ --color-green: var(--sf-colour-green, ${colours.green600});
3685
+ --color-green-dark: var(--sf-colour-green-dark, ${colours.green700});
3686
+ --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
3687
+ --color-green-light: var(--sf-colour-green-light, ${colours.green100});
3688
+ --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
3689
+ --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
3690
+ --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
3691
+ --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
3692
+ --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
3693
+ --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
3694
+ --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
3695
+ --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
3696
+ --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
3697
+ --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
3698
+ --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
3699
+ --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
3700
+ --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
3701
+ --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
3702
+ --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
3703
+ --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
3704
+ --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
3705
+ --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
3706
+ --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
3707
+ --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
3708
+ --color-purple-icon: var(--sf-colour-purple-icon, ${colours.purple600});
3709
+ --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
3710
+ --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
3711
+ --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
3712
+ --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
3713
+ --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
3714
+ --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
3715
+ --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
3716
+ --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
3717
+ --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
3718
+ --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
3719
+ --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
3720
+ --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
3721
+ --color-primary-highlight: var(--sf-colour-primary-highlight, oklch(75% 0.14 44));
3722
3722
 
3723
3723
  --shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.06);
3724
3724
  --shadow-md: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.08);
package/docs/api-contract.md CHANGED
@@ -53,6 +53,10 @@ layers for reset, base, layout, components, and utilities, but foundational
53
53
  theme variables need the normal cascade so values from `synced-flow.config.mjs`
54
54
  are not weaker than unlayered project CSS.
55
55
 
56
+ Theme selectors such as `.sf-theme-dark` and `[data-sf-theme="dark"]` are
57
+ emitted with normal class/attribute specificity, not inside `:where()`, so they
58
+ can override the default `:root` token values.
59
+
56
60
  Put reusable brand decisions in `theme.colours`, `theme.darkColours`,
57
61
  `theme.radii`, `theme.layout`, and `theme.components`. Theme switcher CSS should
58
62
  only style the toggle/control UI; it should not redefine `--sf-*` colour tokens.
package/docs/tokens.md CHANGED
@@ -33,6 +33,10 @@ source of truth for brand colours, radius, layout, and component decisions.
33
33
  Use `theme.darkColours` for dark-mode values instead of maintaining a separate
34
34
  CSS file that redefines `--sf-*` variables.
35
35
 
36
+ Theme overrides use `.sf-theme-dark`, `[data-sf-theme="dark"]`,
37
+ `.sf-theme-light`, and `[data-sf-theme="light"]` selectors directly so they have
38
+ enough specificity to override default `:root` values.
39
+
36
40
  Use semantic utilities in projects:
37
41
 
38
42
  ```html
package/examples/astro/src/styles/synced-flow.generated.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);
@@ -198,7 +197,6 @@
198
197
  --sf-card-padding: var(--sf-space-l);
199
198
  --sf-input-radius: 0.375rem;
200
199
  }
201
- }
202
200
 
203
201
  @layer utilities {
204
202
 
package/examples/next/app/synced-flow.generated.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 utilities {
203
201