@stratixlabs/core 1.7.1

package/bin/substrata.js

@@ -0,0 +1,521 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command || (command !== 'init' && command !== 'generate' && command !== 'figma')) {
+    console.log('Usage: @stratixlabs/core <command>');
+    console.log('Commands:');
+    console.log('  init      Initialize a complete Substrata project with tokens, scripts, and examples');
+    console.log('  generate  Generate tokens.json from source');
+    console.log('  figma     Figma-related automation (sync, apply-preview)');
+    process.exit(1);
+}
+
+if (command === 'init') {
+    console.log('🚀 Initializing Substrata...\n');
+
+    const cwd = process.cwd();
+    const configPath = path.join(cwd, 'substrata.config.js');
+    const tokensDir = path.join(cwd, 'src/tokens');
+    const consumptionDir = path.join(cwd, 'src/consumption');
+    const scriptsDir = path.join(cwd, 'scripts');
+    const srcDir = path.join(cwd, 'src');
+
+    // 1. Create config file
+    if (fs.existsSync(configPath)) {
+        console.log('⚠️  substrata.config.js already exists.');
+    } else {
+        const defaultConfig = `module.exports = {
+  tokens: './src/tokens',
+  output: './tokens.json'
+};
+`;
+        fs.writeFileSync(configPath, defaultConfig);
+        console.log('✅ Created substrata.config.js');
+    }
+
+    // 2. Create directory structure
+    if (!fs.existsSync(tokensDir)) {
+        fs.mkdirSync(tokensDir, { recursive: true });
+        console.log('✅ Created src/tokens/ directory');
+    }
+    if (!fs.existsSync(consumptionDir)) {
+        fs.mkdirSync(consumptionDir, { recursive: true });
+        console.log('✅ Created src/consumption/ directory');
+    }
+    if (!fs.existsSync(scriptsDir)) {
+        fs.mkdirSync(scriptsDir, { recursive: true });
+        console.log('✅ Created scripts/ directory');
+    }
+
+    // 3. Create all token files
+    const tokens = {
+        'colors.css': `:root {
+
+  /* ============================== 
+    Colors 
+   ============================== */
+
+  /* Neutrals */
+  --neutral-0: #ffffff;
+  --neutral-50: #f8fafc;
+  --neutral-100: #f1f5f9;
+  --neutral-200: #e2e8f0;
+  --neutral-300: #cbd5e1;
+  --neutral-400: #94a3b8;
+  --neutral-500: #64748b;
+  --neutral-600: #475569;
+  --neutral-700: #334155;
+  --neutral-800: #1e293b;
+  --neutral-900: #0f172a;
+
+  /* Brand */
+  --brand-300: #93c5fd;
+  --brand-500: #3b82f6;
+  --brand-700: #1d4ed8;
+
+  /* Feedback */
+  --color-success: #22c55e;
+  --color-warning: #eab308;
+  --color-danger: #ef4444;
+}
+`,
+        'spacing.css': `:root {
+
+  /* ==============================
+    Spacing
+  ============================== */
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+
+}
+`,
+        'typography.css': `:root {
+  /* ==============================
+    Typography
+  ============================== */
+
+  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+}
+`,
+        'radius-and-borders.css': `:root {
+
+  /* ==============================
+    Radius & Borders
+  ============================== */
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  --border-width: 1px;
+  --border-color: var(--neutral-200);
+
+}
+`,
+        'elevation.css': `:root {
+
+  /* ============================== 
+    Shadows
+   ============================== */
+
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+`,
+        'motion.css': `:root {
+
+  /* ============================== 
+    Motion
+  ============================== */
+
+  --motion-fast: 200ms;
+  --motion-normal: 300ms;
+  --motion-slow: 400ms;
+
+}
+`,
+        'opacity.css': `:root {
+
+  /* ============================== 
+    Opacity
+  ============================== */
+
+  --opacity-0: 0;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+  --opacity-100: 1;
+
+}
+`,
+        'breakpoints.css': `:root {
+
+  /* ============================== 
+    Breakpoints
+  ============================== */
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+}
+`,
+        'semantic-aliases.css': `:root {
+
+  /* ============================== 
+    Semantic Aliases
+  ============================== */
+
+  --color-bg: var(--neutral-50);
+  --color-surface: var(--neutral-50);
+  --color-text-primary: var(--neutral-900);
+  --color-text-secondary: var(--neutral-700);
+  --color-border: var(--neutral-200);
+
+  --color-brand-primary: var(--brand-500);
+  --color-brand-hover: var(--brand-700);
+  --color-text-inverse: var(--neutral-0);
+
+}
+`
+    };
+
+    console.log('');
+    for (const [file, content] of Object.entries(tokens)) {
+        const filePath = path.join(tokensDir, file);
+        if (!fs.existsSync(filePath)) {
+            fs.writeFileSync(filePath, content);
+            console.log(`✅ Created src/tokens/${file}`);
+        }
+    }
+
+    // 4. Create substrata.css (imports all tokens)
+    const substrataCssPath = path.join(srcDir, 'substrata.css');
+    const substrataCss = `@import "tokens/typography.css";
+@import "tokens/spacing.css";
+@import "tokens/colors.css";
+@import "tokens/radius-and-borders.css";
+@import "tokens/elevation.css";
+@import "tokens/motion.css";
+@import "tokens/opacity.css";
+@import "tokens/breakpoints.css";
+@import "tokens/semantic-aliases.css";
+
+@import "./base.css";
+`;
+    if (!fs.existsSync(substrataCssPath)) {
+        if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
+        fs.writeFileSync(substrataCssPath, substrataCss);
+        console.log('\n✅ Created src/substrata.css');
+    }
+
+    // 5. Create base.css
+    const baseCssPath = path.join(srcDir, 'base.css');
+    const baseCss = `body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  color: var(--neutral-900);
+  background-color: var(--neutral-0);
+}
+
+/* ==============================
+   Typography
+============================== */
+
+h1 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  margin-bottom: var(--space-3);
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-normal);
+  margin-bottom: var(--space-3);
+  margin-top: 40px;
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-3);
+  margin-top: 40px;
+}
+
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-3);
+}
+`;
+    if (!fs.existsSync(baseCssPath)) {
+        fs.writeFileSync(baseCssPath, baseCss);
+        console.log('✅ Created src/base.css');
+    }
+
+    // 6. Create consumption examples
+    const consumptionExamples = {
+        'plain.css': `/* 
+  Plain CSS Consumption Example
+  Import Substrata tokens and use them directly in your styles.
+*/
+
+@import "@stratixlabs/core/substrata.css";
+
+.card {
+  background: var(--color-surface);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
+}
+
+.button {
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-medium);
+  transition: background var(--motion-normal);
+}
+
+.button:hover {
+  background: var(--color-brand-hover);
+}
+`,
+        'styled-components.js': `/* 
+  CSS-in-JS Consumption Example (styled-components / emotion)
+  Use Substrata tokens in template literals via CSS variables.
+*/
+
+import styled from 'styled-components';
+
+export const Card = styled.div\`
+  padding: var(--space-4);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+\`;
+
+export const Button = styled.button\`
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-base);
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  transition: background var(--motion-normal);
+
+  &:hover {
+    background: var(--color-brand-hover);
+  }
+\`;
+`,
+        'tailwind.config.js': `/* 
+  Tailwind CSS Consumption Example
+  Map Substrata 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: [],
+};
+`
+    };
+
+    console.log('');
+    for (const [file, content] of Object.entries(consumptionExamples)) {
+        const filePath = path.join(consumptionDir, file);
+        if (!fs.existsSync(filePath)) {
+            fs.writeFileSync(filePath, content);
+            console.log(`✅ Created src/consumption/${file}`);
+        }
+    }
+
+    // 7. Create validation scripts
+    const scripts = {
+        'generate-tokens.js': fs.readFileSync(path.join(__dirname, '../scripts/generate-tokens.js'), 'utf8'),
+        'validate-tokens.js': fs.readFileSync(path.join(__dirname, '../scripts/validate-tokens.js'), 'utf8'),
+        'lint-hardcoded.js': fs.readFileSync(path.join(__dirname, '../scripts/lint-hardcoded.js'), 'utf8'),
+        'figma-sync.js': fs.readFileSync(path.join(__dirname, '../scripts/figma-sync.js'), 'utf8')
+    };
+
+    console.log('');
+    for (const [file, content] of Object.entries(scripts)) {
+        const filePath = path.join(scriptsDir, file);
+        if (!fs.existsSync(filePath)) {
+            fs.writeFileSync(filePath, content);
+            console.log(`✅ Created scripts/${file}`);
+        }
+    }
+
+    // 8. Add scripts to package.json
+    const pkgPath = path.join(cwd, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            if (!pkg.scripts) pkg.scripts = {};
+            
+            let updated = false;
+            if (!pkg.scripts['build:tokens']) {
+                pkg.scripts['build:tokens'] = 'node scripts/generate-tokens.js';
+                updated = true;
+            }
+            if (!pkg.scripts['test:tokens']) {
+                pkg.scripts['test:tokens'] = 'node scripts/validate-tokens.js';
+                updated = true;
+            }
+            if (!pkg.scripts['lint:tokens']) {
+                pkg.scripts['lint:tokens'] = 'node scripts/lint-hardcoded.js';
+                updated = true;
+            }
+            if (!pkg.scripts['sync:figma']) {
+                pkg.scripts['sync:figma'] = 'node scripts/figma-sync.js';
+                updated = true;
+            }
+            
+            if (updated) {
+                fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+                console.log('\n✅ Added npm scripts to package.json');
+            }
+        } catch (e) {
+            console.log('\n⚠️  Could not update package.json (invalid JSON or permissions)');
+        }
+    }
+
+    console.log('\n✨ Substrata is ready!\n');
+    console.log('📂 Generated structure:');
+    console.log('   ├── substrata.config.js');
+    console.log('   ├── src/');
+    console.log('   │   ├── tokens/          (9 token files)');
+    console.log('   │   ├── consumption/     (3 framework examples)');
+    console.log('   │   ├── substrata.css    (main entry point)');
+    console.log('   │   └── base.css');
+    console.log('   └── scripts/            (3 automation scripts)\n');
+    console.log('▶️  Next steps:');
+    console.log('   1. Import src/substrata.css in your app');
+    console.log('   2. Run: npm run build:tokens');
+    console.log('   3. Check src/consumption/ for framework integration examples\n');
+}
+
+if (command === 'generate') {
+    console.log('Generating tokens...');
+    try {
+        const scriptPath = path.join(__dirname, '../scripts/generate-tokens.js');
+
+        if (fs.existsSync(scriptPath)) {
+            require(scriptPath);
+        } else {
+            console.error('❌ Could not find generation script at:', scriptPath);
+            process.exit(1);
+        }
+    } catch (error) {
+        console.error('❌ Error during generation:', error);
+        process.exit(1);
+    }
+}
+
+if (command === 'figma') {
+    const subcommand = args[1];
+
+    if (!subcommand || subcommand !== 'apply-preview') {
+        console.log('Usage: @stratixlabs/core figma <subcommand>');
+        console.log('Subcommands:');
+        console.log('  apply-preview  Apply figma-push-preview.json to Figma via Variables REST API');
+        process.exit(1);
+    }
+
+    const scriptPath = path.join(__dirname, '../scripts/figma-sync.js');
+
+    if (!fs.existsSync(scriptPath)) {
+        console.error('❌ Could not find Figma script at:', scriptPath);
+        process.exit(1);
+    }
+
+    process.env.FIGMA_SYNC_DIRECTION = 'apply';
+
+    try {
+        require(scriptPath);
+    } catch (error) {
+        console.error('❌ Error applying Figma push preview:', error);
+        process.exit(1);
+    }
+}

package/index.js

@@ -0,0 +1,3 @@
+const tokens = require('./tokens.json');
+
+module.exports = tokens;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@stratixlabs/core",
+  "version": "1.7.1",
+  "description": "...",
+  "bin": {
+    "substrata": "bin/substrata.js"
+  },
+  "main": "index.js",
+  "scripts": {
+    "test": "npm run test:tokens",
+    "build:tokens": "node scripts/generate-tokens.js",
+    "build:css-from-tokens": "node scripts/tokens-to-css.js",
+    "build:types": "node scripts/generate-dts-from-tokens.js",
+    "test:tokens": "node scripts/validate-tokens.js",
+    "lint:tokens": "node scripts/lint-hardcoded.js",
+    "lint:code": "node scripts/lint-code.js",
+    "detect:breaking": "node scripts/detect-breaking-changes.js",
+    "sync:figma": "node scripts/figma-sync.js"
+  },
+  "keywords": [
+    "stratix",
+    "design-tokens",
+    "design-system",
+    "infra",
+    "platform"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mikaelcarrara/stratix"
+  },
+  "author": "Mikael Carrara",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "scripts",
+    "src",
+    "index.js",
+    "tokens.json",
+    "substrata.d.ts",
+    "README.md",
+    "substrata.config.js"
+  ],
+  "devDependencies": {
+    "ajv": "^8.12.0"
+  }
+}