@syncedco/flow 0.3.1 → 0.4.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 (39) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/CONTRIBUTING.md +18 -5
  3. package/README.md +32 -9
  4. package/base.css +2 -1
  5. package/bin/synced-flow.mjs +446 -58
  6. package/components.css +440 -9
  7. package/dist/index.d.ts +69 -0
  8. package/dist/index.js +69 -0
  9. package/docs/accessibility-css.md +14 -3
  10. package/docs/ai-usage.md +22 -1
  11. package/docs/api-contract.md +10 -2
  12. package/docs/audit-2026-06.md +13 -12
  13. package/docs/base-styling.md +5 -0
  14. package/docs/cli-reference.md +9 -6
  15. package/docs/config-reference.md +2 -2
  16. package/docs/css-optimisation.md +10 -10
  17. package/docs/native-components.md +121 -0
  18. package/docs/patterns.md +18 -0
  19. package/docs/quick-start.md +6 -4
  20. package/docs/recipes.md +12 -0
  21. package/docs/release-readiness.md +32 -7
  22. package/docs/system-primitives.md +10 -3
  23. package/docs/tokens.md +10 -2
  24. package/examples/README.md +2 -2
  25. package/examples/astro/src/styles/synced-flow.generated.css +14 -0
  26. package/examples/next/app/synced-flow.generated.css +19 -5
  27. package/examples/plain-html/synced-flow.generated.css +19 -5
  28. package/examples/templates/README.md +2 -0
  29. package/examples/templates/app-settings-workflow.html +81 -0
  30. package/examples/vite/src/synced-flow.generated.css +19 -5
  31. package/examples/wordpress/assets/css/synced-flow.css +542 -9
  32. package/package.json +14 -3
  33. package/reset.css +1 -1
  34. package/skills/synced-flow/SKILL.md +20 -3
  35. package/src/index.ts +69 -0
  36. package/src/presets.mjs +5 -5
  37. package/src/tokens.mjs +10 -8
  38. package/styles.css +456 -21
  39. package/tokens.css +13 -10
package/tokens.css CHANGED
@@ -21,6 +21,7 @@
21
21
  --sf-type-caption-sm: var(--sf-step--2);
22
22
  --sf-type-caption: var(--sf-step--1);
23
23
  --sf-type-body: var(--sf-step-0);
24
+ --sf-text-base: var(--sf-type-body);
24
25
  --sf-type-lead: var(--sf-step-1);
25
26
  --sf-type-h6: var(--sf-step-1);
26
27
  --sf-type-h5: var(--sf-step-2);
@@ -93,6 +94,8 @@
93
94
  --sf-colour-orange-500: oklch(74% 0.17 48);
94
95
  --sf-colour-orange-600: oklch(68% 0.18 44);
95
96
  --sf-colour-orange-700: oklch(58% 0.17 42);
97
+ --sf-colour-orange-800: oklch(50% 0.16 40);
98
+ --sf-colour-orange-900: oklch(44% 0.14 40);
96
99
  --sf-colour-green-500: oklch(62% 0.13 150);
97
100
  --sf-colour-green-600: oklch(54% 0.13 150);
98
101
  --sf-colour-green-700: oklch(44% 0.12 150);
@@ -115,13 +118,13 @@
115
118
  --sf-colour-border: oklch(18% 0.026 250 / 0.12);
116
119
  --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
117
120
  --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
118
- --sf-colour-primary: var(--sf-colour-orange-600);
119
- --sf-colour-primary-hover: var(--sf-colour-orange-700);
121
+ --sf-colour-primary: var(--sf-colour-orange-800);
122
+ --sf-colour-primary-hover: var(--sf-colour-orange-900);
120
123
  --sf-colour-primary-foreground: var(--sf-colour-neutral-0);
121
- --sf-colour-primary-soft: oklch(68% 0.18 44 / 0.12);
122
- --sf-colour-primary-soft-border: oklch(68% 0.18 44 / 0.28);
123
- --sf-colour-link: var(--sf-colour-orange-700);
124
- --sf-colour-link-hover: var(--sf-colour-orange-600);
124
+ --sf-colour-primary-soft: oklch(50% 0.16 40 / 0.12);
125
+ --sf-colour-primary-soft-border: oklch(50% 0.16 40 / 0.28);
126
+ --sf-colour-link: var(--sf-colour-orange-800);
127
+ --sf-colour-link-hover: var(--sf-colour-orange-900);
125
128
  --sf-colour-accent: var(--sf-colour-cyan-500);
126
129
  --sf-colour-accent-foreground: var(--sf-colour-neutral-950);
127
130
  --sf-colour-success: var(--sf-colour-green-500);
@@ -130,7 +133,7 @@
130
133
  --sf-colour-warning: var(--sf-colour-amber-500);
131
134
  --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
132
135
  --sf-colour-warning-soft: oklch(78% 0.15 82 / 0.16);
133
- --sf-colour-danger: var(--sf-colour-red-600);
136
+ --sf-colour-danger: var(--sf-colour-red-700);
134
137
  --sf-colour-danger-foreground: var(--sf-colour-neutral-0);
135
138
  --sf-colour-danger-soft: oklch(56% 0.2 28 / 0.12);
136
139
  --sf-colour-info: var(--sf-colour-cyan-600);
@@ -142,7 +145,7 @@
142
145
  --sf-colour-categorical-4: var(--sf-colour-orange-600);
143
146
  --sf-colour-categorical-5: var(--sf-colour-red-600);
144
147
  --sf-colour-categorical-6: oklch(58% 0.15 292);
145
- --sf-colour-ring: var(--sf-colour-orange-600);
148
+ --sf-colour-ring: var(--sf-colour-orange-800);
146
149
 
147
150
  --sf-shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.08);
148
151
  --sf-shadow-md: 0 0.75rem 1.75rem oklch(0% 0 0 / 0.12);
@@ -197,8 +200,8 @@
197
200
  --sf-colour-border: oklch(18% 0.026 250 / 0.12);
198
201
  --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
199
202
  --sf-colour-backdrop: oklch(0% 0 0 / 0.48);
200
- --sf-colour-link: var(--sf-colour-orange-700);
201
- --sf-colour-link-hover: var(--sf-colour-orange-600);
203
+ --sf-colour-link: var(--sf-colour-orange-800);
204
+ --sf-colour-link-hover: var(--sf-colour-orange-900);
202
205
  }
203
206
 
204
207
  .sf-theme-dark, [data-sf-theme="dark"] {