@gtcx/tokens 0.1.0

package/dist/index.mjs

@@ -0,0 +1,583 @@
+// 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"
+  },
+  /** GTCX brand secondary — purple */
+  secondary: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7c3aed",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  /** Positive feedback, approvals, profit */
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  /** Caution states, pending actions */
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  /** Destructive actions, rejections, loss */
+  error: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  /** Informational, links */
+  info: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  /** Grays for text, backgrounds, borders */
+  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 fontFamilyPrimitives = {
+  sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  mono: "JetBrains Mono, Fira Code, Consolas, monospace",
+  serif: "Georgia, 'Times New Roman', serif"
+};
+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 breakpointPrimitives = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+var zIndexPrimitives = {
+  dropdown: 1e3,
+  sticky: 1020,
+  fixed: 1030,
+  modal: 1040,
+  popover: 1050,
+  tooltip: 1060
+};
+var transitionPrimitives = {
+  fast: "150ms ease",
+  normal: "250ms ease",
+  slow: "350ms ease"
+};
+var opacityPrimitives = {
+  /** Disabled controls */
+  disabled: 0.4,
+  /** Hover state overlays */
+  hover: 0.08,
+  /** Active/pressed state overlays */
+  pressed: 0.12,
+  /** Modal backdrop overlay */
+  overlay: 0.5,
+  /** Loading state content fade */
+  loading: 0.65
+};
+var focusPrimitives = {
+  /** Ring width in pixels */
+  ringWidth: 2,
+  /** Ring offset from element edge in pixels */
+  ringOffset: 2,
+  /** Ring color — uses primary brand color */
+  ringColor: colorPrimitives.primary[500],
+  /** Ring border-style */
+  ringStyle: "solid"
+};
+var motionPrimitives = {
+  /** Quick micro-interactions (hover, focus) */
+  durationFast: 150,
+  /** Standard transitions (expand, collapse) */
+  durationNormal: 250,
+  /** Deliberate animations (page transitions, modals) */
+  durationSlow: 350,
+  /** Default easing — deceleration curve */
+  easeDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
+  /** Entrance easing — elements entering the viewport */
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  /** Exit easing — elements leaving the viewport */
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  /** Symmetric easing — elements that enter and exit */
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+};
+
+// src/semantic.ts
+var semanticColors = {
+  // Brand
+  /** Primary brand action color */
+  primary: colorPrimitives.primary[500],
+  /** Primary hover state */
+  primaryHover: colorPrimitives.primary[600],
+  /** Primary active/pressed state */
+  primaryActive: colorPrimitives.primary[700],
+  /** Primary tinted background (selected rows, badges) */
+  primaryBg: colorPrimitives.primary[50],
+  /** Secondary brand color */
+  secondary: colorPrimitives.secondary[500],
+  /** Secondary hover state */
+  secondaryHover: colorPrimitives.secondary[600],
+  // Feedback
+  /** Positive outcome (approvals, passing checks) */
+  success: colorPrimitives.success[500],
+  /** Caution state (pending review, warnings) */
+  warning: colorPrimitives.warning[500],
+  /** Destructive/failure state */
+  error: colorPrimitives.error[500],
+  /** Informational state */
+  info: colorPrimitives.info[500],
+  // Domain-specific — all traced to primitive scales
+  /** Financial gain */
+  profit: colorPrimitives.success[500],
+  /** Financial loss */
+  loss: colorPrimitives.error[500],
+  /** Compliance approved */
+  approved: colorPrimitives.success[600],
+  /** Compliance pending */
+  pending: colorPrimitives.warning[600],
+  /** Compliance rejected */
+  rejected: colorPrimitives.error[600],
+  /** Security verified */
+  secure: colorPrimitives.success[600],
+  /** Security compromised */
+  insecure: colorPrimitives.error[600],
+  // Text
+  /** Primary body text */
+  textPrimary: colorPrimitives.neutral[900],
+  /** Secondary/supporting text */
+  textSecondary: colorPrimitives.neutral[600],
+  /** Tertiary/label text */
+  textTertiary: colorPrimitives.neutral[500],
+  /** Muted/placeholder text */
+  textMuted: colorPrimitives.neutral[400],
+  /** Text on dark backgrounds */
+  textInverse: colorPrimitives.neutral[50],
+  // Backgrounds
+  /** Page-level background */
+  bgPage: colorPrimitives.neutral[50],
+  /** Card/surface background */
+  bgSurface: colorPrimitives.white,
+  /** Surface hover state */
+  bgSurfaceHover: colorPrimitives.neutral[100],
+  /** Tertiary surface (nested cards, wells) */
+  bgSurfaceTertiary: colorPrimitives.neutral[200],
+  /** Inverse background (dark sections) */
+  bgInverse: colorPrimitives.neutral[900],
+  /** Sidebar background */
+  bgSidebar: colorPrimitives.white,
+  /** Header background */
+  bgHeader: colorPrimitives.white,
+  // Borders
+  /** Default border */
+  border: colorPrimitives.neutral[200],
+  /** Light/subtle border */
+  borderLight: colorPrimitives.neutral[100],
+  /** Emphasized border */
+  borderSecondary: colorPrimitives.neutral[300],
+  /** Focus ring border */
+  borderFocus: colorPrimitives.primary[500],
+  // Links
+  /** Default link color */
+  link: colorPrimitives.primary[600],
+  /** Link hover state */
+  linkHover: colorPrimitives.primary[700]
+};
+var semanticSpacing = {
+  /** Horizontal page gutter */
+  pageGutter: spacingPrimitives[6],
+  /** Internal card padding */
+  cardPadding: spacingPrimitives[4],
+  /** Gap between page sections */
+  sectionGap: spacingPrimitives[6],
+  /** Gap between sibling components */
+  componentGap: spacingPrimitives[3],
+  /** Inline element gap (icon + label) */
+  inlineGap: spacingPrimitives[2],
+  /** Per-component spacing presets */
+  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-level spacing presets */
+  layout: {
+    container: {
+      paddingX: spacingPrimitives[4],
+      paddingY: spacingPrimitives[6]
+    },
+    section: {
+      marginY: spacingPrimitives[12],
+      gap: spacingPrimitives[8]
+    },
+    page: {
+      marginY: spacingPrimitives[16],
+      paddingX: spacingPrimitives[6]
+    }
+  }
+};
+var semanticTypography = {
+  /** Default sans-serif font stack */
+  fontFamily: fontFamilyPrimitives.sans,
+  /** Monospace font stack for code */
+  fontFamilyCode: fontFamilyPrimitives.mono,
+  /** Serif font stack for editorial content */
+  fontFamilySerif: fontFamilyPrimitives.serif,
+  /** Display type scale — hero sections, feature numbers */
+  display: {
+    lg: {
+      fontSize: fontSizePrimitives["5xl"],
+      fontWeight: fontWeightPrimitives.bold,
+      lineHeight: lineHeightPrimitives.tight,
+      letterSpacing: letterSpacingPrimitives.tight
+    },
+    md: {
+      fontSize: fontSizePrimitives["4xl"],
+      fontWeight: fontWeightPrimitives.bold,
+      lineHeight: lineHeightPrimitives.tight,
+      letterSpacing: letterSpacingPrimitives.normal
+    },
+    sm: {
+      fontSize: fontSizePrimitives["3xl"],
+      fontWeight: fontWeightPrimitives.semibold,
+      lineHeight: lineHeightPrimitives.tight,
+      letterSpacing: letterSpacingPrimitives.normal
+    }
+  },
+  /** Heading type scale — page/section/card headings */
+  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 type scale — paragraphs, descriptions */
+  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 — footnotes, timestamps, fine print */
+  caption: {
+    fontSize: fontSizePrimitives.xs,
+    fontWeight: fontWeightPrimitives.normal,
+    lineHeight: lineHeightPrimitives.normal
+  },
+  /** Button label type scale */
+  button: {
+    lg: {
+      fontSize: fontSizePrimitives.lg,
+      fontWeight: fontWeightPrimitives.medium,
+      lineHeight: lineHeightPrimitives.normal
+    },
+    md: {
+      fontSize: fontSizePrimitives.base,
+      fontWeight: fontWeightPrimitives.medium,
+      lineHeight: lineHeightPrimitives.normal
+    },
+    sm: {
+      fontSize: fontSizePrimitives.sm,
+      fontWeight: fontWeightPrimitives.medium,
+      lineHeight: lineHeightPrimitives.normal
+    }
+  }
+};
+var semanticRadii = {
+  /** Default component radius */
+  component: borderRadiusPrimitives.md,
+  /** Card/panel radius */
+  card: borderRadiusPrimitives.lg,
+  /** Button radius */
+  button: borderRadiusPrimitives.md,
+  /** Input/select radius */
+  input: borderRadiusPrimitives.md,
+  /** Tag/badge radius */
+  tag: borderRadiusPrimitives.sm,
+  /** Avatar — fully round */
+  avatar: borderRadiusPrimitives.full
+};
+var semanticShadows = {
+  /** Card/panel elevation */
+  card: shadowPrimitives.sm,
+  /** Dropdown/popover elevation */
+  dropdown: shadowPrimitives.md,
+  /** Modal/dialog elevation */
+  modal: shadowPrimitives.lg
+};
+var semanticLayout = {
+  /** Sidebar expanded width */
+  sidebarWidth: 240,
+  /** Sidebar collapsed width */
+  sidebarCollapsedWidth: 72,
+  /** Top header height */
+  headerHeight: 56,
+  /** Maximum content area width */
+  contentMaxWidth: 1440
+};
+var semanticTokens = {
+  colors: semanticColors,
+  spacing: semanticSpacing,
+  typography: semanticTypography,
+  radii: semanticRadii,
+  shadows: semanticShadows,
+  layout: semanticLayout
+};
+
+// src/dark.ts
+var darkSemanticColors = {
+  // Brand — shifted lighter for contrast on dark backgrounds
+  primary: colorPrimitives.primary[400],
+  primaryHover: colorPrimitives.primary[300],
+  primaryActive: colorPrimitives.primary[500],
+  primaryBg: colorPrimitives.primary[950],
+  secondary: colorPrimitives.secondary[400],
+  secondaryHover: colorPrimitives.secondary[300],
+  // Feedback — shifted to 400 for readability
+  success: colorPrimitives.success[400],
+  warning: colorPrimitives.warning[400],
+  error: colorPrimitives.error[400],
+  info: colorPrimitives.info[400],
+  // Domain-specific
+  profit: colorPrimitives.success[400],
+  loss: colorPrimitives.error[400],
+  approved: colorPrimitives.success[400],
+  pending: colorPrimitives.warning[400],
+  rejected: colorPrimitives.error[400],
+  secure: colorPrimitives.success[400],
+  insecure: colorPrimitives.error[400],
+  // Text — light on dark
+  textPrimary: colorPrimitives.neutral[50],
+  textSecondary: colorPrimitives.neutral[300],
+  textTertiary: colorPrimitives.neutral[400],
+  textMuted: colorPrimitives.neutral[500],
+  textInverse: colorPrimitives.neutral[900],
+  // Backgrounds — dark
+  bgPage: colorPrimitives.neutral[950],
+  bgSurface: colorPrimitives.neutral[900],
+  bgSurfaceHover: colorPrimitives.neutral[800],
+  bgSurfaceTertiary: colorPrimitives.neutral[700],
+  bgInverse: colorPrimitives.neutral[50],
+  bgSidebar: colorPrimitives.neutral[900],
+  bgHeader: colorPrimitives.neutral[900],
+  // Borders — subtle on dark
+  border: colorPrimitives.neutral[700],
+  borderLight: colorPrimitives.neutral[800],
+  borderSecondary: colorPrimitives.neutral[600],
+  borderFocus: colorPrimitives.primary[400],
+  // Links
+  link: colorPrimitives.primary[400],
+  linkHover: colorPrimitives.primary[300]
+};
+var darkColors = {
+  text: {
+    primary: darkSemanticColors.textPrimary,
+    secondary: darkSemanticColors.textSecondary,
+    tertiary: darkSemanticColors.textTertiary
+  },
+  background: {
+    primary: darkSemanticColors.bgPage,
+    secondary: darkSemanticColors.bgSurface,
+    tertiary: darkSemanticColors.bgSurfaceTertiary
+  },
+  border: {
+    primary: darkSemanticColors.border,
+    secondary: darkSemanticColors.borderSecondary
+  }
+};
+export {
+  borderRadiusPrimitives,
+  breakpointPrimitives,
+  colorPrimitives,
+  darkColors,
+  darkSemanticColors,
+  focusPrimitives,
+  fontFamilyPrimitives,
+  fontSizePrimitives,
+  fontWeightPrimitives,
+  letterSpacingPrimitives,
+  lineHeightPrimitives,
+  motionPrimitives,
+  opacityPrimitives,
+  semanticColors,
+  semanticLayout,
+  semanticRadii,
+  semanticShadows,
+  semanticSpacing,
+  semanticTokens,
+  semanticTypography,
+  shadowPrimitives,
+  spacingPrimitives,
+  transitionPrimitives,
+  zIndexPrimitives
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@gtcx/tokens",
+  "version": "0.1.0",
+  "description": "GTCX design tokens — primitives, semantic, platform, and dark theme",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "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",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}