@gtcx/tokens 0.1.0 → 0.2.0

package/dist/platforms/fifty-four.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/platforms/fifty-four.ts
+var fifty_four_exports = {};
+__export(fifty_four_exports, {
+  fiftyFourColors: () => fiftyFourColors,
+  fiftyFourPlatformTokens: () => fiftyFourPlatformTokens,
+  fiftyFourRadii: () => fiftyFourRadii,
+  fiftyFourShadows: () => fiftyFourShadows
+});
+module.exports = __toCommonJS(fifty_four_exports);
+var fiftyFourColors = {
+  // Brand — teal accent
+  primary: "#00E5C8",
+  primaryHover: "#00D4B8",
+  primaryActive: "#00BFA8",
+  primaryBg: "#0A1F1C",
+  secondary: "#A78BFA",
+  secondaryHover: "#8B6FE0",
+  // Feedback — vivid on dark backgrounds
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#3B82F6",
+  // Domain-specific
+  profit: "#22C55E",
+  loss: "#EF4444",
+  approved: "#16A34A",
+  pending: "#D97706",
+  rejected: "#DC2626",
+  secure: "#16A34A",
+  insecure: "#DC2626",
+  // Text — WCAG AA enforced (§1.2)
+  textPrimary: "#EDEDF0",
+  textSecondary: "#A0A0AB",
+  textTertiary: "#71717A",
+  textMuted: "#52525B",
+  textInverse: "#0E0E11",
+  // Backgrounds — elevation stack (§1.1)
+  // Level 0: Void (#08090A) — page canvas
+  // Level 1: Surface (#111116) — cards, panels, sidebar
+  // Level 2: Elevated (#191920) — hover, active panels, drawers
+  // Level 3: Raised (#222229) — dropdowns, popovers, command bar
+  // Level 4: Overlay (#2A2A32) — modals, dialogs, toasts
+  // Level 5: Spotlight (#333340) — tooltips, context menus
+  bgPage: "#08090A",
+  bgSurface: "#111116",
+  bgSurfaceHover: "#191920",
+  bgSurfaceTertiary: "#222229",
+  bgInverse: "#EDEDF0",
+  bgSidebar: "#0E0E13",
+  bgHeader: "#0E0E13",
+  // Borders — three rgba tiers (§1.4)
+  // Subtle:   rgba(255, 255, 255, 0.06)
+  // Default:  rgba(255, 255, 255, 0.10)
+  // Emphasis: rgba(255, 255, 255, 0.16)
+  //
+  // Note: CSS variables use rgba values directly. These hex fallbacks are
+  // for JS consumers that require string hex. The CSS generation script
+  // outputs the canonical rgba values.
+  border: "rgba(255, 255, 255, 0.10)",
+  borderLight: "rgba(255, 255, 255, 0.06)",
+  borderSecondary: "rgba(255, 255, 255, 0.16)",
+  borderFocus: "#00E5C8",
+  // Links
+  link: "#00E5C8",
+  linkHover: "#00D4B8"
+};
+var fiftyFourRadii = {
+  component: 6,
+  card: 10,
+  button: 6,
+  input: 6,
+  tag: 4,
+  avatar: 9999
+};
+var fiftyFourShadows = {
+  card: "0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04)",
+  dropdown: "0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06)",
+  modal: "0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08)"
+};
+var fiftyFourPlatformTokens = {
+  colors: fiftyFourColors,
+  radii: fiftyFourRadii,
+  shadows: fiftyFourShadows
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fiftyFourColors,
+  fiftyFourPlatformTokens,
+  fiftyFourRadii,
+  fiftyFourShadows
+});

package/dist/platforms/fifty-four.mjs

@@ -0,0 +1,12 @@
+import {
+  fiftyFourColors,
+  fiftyFourPlatformTokens,
+  fiftyFourRadii,
+  fiftyFourShadows
+} from "../chunk-FB6JVSW6.mjs";
+export {
+  fiftyFourColors,
+  fiftyFourPlatformTokens,
+  fiftyFourRadii,
+  fiftyFourShadows
+};

package/package.json

@@ -1,34 +1,46 @@
 {
   "name": "@gtcx/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "GTCX design tokens — primitives, semantic, platform, and dark theme",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./platforms/fifty-four": {
+      "types": "./dist/platforms/fifty-four.d.ts",
+      "import": "./dist/platforms/fifty-four.mjs",
+      "require": "./dist/platforms/fifty-four.js"
+    },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs",
+      "require": "./dist/css.js"
+    },
+    "./css/platforms/*": "./css/platforms/*"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
-    "lint": "eslint src/",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
   "files": [
     "dist",
+    "css",
     "README.md"
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/platforms/fifty-four.ts src/css.ts --format esm,cjs --dts && node scripts/generate-css.mjs",
+    "dev": "tsup src/index.ts src/platforms/fifty-four.ts src/css.ts --format esm,cjs --dts --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}

package/dist/index.cjs

@@ -1,384 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  borderRadiusPrimitives: () => borderRadiusPrimitives,
-  colorPrimitives: () => colorPrimitives,
-  darkColors: () => darkColors,
-  fontFamilyPrimitives: () => fontFamilyPrimitives,
-  fontSizePrimitives: () => fontSizePrimitives,
-  fontWeightPrimitives: () => fontWeightPrimitives,
-  letterSpacingPrimitives: () => letterSpacingPrimitives,
-  lineHeightPrimitives: () => lineHeightPrimitives,
-  platformColors: () => platformColors,
-  platformSpacing: () => platformSpacing,
-  semanticTokens: () => semanticTokens,
-  shadowPrimitives: () => shadowPrimitives,
-  spacingPrimitives: () => spacingPrimitives
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/primitives.ts
-var colorPrimitives = {
-  // GTCX brand primary (sky blue)
-  primary: {
-    50: "#f0f9ff",
-    100: "#e0f2fe",
-    200: "#bae6fd",
-    300: "#7dd3fc",
-    400: "#38bdf8",
-    500: "#0ea5e9",
-    600: "#0284c7",
-    700: "#0369a1",
-    800: "#075985",
-    900: "#0c4a6e",
-    950: "#082f49"
-  },
-  secondary: {
-    50: "#faf5ff",
-    100: "#f3e8ff",
-    200: "#e9d5ff",
-    300: "#d8b4fe",
-    400: "#c084fc",
-    500: "#a855f7",
-    600: "#9333ea",
-    700: "#7c3aed",
-    800: "#6b21a8",
-    900: "#581c87",
-    950: "#3b0764"
-  },
-  success: {
-    50: "#f0fdf4",
-    100: "#dcfce7",
-    200: "#bbf7d0",
-    300: "#86efac",
-    400: "#4ade80",
-    500: "#22c55e",
-    600: "#16a34a",
-    700: "#15803d",
-    800: "#166534",
-    900: "#14532d",
-    950: "#052e16"
-  },
-  warning: {
-    50: "#fffbeb",
-    100: "#fef3c7",
-    200: "#fde68a",
-    300: "#fcd34d",
-    400: "#fbbf24",
-    500: "#f59e0b",
-    600: "#d97706",
-    700: "#b45309",
-    800: "#92400e",
-    900: "#78350f",
-    950: "#451a03"
-  },
-  error: {
-    50: "#fef2f2",
-    100: "#fee2e2",
-    200: "#fecaca",
-    300: "#fca5a5",
-    400: "#f87171",
-    500: "#ef4444",
-    600: "#dc2626",
-    700: "#b91c1c",
-    800: "#991b1b",
-    900: "#7f1d1d",
-    950: "#450a0a"
-  },
-  info: {
-    50: "#eff6ff",
-    100: "#dbeafe",
-    200: "#bfdbfe",
-    300: "#93c5fd",
-    400: "#60a5fa",
-    500: "#3b82f6",
-    600: "#2563eb",
-    700: "#1d4ed8",
-    800: "#1e40af",
-    900: "#1e3a8a",
-    950: "#172554"
-  },
-  neutral: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#e5e5e5",
-    300: "#d4d4d4",
-    400: "#a3a3a3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#171717",
-    950: "#0a0a0a"
-  },
-  white: "#ffffff",
-  black: "#000000"
-};
-var spacingPrimitives = {
-  0: 0,
-  1: 4,
-  2: 8,
-  3: 12,
-  4: 16,
-  5: 20,
-  6: 24,
-  8: 32,
-  10: 40,
-  12: 48,
-  16: 64,
-  20: 80,
-  24: 96,
-  32: 128
-};
-var fontSizePrimitives = {
-  xs: 12,
-  sm: 14,
-  base: 16,
-  lg: 18,
-  xl: 20,
-  "2xl": 24,
-  "3xl": 30,
-  "4xl": 36,
-  "5xl": 48
-};
-var fontWeightPrimitives = {
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-var lineHeightPrimitives = {
-  tight: 1.2,
-  normal: 1.5,
-  relaxed: 1.7
-};
-var letterSpacingPrimitives = {
-  tight: "-0.025em",
-  normal: "0em",
-  wide: "0.025em"
-};
-var borderRadiusPrimitives = {
-  none: 0,
-  sm: 2,
-  md: 4,
-  lg: 8,
-  xl: 12,
-  full: 9999
-};
-var shadowPrimitives = {
-  none: "none",
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
-};
-var fontFamilyPrimitives = {
-  sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  mono: "JetBrains Mono, Fira Code, Consolas, monospace",
-  serif: "Georgia, 'Times New Roman', serif"
-};
-
-// src/semantic.ts
-var semanticTokens = {
-  colors: {
-    // Brand
-    primary: colorPrimitives.primary[500],
-    primaryHover: colorPrimitives.primary[600],
-    primaryActive: colorPrimitives.primary[700],
-    primaryBg: colorPrimitives.primary[50],
-    secondary: colorPrimitives.secondary[500],
-    secondaryHover: colorPrimitives.secondary[600],
-    // Feedback
-    success: colorPrimitives.success[500],
-    warning: colorPrimitives.warning[500],
-    error: colorPrimitives.error[500],
-    info: colorPrimitives.info[500],
-    // Domain-specific semantic colors
-    profit: "#10b981",
-    loss: "#ef4444",
-    approved: "#059669",
-    pending: "#d97706",
-    rejected: "#dc2626",
-    secure: "#059669",
-    insecure: "#dc2626",
-    // Text
-    textPrimary: colorPrimitives.neutral[900],
-    textSecondary: colorPrimitives.neutral[600],
-    textTertiary: colorPrimitives.neutral[500],
-    textMuted: colorPrimitives.neutral[400],
-    textInverse: colorPrimitives.neutral[50],
-    // Backgrounds
-    bgPage: colorPrimitives.neutral[50],
-    bgSurface: colorPrimitives.white,
-    bgSurfaceHover: colorPrimitives.neutral[100],
-    bgSurfaceTertiary: colorPrimitives.neutral[200],
-    bgInverse: colorPrimitives.neutral[900],
-    bgSidebar: colorPrimitives.white,
-    bgHeader: colorPrimitives.white,
-    // Borders
-    border: colorPrimitives.neutral[200],
-    borderLight: colorPrimitives.neutral[100],
-    borderSecondary: colorPrimitives.neutral[300],
-    borderFocus: colorPrimitives.primary[500],
-    // Links
-    link: colorPrimitives.primary[600],
-    linkHover: colorPrimitives.primary[700]
-  },
-  spacing: {
-    pageGutter: spacingPrimitives[6],
-    cardPadding: spacingPrimitives[4],
-    sectionGap: spacingPrimitives[6],
-    componentGap: spacingPrimitives[3],
-    inlineGap: spacingPrimitives[2],
-    component: {
-      button: { paddingX: spacingPrimitives[4], paddingY: spacingPrimitives[2], gap: spacingPrimitives[2] },
-      input: { paddingX: spacingPrimitives[3], paddingY: spacingPrimitives[2] },
-      card: { padding: spacingPrimitives[6], gap: spacingPrimitives[4] },
-      form: { fieldGap: spacingPrimitives[4], sectionGap: spacingPrimitives[8], labelGap: spacingPrimitives[2] },
-      modal: { padding: spacingPrimitives[6], gap: spacingPrimitives[4] },
-      table: { cellPadding: spacingPrimitives[4], headerPadding: spacingPrimitives[4] }
-    },
-    layout: {
-      container: { paddingX: spacingPrimitives[4], paddingY: spacingPrimitives[6] },
-      section: { marginY: spacingPrimitives[12], gap: spacingPrimitives[8] },
-      page: { marginY: spacingPrimitives[16], paddingX: spacingPrimitives[6] }
-    }
-  },
-  typography: {
-    fontFamily: fontFamilyPrimitives.sans,
-    fontFamilyCode: fontFamilyPrimitives.mono,
-    fontFamilySerif: fontFamilyPrimitives.serif,
-    display: {
-      lg: { fontSize: fontSizePrimitives["5xl"], fontWeight: fontWeightPrimitives.bold, lineHeight: lineHeightPrimitives.tight, letterSpacing: letterSpacingPrimitives.tight },
-      md: { fontSize: fontSizePrimitives["4xl"], fontWeight: fontWeightPrimitives.bold, lineHeight: lineHeightPrimitives.tight },
-      sm: { fontSize: fontSizePrimitives["3xl"], fontWeight: fontWeightPrimitives.semibold, lineHeight: lineHeightPrimitives.tight }
-    },
-    heading: {
-      h1: { fontSize: fontSizePrimitives["3xl"], fontWeight: fontWeightPrimitives.bold, lineHeight: lineHeightPrimitives.tight },
-      h2: { fontSize: fontSizePrimitives["2xl"], fontWeight: fontWeightPrimitives.semibold, lineHeight: lineHeightPrimitives.tight },
-      h3: { fontSize: fontSizePrimitives.xl, fontWeight: fontWeightPrimitives.semibold, lineHeight: lineHeightPrimitives.normal },
-      h4: { fontSize: fontSizePrimitives.lg, fontWeight: fontWeightPrimitives.medium, lineHeight: lineHeightPrimitives.normal }
-    },
-    body: {
-      lg: { fontSize: fontSizePrimitives.lg, fontWeight: fontWeightPrimitives.normal, lineHeight: lineHeightPrimitives.relaxed },
-      md: { fontSize: fontSizePrimitives.base, fontWeight: fontWeightPrimitives.normal, lineHeight: lineHeightPrimitives.normal },
-      sm: { fontSize: fontSizePrimitives.sm, fontWeight: fontWeightPrimitives.normal, lineHeight: lineHeightPrimitives.normal }
-    },
-    caption: { fontSize: fontSizePrimitives.xs, fontWeight: fontWeightPrimitives.normal, lineHeight: lineHeightPrimitives.normal },
-    button: {
-      lg: { fontSize: fontSizePrimitives.lg, fontWeight: fontWeightPrimitives.medium },
-      md: { fontSize: fontSizePrimitives.base, fontWeight: fontWeightPrimitives.medium },
-      sm: { fontSize: fontSizePrimitives.sm, fontWeight: fontWeightPrimitives.medium }
-    }
-  },
-  radii: {
-    component: borderRadiusPrimitives.md,
-    card: borderRadiusPrimitives.lg,
-    button: borderRadiusPrimitives.md,
-    input: borderRadiusPrimitives.md,
-    tag: borderRadiusPrimitives.sm,
-    avatar: borderRadiusPrimitives.full
-  },
-  shadows: {
-    card: shadowPrimitives.sm,
-    dropdown: shadowPrimitives.md,
-    modal: shadowPrimitives.lg
-  },
-  layout: {
-    sidebarWidth: 240,
-    sidebarCollapsedWidth: 72,
-    headerHeight: 56,
-    contentMaxWidth: 1440
-  }
-};
-
-// src/platform.ts
-var platformColors = {
-  crx: {
-    primary: colorPrimitives.primary[600],
-    secondary: colorPrimitives.secondary[600],
-    accent: colorPrimitives.info[500],
-    gradient: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)"
-  },
-  sgx: {
-    primary: colorPrimitives.primary[700],
-    secondary: colorPrimitives.secondary[700],
-    accent: colorPrimitives.warning[500],
-    gradient: "linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%)"
-  },
-  agx: {
-    primary: colorPrimitives.primary[500],
-    secondary: colorPrimitives.secondary[500],
-    accent: colorPrimitives.success[500],
-    gradient: "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)"
-  }
-};
-var platformSpacing = {
-  crx: {
-    density: "comfortable",
-    basePadding: spacingPrimitives[5],
-    baseGap: spacingPrimitives[4]
-  },
-  sgx: {
-    density: "spacious",
-    basePadding: spacingPrimitives[6],
-    baseGap: spacingPrimitives[5]
-  },
-  agx: {
-    density: "compact",
-    basePadding: spacingPrimitives[4],
-    baseGap: spacingPrimitives[3]
-  }
-};
-
-// src/dark.ts
-var darkColors = {
-  text: {
-    primary: colorPrimitives.neutral[50],
-    secondary: colorPrimitives.neutral[300],
-    tertiary: colorPrimitives.neutral[400]
-  },
-  background: {
-    primary: colorPrimitives.neutral[900],
-    secondary: colorPrimitives.neutral[800],
-    tertiary: colorPrimitives.neutral[700]
-  },
-  border: {
-    primary: colorPrimitives.neutral[700],
-    secondary: colorPrimitives.neutral[600]
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  borderRadiusPrimitives,
-  colorPrimitives,
-  darkColors,
-  fontFamilyPrimitives,
-  fontSizePrimitives,
-  fontWeightPrimitives,
-  letterSpacingPrimitives,
-  lineHeightPrimitives,
-  platformColors,
-  platformSpacing,
-  semanticTokens,
-  shadowPrimitives,
-  spacingPrimitives
-});