@syncedco/flow 0.2.0 → 0.3.1

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 (18) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +2 -1
  3. package/bin/synced-flow.mjs +362 -3
  4. package/components.css +190 -2
  5. package/docs/api-contract.md +3 -3
  6. package/docs/audit-2026-06.md +113 -0
  7. package/docs/config-reference.md +27 -0
  8. package/docs/patterns.md +7 -0
  9. package/docs/system-primitives.md +8 -5
  10. package/docs/tokens.md +7 -1
  11. package/docs/why-synced-flow.md +1 -1
  12. package/layout.css +91 -1
  13. package/package.json +3 -2
  14. package/skills/synced-flow/SKILL.md +23 -6
  15. package/src/tokens.mjs +10 -0
  16. package/styles.css +328 -4
  17. package/tokens.css +45 -0
  18. package/utilities.css +2 -1
package/tokens.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --sf-step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
19
19
  --sf-step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
20
20
  --sf-step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
21
+ --sf-type-caption-sm: var(--sf-step--2);
21
22
  --sf-type-caption: var(--sf-step--1);
22
23
  --sf-type-body: var(--sf-step-0);
23
24
  --sf-type-lead: var(--sf-step-1);
@@ -107,9 +108,13 @@
107
108
  --sf-colour-surface: var(--sf-colour-neutral-0);
108
109
  --sf-colour-surface-alt: var(--sf-colour-neutral-100);
109
110
  --sf-colour-surface-raised: var(--sf-colour-neutral-0);
111
+ --sf-colour-surface-raised-2: var(--sf-colour-neutral-50);
112
+ --sf-colour-surface-hover: var(--sf-colour-neutral-100);
110
113
  --sf-colour-surface-inset: var(--sf-colour-neutral-100);
114
+ --sf-colour-border-subtle: oklch(18% 0.026 250 / 0.08);
111
115
  --sf-colour-border: oklch(18% 0.026 250 / 0.12);
112
116
  --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
117
+ --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
113
118
  --sf-colour-primary: var(--sf-colour-orange-600);
114
119
  --sf-colour-primary-hover: var(--sf-colour-orange-700);
115
120
  --sf-colour-primary-foreground: var(--sf-colour-neutral-0);
@@ -131,6 +136,12 @@
131
136
  --sf-colour-info: var(--sf-colour-cyan-600);
132
137
  --sf-colour-info-foreground: var(--sf-colour-neutral-0);
133
138
  --sf-colour-info-soft: oklch(70% 0.12 205 / 0.14);
139
+ --sf-colour-categorical-1: var(--sf-colour-cyan-600);
140
+ --sf-colour-categorical-2: var(--sf-colour-green-600);
141
+ --sf-colour-categorical-3: var(--sf-colour-amber-500);
142
+ --sf-colour-categorical-4: var(--sf-colour-orange-600);
143
+ --sf-colour-categorical-5: var(--sf-colour-red-600);
144
+ --sf-colour-categorical-6: oklch(58% 0.15 292);
134
145
  --sf-colour-ring: var(--sf-colour-orange-600);
135
146
 
136
147
  --sf-shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.08);
@@ -139,6 +150,13 @@
139
150
  --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
140
151
  --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
141
152
  --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
153
+ --sf-z-sticky: 20;
154
+ --sf-z-header: 20;
155
+ --sf-z-backdrop: 25;
156
+ --sf-z-drawer: 30;
157
+ --sf-z-overlay: 40;
158
+ --sf-z-toast: 50;
159
+ --sf-z-skip-link: 999;
142
160
  --sf-duration-fast: 150ms;
143
161
  --sf-duration-normal: 220ms;
144
162
  --sf-duration-slow: 360ms;
@@ -172,9 +190,13 @@
172
190
  --sf-colour-surface: var(--sf-colour-neutral-0);
173
191
  --sf-colour-surface-alt: var(--sf-colour-neutral-100);
174
192
  --sf-colour-surface-raised: var(--sf-colour-neutral-0);
193
+ --sf-colour-surface-raised-2: var(--sf-colour-neutral-50);
194
+ --sf-colour-surface-hover: var(--sf-colour-neutral-100);
175
195
  --sf-colour-surface-inset: var(--sf-colour-neutral-100);
196
+ --sf-colour-border-subtle: oklch(18% 0.026 250 / 0.08);
176
197
  --sf-colour-border: oklch(18% 0.026 250 / 0.12);
177
198
  --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
199
+ --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
178
200
  --sf-colour-link: var(--sf-colour-orange-700);
179
201
  --sf-colour-link-hover: var(--sf-colour-orange-600);
180
202
  }
@@ -188,9 +210,32 @@
188
210
  --sf-colour-surface: var(--sf-colour-neutral-900);
189
211
  --sf-colour-surface-alt: var(--sf-colour-neutral-850);
190
212
  --sf-colour-surface-raised: var(--sf-colour-neutral-850);
213
+ --sf-colour-surface-raised-2: var(--sf-colour-neutral-800);
214
+ --sf-colour-surface-hover: color-mix(in oklch, var(--sf-colour-neutral-850) 76%, white);
191
215
  --sf-colour-surface-inset: var(--sf-colour-neutral-950);
216
+ --sf-colour-border-subtle: oklch(100% 0 0 / 0.08);
192
217
  --sf-colour-border: oklch(100% 0 0 / 0.14);
193
218
  --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
219
+ --sf-colour-backdrop: oklch(0% 0 0 / 0.64);
220
+ --sf-colour-primary: var(--sf-colour-orange-500);
221
+ --sf-colour-primary-hover: oklch(80% 0.14 50);
222
+ --sf-colour-primary-foreground: var(--sf-colour-neutral-950);
223
+ --sf-colour-primary-soft: oklch(74% 0.17 48 / 0.18);
224
+ --sf-colour-primary-soft-border: oklch(74% 0.17 48 / 0.34);
194
225
  --sf-colour-link: var(--sf-colour-orange-500);
195
226
  --sf-colour-link-hover: oklch(80% 0.14 50);
227
+ --sf-colour-success: oklch(72% 0.13 150);
228
+ --sf-colour-success-foreground: var(--sf-colour-neutral-950);
229
+ --sf-colour-success-soft: oklch(72% 0.13 150 / 0.16);
230
+ --sf-colour-warning: oklch(84% 0.15 82);
231
+ --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
232
+ --sf-colour-warning-soft: oklch(84% 0.15 82 / 0.18);
233
+ --sf-colour-danger: oklch(70% 0.18 28);
234
+ --sf-colour-danger-foreground: var(--sf-colour-neutral-950);
235
+ --sf-colour-danger-soft: oklch(70% 0.18 28 / 0.16);
236
+ --sf-colour-info: oklch(76% 0.12 205);
237
+ --sf-colour-info-foreground: var(--sf-colour-neutral-950);
238
+ --sf-colour-info-soft: oklch(76% 0.12 205 / 0.16);
239
+ --sf-colour-ring: var(--sf-colour-orange-500);
240
+ --sf-shadow-glow: 0 0 2rem oklch(74% 0.17 48 / 0.18);
196
241
  }
package/utilities.css CHANGED
@@ -84,6 +84,7 @@
84
84
  .sf-table-wrap {
85
85
  border: 1px solid var(--sf-colour-border);
86
86
  border-radius: var(--sf-radius-panel);
87
+ container-type: inline-size;
87
88
  overflow-x: auto;
88
89
  }
89
90
 
@@ -144,7 +145,7 @@
144
145
  text-decoration: none;
145
146
  transform: translateY(calc(-100% - var(--sf-space-m)));
146
147
  transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
147
- z-index: 999;
148
+ z-index: var(--sf-z-skip-link);
148
149
  }
149
150
 
150
151
  .sf-skip-link:focus-visible {