rechta-ds 0.0.0

package/packages/tokens/build.js

@@ -0,0 +1,357 @@
+#!/usr/bin/env node
+/**
+ * Rechta Design System — Token Build Script
+ * Generates: CSS custom properties, JS/TS tokens, Tailwind config
+ */
+
+const fs   = require('fs');
+const path = require('path');
+
+const tokens = require('./src/tokens.json');
+
+const distDir = path.join(__dirname, 'dist');
+if (!fs.existsSync(distDir)) fs.mkdirSync(distDir, { recursive: true });
+
+// ── Resolve token references ─────────────────────────────────────────────────
+function resolveReference(value, tokens) {
+  if (typeof value !== 'string') return value;
+  const match = value.match(/^\{(.+)\}$/);
+  if (!match) return value;
+  const parts = match[1].split('.');
+  let resolved = tokens;
+  for (const key of parts) {
+    resolved = resolved?.[key];
+    if (!resolved) return value;
+  }
+  return resolveReference(resolved?.value ?? resolved, tokens);
+}
+
+// ── Flatten tokens ────────────────────────────────────────────────────────────
+function flattenTokens(obj, prefix = '', result = {}) {
+  for (const [key, val] of Object.entries(obj)) {
+    const newKey = prefix ? `${prefix}-${key}` : key;
+    if (val && typeof val === 'object' && 'value' in val) {
+      result[newKey] = resolveReference(val.value, tokens);
+    } else if (val && typeof val === 'object') {
+      flattenTokens(val, newKey, result);
+    }
+  }
+  return result;
+}
+
+const flat = flattenTokens(tokens);
+
+// ── CSS ───────────────────────────────────────────────────────────────────────
+function generateCSS(flat) {
+  const vars = Object.entries(flat)
+    .map(([key, val]) => `  --${key}: ${val};`)
+    .join('\n');
+
+  return `/* Rechta Design System — CSS Custom Properties */
+/* Auto-generated. Do not edit manually. */
+/* Generated: ${new Date().toISOString()} */
+
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;700&display=swap');
+
+:root {
+${vars}
+}
+
+/* Dark mode is the default — light mode overrides */
+[data-theme="light"] {
+  --color-semantic-bg-base:          var(--color-primitive-porcelain);
+  --color-semantic-bg-subtle:        #F0F0EE;
+  --color-semantic-bg-muted:         #E0E0DE;
+  --color-semantic-bg-elevated:      #FFFFFC;
+  --color-semantic-surface-default:  #F0F0EE;
+  --color-semantic-surface-raised:   #FFFFFC;
+  --color-semantic-surface-sunken:   #E0E0DE;
+  --color-semantic-border-default:   #CCCCCA;
+  --color-semantic-border-subtle:    #DDDDDB;
+  --color-semantic-border-strong:    #AAAAAA;
+  --color-semantic-text-primary:     var(--color-primitive-black);
+  --color-semantic-text-secondary:   #444442;
+  --color-semantic-text-tertiary:    #666664;
+  --color-semantic-text-disabled:    #999997;
+  --color-semantic-text-inverse:     var(--color-primitive-porcelain);
+}
+
+/* Base reset */
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  font-family: var(--typography-fontFamily-body);
+  font-size: var(--typography-fontSize-base);
+  color: var(--color-semantic-text-primary);
+  background-color: var(--color-semantic-bg-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+}
+
+// ── TypeScript ────────────────────────────────────────────────────────────────
+function generateTS(flat) {
+  const entries = Object.entries(flat)
+    .map(([key, val]) => {
+      const tsKey = key.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+      return `  '${tsKey}': '${val}'`;
+    })
+    .join(',\n');
+
+  return `/* Rechta Design System — TypeScript Token Exports */
+/* Auto-generated. Do not edit manually. */
+
+export const tokens = {
+${entries}
+} as const;
+
+export type TokenKey = keyof typeof tokens;
+export type TokenValue = typeof tokens[TokenKey];
+
+export const color = {
+  bg: {
+    base:     tokens['colorSemanticBgBase'],
+    subtle:   tokens['colorSemanticBgSubtle'],
+    muted:    tokens['colorSemanticBgMuted'],
+    elevated: tokens['colorSemanticBgElevated'],
+    overlay:  tokens['colorSemanticBgOverlay'],
+    inverse:  tokens['colorSemanticBgInverse'],
+  },
+  surface: {
+    default: tokens['colorSemanticSurfaceDefault'],
+    raised:  tokens['colorSemanticSurfaceRaised'],
+    sunken:  tokens['colorSemanticSurfaceSunken'],
+  },
+  border: {
+    default: tokens['colorSemanticBorderDefault'],
+    subtle:  tokens['colorSemanticBorderSubtle'],
+    strong:  tokens['colorSemanticBorderStrong'],
+    brand:   tokens['colorSemanticBorderBrand'],
+    blue:    tokens['colorSemanticBorderBlue'],
+  },
+  text: {
+    primary:   tokens['colorSemanticTextPrimary'],
+    secondary: tokens['colorSemanticTextSecondary'],
+    tertiary:  tokens['colorSemanticTextTertiary'],
+    disabled:  tokens['colorSemanticTextDisabled'],
+    inverse:   tokens['colorSemanticTextInverse'],
+    brand:     tokens['colorSemanticTextBrand'],
+    blue:      tokens['colorSemanticTextBlue'],
+  },
+  brand: {
+    default: tokens['colorSemanticBrandDefault'],
+    hover:   tokens['colorSemanticBrandHover'],
+    active:  tokens['colorSemanticBrandActive'],
+    subtle:  tokens['colorSemanticBrandSubtle'],
+    muted:   tokens['colorSemanticBrandMuted'],
+  },
+  blue: {
+    default: tokens['colorSemanticBlueDefault'],
+    hover:   tokens['colorSemanticBlueHover'],
+    active:  tokens['colorSemanticBlueActive'],
+    subtle:  tokens['colorSemanticBlueSubtle'],
+    muted:   tokens['colorSemanticBlueMuted'],
+  },
+} as const;
+
+export const typography = {
+  fontFamily: {
+    display:   tokens['typographyFontFamilyDisplay'],
+    body:      tokens['typographyFontFamilyBody'],
+    mono:      tokens['typographyFontFamilyMono'],
+    editorial: tokens['typographyFontFamilyEditorial'],
+  },
+} as const;
+
+export const spacing = Object.fromEntries(
+  Object.entries(tokens).filter(([k]) => k.startsWith('spacing'))
+) as Record<string, string>;
+
+export default tokens;
+`;
+}
+
+// ── Tailwind ──────────────────────────────────────────────────────────────────
+function generateTailwindConfig() {
+  return `/* Rechta Design System — Tailwind Config Extension */
+/* Auto-generated. Do not edit manually. */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50:  'var(--color-primitive-brand-50)',
+          100: 'var(--color-primitive-brand-100)',
+          200: 'var(--color-primitive-brand-200)',
+          300: 'var(--color-primitive-brand-300)',
+          400: 'var(--color-primitive-brand-400)',
+          500: 'var(--color-primitive-brand-500)',
+          600: 'var(--color-primitive-brand-600)',
+          700: 'var(--color-primitive-brand-700)',
+          DEFAULT: 'var(--color-semantic-brand-default)',
+        },
+        blue: {
+          50:  'var(--color-primitive-blue-50)',
+          100: 'var(--color-primitive-blue-100)',
+          200: 'var(--color-primitive-blue-200)',
+          300: 'var(--color-primitive-blue-300)',
+          400: 'var(--color-primitive-blue-400)',
+          500: 'var(--color-primitive-blue-500)',
+          600: 'var(--color-primitive-blue-600)',
+          DEFAULT: 'var(--color-semantic-blue-default)',
+        },
+        malachite: 'var(--color-primitive-malachite)',
+        emerald:   'var(--color-primitive-emerald)',
+        porcelain: 'var(--color-primitive-porcelain)',
+        bg: {
+          base:     'var(--color-semantic-bg-base)',
+          subtle:   'var(--color-semantic-bg-subtle)',
+          muted:    'var(--color-semantic-bg-muted)',
+          elevated: 'var(--color-semantic-bg-elevated)',
+          overlay:  'var(--color-semantic-bg-overlay)',
+          inverse:  'var(--color-semantic-bg-inverse)',
+        },
+        surface: {
+          DEFAULT: 'var(--color-semantic-surface-default)',
+          raised:  'var(--color-semantic-surface-raised)',
+          sunken:  'var(--color-semantic-surface-sunken)',
+        },
+        border: {
+          DEFAULT: 'var(--color-semantic-border-default)',
+          subtle:  'var(--color-semantic-border-subtle)',
+          strong:  'var(--color-semantic-border-strong)',
+          brand:   'var(--color-semantic-border-brand)',
+          blue:    'var(--color-semantic-border-blue)',
+        },
+        text: {
+          primary:   'var(--color-semantic-text-primary)',
+          secondary: 'var(--color-semantic-text-secondary)',
+          tertiary:  'var(--color-semantic-text-tertiary)',
+          disabled:  'var(--color-semantic-text-disabled)',
+          inverse:   'var(--color-semantic-text-inverse)',
+          brand:     'var(--color-semantic-text-brand)',
+          blue:      'var(--color-semantic-text-blue)',
+        },
+      },
+      fontFamily: {
+        display:   ['Syne', 'DM Serif Display', 'Georgia', 'serif'],
+        body:      ['DM Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
+        mono:      ['JetBrains Mono', 'Fira Code', 'monospace'],
+        editorial: ['Playfair Display', 'Georgia', 'serif'],
+        sans:      ['DM Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
+      },
+      fontSize: {
+        xs:    ['0.75rem',  { lineHeight: '1.5' }],
+        sm:    ['0.875rem', { lineHeight: '1.5' }],
+        base:  ['1rem',     { lineHeight: '1.5' }],
+        md:    ['1.125rem', { lineHeight: '1.5' }],
+        lg:    ['1.25rem',  { lineHeight: '1.25' }],
+        xl:    ['1.5rem',   { lineHeight: '1.25' }],
+        '2xl': ['1.875rem', { lineHeight: '1.1' }],
+        '3xl': ['2.25rem',  { lineHeight: '1.1' }],
+        '4xl': ['3rem',     { lineHeight: '1' }],
+        '5xl': ['3.75rem',  { lineHeight: '1' }],
+        '6xl': ['4.5rem',   { lineHeight: '1' }],
+        '7xl': ['6rem',     { lineHeight: '0.95' }],
+        '8xl': ['8rem',     { lineHeight: '0.9' }],
+      },
+      letterSpacing: {
+        tighter: '-0.04em',
+        tight:   '-0.02em',
+        normal:  '0em',
+        wide:    '0.04em',
+        wider:   '0.08em',
+        widest:  '0.16em',
+      },
+      spacing: {
+        px: '1px', 0: '0rem', 0.5: '0.125rem', 1: '0.25rem', 1.5: '0.375rem',
+        2: '0.5rem', 2.5: '0.625rem', 3: '0.75rem', 3.5: '0.875rem', 4: '1rem',
+        5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem',
+        10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem',
+        18: '4.5rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem',
+        36: '9rem', 40: '10rem', 48: '12rem', 56: '14rem', 64: '16rem',
+        72: '18rem', 80: '20rem', 96: '24rem',
+      },
+      borderRadius: {
+        none: '0px', sm: '2px', base: '4px', DEFAULT: '4px',
+        md: '6px', lg: '8px', xl: '12px', '2xl': '16px', '3xl': '24px', full: '9999px',
+      },
+      boxShadow: {
+        sm:           '0 1px 2px 0 rgba(0,0,0,0.5)',
+        DEFAULT:      '0 1px 3px 0 rgba(0,0,0,0.6), 0 1px 2px -1px rgba(0,0,0,0.5)',
+        md:           '0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.5)',
+        lg:           '0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5)',
+        xl:           '0 20px 25px -5px rgba(0,0,0,0.65), 0 8px 10px -6px rgba(0,0,0,0.5)',
+        '2xl':        '0 25px 50px -12px rgba(0,0,0,0.8)',
+        'glow-brand': '0 0 20px rgba(9,232,94,0.28), 0 0 60px rgba(9,232,94,0.1)',
+        'glow-blue':  '0 0 20px rgba(53,144,243,0.25), 0 0 50px rgba(53,144,243,0.08)',
+        inner:        'inset 0 2px 4px 0 rgba(0,0,0,0.5)',
+        none:         'none',
+      },
+      transitionDuration: {
+        instant: '50ms', fast: '100ms', normal: '200ms',
+        slow: '300ms', slower: '500ms', slowest: '700ms',
+      },
+      transitionTimingFunction: {
+        default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        spring:  'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+        sharp:   'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+      },
+      keyframes: {
+        'fade-in':       { from: { opacity: '0' }, to: { opacity: '1' } },
+        'fade-up':       { from: { opacity: '0', transform: 'translateY(16px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
+        'fade-down':     { from: { opacity: '0', transform: 'translateY(-16px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
+        'slide-in-right':{ from: { opacity: '0', transform: 'translateX(24px)' }, to: { opacity: '1', transform: 'translateX(0)' } },
+        'slide-in-left': { from: { opacity: '0', transform: 'translateX(-24px)' }, to: { opacity: '1', transform: 'translateX(0)' } },
+        'scale-in':      { from: { opacity: '0', transform: 'scale(0.95)' }, to: { opacity: '1', transform: 'scale(1)' } },
+        'shimmer':       { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } },
+        'marquee':       { from: { transform: 'translateX(0)' }, to: { transform: 'translateX(-50%)' } },
+        'pulse-glow':    { '0%, 100%': { boxShadow: '0 0 10px rgba(9,232,94,0.3)' }, '50%': { boxShadow: '0 0 30px rgba(9,232,94,0.6), 0 0 60px rgba(9,232,94,0.2)' } },
+        'accordion-down':{ from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
+        'accordion-up':  { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
+      },
+      animation: {
+        'fade-in':        'fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'fade-up':        'fade-up 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        'fade-down':      'fade-down 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        'slide-right':    'slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'slide-left':     'slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'scale-in':       'scale-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+        'shimmer':        'shimmer 2s linear infinite',
+        'marquee':        'marquee 30s linear infinite',
+        'pulse-glow':     'pulse-glow 2s ease-in-out infinite',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up':   'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+};
+`;
+}
+
+// ── Write all outputs ─────────────────────────────────────────────────────────
+const css = generateCSS(flat);
+fs.writeFileSync(path.join(distDir, 'tokens.css'), css);
+console.log('✓ tokens.css');
+
+const tsContent = generateTS(flat);
+fs.writeFileSync(path.join(distDir, 'index.esm.js'), tsContent);
+fs.writeFileSync(path.join(distDir, 'index.d.ts'),   tsContent);
+fs.writeFileSync(path.join(distDir, 'index.js'),
+  '"use strict";\nObject.defineProperty(exports, "__esModule", { value: true });\n' +
+  tsContent.replace(/^export /gm, 'exports.').replace(/^import /gm, '// import '));
+console.log('✓ index.js / index.esm.js / index.d.ts');
+
+const tailwindConfig = generateTailwindConfig();
+fs.writeFileSync(path.join(distDir, 'tailwind.config.js'), tailwindConfig);
+console.log('✓ tailwind.config.js');
+
+fs.copyFileSync(path.join(__dirname, 'src/tokens.json'), path.join(distDir, 'tokens.json'));
+console.log('✓ tokens.json');
+
+console.log('\n✅ @rechta/tokens build complete!');
+console.log(`   Output: ${distDir}`);

package/packages/tokens/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@rechta/tokens",
+  "version": "2.1.0",
+  "description": "Rechta DS design tokens — malachite×porcelain color system, Ruda+Inter+JetBrains Mono fonts",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./css": "./dist/tokens.css",
+    "./json": "./dist/tokens.json",
+    "./tailwind": "./dist/tailwind.config.js"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "watch": "node build.js --watch",
+    "clean": "rm -rf dist"
+  },
+  "files": [
+    "dist",
+    "src/tokens.json",
+    "README.md"
+  ],
+  "keywords": [
+    "design-tokens",
+    "rechta",
+    "css-variables",
+    "tailwind",
+    "shadcn"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/rechta-ds",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}