@stratixlabs/core 1.8.0 → 1.8.2

package/README.md

@@ -131,14 +131,22 @@ Import the full system or valid subsets from the package:
 ```
 
 ### 2. Tailwind CSS
-Stratix feeds Tailwind. It does not replace it.
+Stratix alimenta o Tailwind v4 via `@theme`. Não substitui o Tailwind.
 ```css
-@import "@stratixlabs/core/stratix.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "@stratixlabs/core/stratix.css";
+@import "tailwindcss";
+
+@theme {
+  --color-brand-300: var(--brand-300);
+  --color-brand-500: var(--brand-500);
+  --color-brand-700: var(--brand-700);
+  --color-surface: var(--color-surface);
+  --color-text: var(--color-text-primary);
+  --spacing-4: var(--space-4);
+  --radius-md: var(--radius-md);
+}
 ```
-*See the Next.js + Tailwind Quickstart for a full app example, and [Consumption Strategies](./docs/consumption.html) for `tailwind.config.js` mapping.*
+*Veja o Quickstart Next.js + Tailwind para um exemplo completo e **Consumption** para o arquivo de referência `src/consumption/tailwind-v4.css`.*
 
 ### 3. JavaScript / TypeScript
 Import tokens as a JSON object:

package/bin/stratix.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const fs = require('fs');
 const path = require('path');
@@ -345,60 +345,31 @@ export const Button = styled.button\`
   }
 \`;
 `,
-        'tailwind.config.js': `/* 
-  Tailwind CSS Consumption Example
-  Map Stratix tokens to Tailwind's theme configuration.
-*/
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{html,js}"],
-  theme: {
-    extend: {
-      colors: {
-        brand: {
-          300: "var(--brand-300)",
-          500: "var(--brand-500)",
-          700: "var(--brand-700)",
-        },
-        neutral: {
-          0: "var(--neutral-0)",
-          50: "var(--neutral-50)",
-          100: "var(--neutral-100)",
-          200: "var(--neutral-200)",
-          300: "var(--neutral-300)",
-          400: "var(--neutral-400)",
-          500: "var(--neutral-500)",
-          600: "var(--neutral-600)",
-          700: "var(--neutral-700)",
-          800: "var(--neutral-800)",
-          900: "var(--neutral-900)",
-        },
-        surface: "var(--color-surface)",
-        text: "var(--color-text-primary)",
-      },
-      spacing: {
-        1: "var(--space-1)",
-        2: "var(--space-2)",
-        3: "var(--space-3)",
-        4: "var(--space-4)",
-        5: "var(--space-5)",
-        6: "var(--space-6)",
-      },
-      borderRadius: {
-        sm: "var(--radius-sm)",
-        md: "var(--radius-md)",
-        lg: "var(--radius-lg)",
-      },
-      fontFamily: {
-        body: "var(--font-family-base)",
-        heading: "var(--font-family-heading)",
-      },
-    },
-  },
-  plugins: [],
-};
-`
+        'tailwind-v4.css': `/* 
+  Tailwind CSS v4 Consumption Example
+  Map Stratix tokens to Tailwind via @theme.
+*/
+
+@import "@stratixlabs/core/stratix.css";
+@import "tailwindcss";
+
+@theme {
+  --color-brand-300: var(--brand-300);
+  --color-brand-500: var(--brand-500);
+  --color-brand-700: var(--brand-700);
+  --color-surface: var(--color-surface);
+  --color-text: var(--color-text-primary);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --font-family-body: var(--font-family-base);
+  --font-family-heading: var(--font-family-heading);
+}
+`
     };
 
     console.log('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stratixlabs/core",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "...",
   "bin": {
     "stratix": "bin/stratix.js"
@@ -40,6 +40,7 @@
     "bin",
     "scripts",
     "src",
+    "stratix.css",
     "index.js",
     "tokens.json",
     "stratix.d.ts",

package/src/consumption/tailwind-v4.css

@@ -0,0 +1,21 @@
+@import "@stratixlabs/core/stratix.css";
+@import "tailwindcss";
+
+@theme {
+  --color-brand-300: var(--brand-300);
+  --color-brand-500: var(--brand-500);
+  --color-brand-700: var(--brand-700);
+
+  --color-surface: var(--color-surface);
+  --color-text: var(--color-text-primary);
+  --color-border: var(--color-border);
+
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+}

package/stratix.css

@@ -0,0 +1 @@
+@import "./src/stratix.css";

package/src/consumption/tailwind.config.js

@@ -1,44 +0,0 @@
-/* 
-  Tailwind CSS Consumption
-  Maps Stratix tokens to Tailwind theme configuration.
-*/
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{html,js}"],
-  theme: {
-    extend: {
-      colors: {
-        brand: {
-          300: "var(--brand-300)",
-          500: "var(--brand-500)",
-          700: "var(--brand-700)",
-        },
-        neutral: {
-          0: "var(--neutral-0)",
-          900: "var(--neutral-900)",
-        },
-        surface: "var(--color-surface)",
-        text: "var(--color-text-primary)",
-      },
-      spacing: {
-        1: "var(--space-1)",
-        2: "var(--space-2)",
-        3: "var(--space-3)",
-        4: "var(--space-4)",
-        5: "var(--space-5)",
-        6: "var(--space-6)",
-      },
-      borderRadius: {
-        sm: "var(--radius-sm)",
-        md: "var(--radius-md)",
-        lg: "var(--radius-lg)",
-      },
-      fontFamily: {
-        body: "var(--font-family-base)",
-        heading: "var(--font-family-heading)",
-      },
-    },
-  },
-  plugins: [],
-};