@omkarux/vela 0.7.1 → 0.8.0

package/flutter/pubspec.yaml

@@ -0,0 +1,11 @@
+# GENERATED by scripts/build-tokens-dart.mjs — do not edit. The version tracks @omkarux/vela.
+name: vela_tokens
+description: Vela design tokens for Flutter, generated from tokens/vela.tokens.json — the same source as the CSS and the Figma library.
+version: 0.8.0
+publish_to: none
+environment:
+  sdk: ^3.4.0
+  flutter: ">=3.22.0"
+dependencies:
+  flutter:
+    sdk: flutter

package/guidelines/llms.txt

@@ -7,7 +7,9 @@
 > THESE SPECS ARE FRAMEWORK-AGNOSTIC. The published package is a React implementation of them, and
 > the code samples below are React — but the tokens, the closed prop sets, the taxonomies and the
 > accessibility rules hold for any implementation. If you are generating for Angular, Vue or
-> Svelte, follow every rule here and translate only the syntax.
+> Svelte, follow every rule here and translate only the syntax. For Flutter, the same tokens ship as
+> `tokens.dart` (`VelaColors`, `VelaSizing`, `VelaTypography`, `velaThemeData`) — bind `VelaColors`
+> semantics, never `VelaPrimitives`.
 
 Read `overview.md` first: it maps a user need to a component and lists the choices agents
 most often get wrong. Then read the per-component file before generating any markup.
@@ -22,7 +24,7 @@ most often get wrong. Then read the per-component file before generating any mar
 ## Figma
 
 A matching Figma library exists: **Vela Design System**. It is *compiled from this contract*, not
-the source of it — 223 variables and 6 component sets mirroring the token architecture 1:1, with
+the source of it — 234 variables and 6 component sets mirroring the token architecture 1:1, with
 every variable carrying its `var(--vela-*)` name for Dev Mode. Each component's per-file
 `## Figma mapping` section states which Figma property corresponds to which prop, and which
 behaviour has no Figma expression at all.

package/guidelines/setup.md

@@ -76,3 +76,34 @@ the spacing and sizing scales and the type ramp — with no React in the depende
 components against your own framework's idioms and hold them to `guidelines/`, which is written to
 be implementation-independent. On Angular, the closed prop sets become union input types with
 `strictTemplates` enabled; that buys most of what the discriminated unions buy in React.
+
+### Flutter
+
+The tokens also ship as Dart, generated from the same JSON as the CSS and the Figma library. It lives
+at `flutter/` inside the npm package (and is exported as `@omkarux/vela/tokens.dart`). Add it as a
+path dependency or vendor the single file `flutter/lib/vela_tokens.dart`:
+
+```yaml
+dependencies:
+  vela_tokens:
+    path: ../vela/flutter
+```
+
+```dart
+import 'package:vela_tokens/vela_tokens.dart';
+
+MaterialApp(
+  theme: velaThemeData(Brightness.light),
+  darkTheme: velaThemeData(Brightness.dark),
+);
+
+// In a widget — bind semantics, never VelaPrimitives:
+final colors = Theme.of(context).extension<VelaColors>()!;
+Container(color: colors.bgContainer, padding: const EdgeInsets.all(VelaSizing.space20));
+Text('Healthy', style: VelaTypography.meta.copyWith(color: colors.signalStatusHealthy));
+```
+
+Same rule as the CSS: bind semantics (`VelaColors`), never `VelaPrimitives`. `VelaSizing` values are
+logical pixels, 1:1 with the CSS px values; each `VelaTypography` style carries its line-height as
+Flutter's `height` ratio. Widgets are not generated — build them against `guidelines/` like any other
+stack, and hold them to the same specs.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omkarux/vela",
-  "version": "0.7.1",
-  "description": "A token-first design system: framework-agnostic tokens and component specs with a React implementation. Two-layer color architecture, separate severity and risk taxonomies, light and dark theming, WCAG AA asserted in CI, zero runtime dependencies.",
+  "version": "0.8.0",
+  "description": "A token-first design system: framework-agnostic tokens and component specs with a React implementation. Tokens compile to CSS, a Figma library and a Flutter theme from one source. Two-layer color architecture, separate severity and risk taxonomies, light and dark theming, WCAG AA asserted in CI, zero runtime dependencies.",
   "type": "module",
   "license": "MIT",
   "author": "Omkar Khadamkar",
@@ -27,7 +27,8 @@
     "./tokens.css": "./dist/tokens.css",
     "./guidelines/*": "./guidelines/*",
     "./package.json": "./package.json",
-    "./tokens.json": "./tokens/vela.tokens.json"
+    "./tokens.json": "./tokens/vela.tokens.json",
+    "./tokens.dart": "./flutter/lib/vela_tokens.dart"
   },
   "files": [
     "dist",
@@ -35,17 +36,19 @@
     "README.md",
     "CHANGELOG.md",
     "LICENSE",
-    "tokens"
+    "tokens",
+    "flutter"
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "tokens": "node scripts/build-tokens.mjs",
+    "tokens": "node scripts/build-tokens.mjs && node scripts/build-tokens-dart.mjs",
+    "tokens:dart": "node scripts/build-tokens-dart.mjs",
     "tokens:figma": "node scripts/sync-figma.mjs",
     "tokens:figma:read": "node scripts/figma-drift.mjs --read",
     "tokens:figma:check": "node scripts/figma-drift.mjs",
     "guidelines:figma": "node scripts/sync-figma-descriptions.mjs",
     "figma:build": "node scripts/figma/build-components.mjs",
-    "tokens:check": "node scripts/build-tokens.mjs && git diff --exit-code -- src/styles/tokens.light.css src/styles/tokens.dark.body.css",
+    "tokens:check": "npm run tokens && git diff --exit-code -- src/styles/tokens.light.css src/styles/tokens.dark.body.css flutter/lib/vela_tokens.dart flutter/pubspec.yaml",
     "build": "npm run clean && npm run tokens && npm run build:js && npm run build:css",
     "build:js": "vite build",
     "build:css": "node scripts/build-css.mjs",
@@ -85,7 +88,10 @@
     "design-tokens",
     "react",
     "component-library",
-    "accessibility"
+    "accessibility",
+    "flutter",
+    "dart",
+    "web-components"
   ],
   "engines": {
     "node": ">=18"