@syncedco/flow 0.1.2 → 0.1.4

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 (17) hide show
  1. package/bin/synced-flow.mjs +111 -68
  2. package/docs/api-contract.md +4 -0
  3. package/docs/cli-reference.md +5 -0
  4. package/docs/tokens.md +4 -0
  5. package/docs/wordpress.md +33 -0
  6. package/examples/astro/src/styles/synced-flow.generated.css +70 -72
  7. package/examples/next/app/synced-flow.generated.css +70 -72
  8. package/examples/plain-html/synced-flow.generated.css +70 -72
  9. package/examples/vite/src/synced-flow.generated.css +70 -72
  10. package/examples/wordpress/assets/css/synced-flow.css +309 -73
  11. package/examples/wordpress/parts/footer.html +2 -2
  12. package/examples/wordpress/parts/header.html +2 -2
  13. package/examples/wordpress/theme.json +53 -0
  14. package/package.json +1 -1
  15. package/src/presets.mjs +4 -0
  16. package/styles.css +2 -2
  17. package/tokens.css +2 -2
package/examples/plain-html/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
 
package/examples/vite/src/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