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