@gtcx/tokens 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present GTCX Protocol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/css/platforms/fifty-four-dark.css

@@ -0,0 +1,92 @@
+/* Auto-generated by @gtcx/tokens — do not edit manually */
+/* Platform: fifty-four | Mode: dark */
+/* Spec: docs/specs/_project/theme-spec.md */
+/* Generated: 2026-03-08 */
+
+:root {
+  /* ── Colors ──────────────────────────────────────── */
+  --gtcx-primary: #00E5C8;
+  --gtcx-primary-hover: #00D4B8;
+  --gtcx-primary-active: #00BFA8;
+  --gtcx-primary-bg: #0A1F1C;
+  --gtcx-secondary: #A78BFA;
+  --gtcx-secondary-hover: #8B6FE0;
+  --gtcx-success: #22C55E;
+  --gtcx-warning: #F59E0B;
+  --gtcx-error: #EF4444;
+  --gtcx-info: #3B82F6;
+  --gtcx-profit: #22C55E;
+  --gtcx-loss: #EF4444;
+  --gtcx-approved: #16A34A;
+  --gtcx-pending: #D97706;
+  --gtcx-rejected: #DC2626;
+  --gtcx-secure: #16A34A;
+  --gtcx-insecure: #DC2626;
+  --gtcx-text-primary: #EDEDF0;
+  --gtcx-text-secondary: #A0A0AB;
+  --gtcx-text-tertiary: #71717A;
+  --gtcx-text-muted: #52525B;
+  --gtcx-text-inverse: #0E0E11;
+  --gtcx-bg-inverse: #EDEDF0;
+  --gtcx-bg-sidebar: #0E0E13;
+  --gtcx-bg-header: #0E0E13;
+  --gtcx-border: rgba(255, 255, 255, 0.10);
+  --gtcx-border-light: rgba(255, 255, 255, 0.06);
+  --gtcx-border-secondary: rgba(255, 255, 255, 0.16);
+  --gtcx-border-focus: #00E5C8;
+  --gtcx-link: #00E5C8;
+  --gtcx-link-hover: #00D4B8;
+
+  /* ── Elevation Stack (§1.1) ─────────────────── */
+  --gtcx-bg-void: #08090A;
+  --gtcx-bg-surface: #111116;
+  --gtcx-bg-elevated: #191920;
+  --gtcx-bg-raised: #222229;
+  --gtcx-bg-overlay: #2A2A32;
+  --gtcx-bg-spotlight: #333340;
+
+  /* ── Border Tiers (§1.4) ────────────────────── */
+  --gtcx-border-subtle: rgba(255, 255, 255, 0.06);
+  --gtcx-border-default: rgba(255, 255, 255, 0.10);
+  --gtcx-border-emphasis: rgba(255, 255, 255, 0.16);
+
+  /* ── Accent States (§1.3) ────────────────────── */
+  --gtcx-accent-default: #00E5C8;
+  --gtcx-accent-hover: #00D4B8;
+  --gtcx-accent-active: #00BFA8;
+  --gtcx-accent-muted: rgba(0, 229, 200, 0.15);
+  --gtcx-accent-glow: rgba(0, 229, 200, 0.08);
+
+  /* ── Signal Colors (§1.3) ────────────────────── */
+  --gtcx-signal-green: #22C55E;
+  --gtcx-signal-red: #EF4444;
+  --gtcx-signal-amber: #F59E0B;
+  --gtcx-signal-blue: #3B82F6;
+  --gtcx-signal-purple: #A78BFA;
+
+  /* ── Radii (§3.1) ───────────────────────────── */
+  --gtcx-radius-component: 6px;
+  --gtcx-radius-card: 10px;
+  --gtcx-radius-button: 6px;
+  --gtcx-radius-input: 6px;
+  --gtcx-radius-tag: 4px;
+  --gtcx-radius-modal: 16px;
+  --gtcx-radius-avatar: 9999px;
+
+  /* ── Shadows (§3.2) ─────────────────────────── */
+  --gtcx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --gtcx-shadow-dropdown: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --gtcx-shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --gtcx-shadow-glow: 0 0 0 1px rgba(0, 229, 200, 0.08), 0 0 20px -4px rgba(0, 229, 200, 0.06);
+
+  /* ── Motion (§5) ────────────────────────────── */
+  --gtcx-motion-instant: 80ms;
+  --gtcx-motion-fast: 150ms;
+  --gtcx-motion-base: 220ms;
+  --gtcx-motion-slow: 320ms;
+  --gtcx-motion-deliberate: 500ms;
+  --gtcx-motion-ease-default: cubic-bezier(0.22, 1, 0.36, 1);
+  --gtcx-motion-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
+  --gtcx-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --gtcx-motion-ease-linear: linear;
+}

package/dist/chunk-5IDFVTYK.mjs

@@ -0,0 +1,25 @@
+// src/css.ts
+function camelToKebab(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function generateCSSVariables(tokens) {
+  const { colors, radii, shadows } = tokens;
+  const lines = [":root {"];
+  for (const [key, value] of Object.entries(colors)) {
+    lines.push(`  --gtcx-${camelToKebab(key)}: ${value};`);
+  }
+  lines.push("");
+  for (const [key, value] of Object.entries(radii)) {
+    lines.push(`  --gtcx-radius-${camelToKebab(key)}: ${value}px;`);
+  }
+  lines.push("");
+  for (const [key, value] of Object.entries(shadows)) {
+    lines.push(`  --gtcx-shadow-${camelToKebab(key)}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+
+export {
+  generateCSSVariables
+};

package/dist/chunk-FB6JVSW6.mjs

@@ -0,0 +1,83 @@
+// src/platforms/fifty-four.ts
+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
+};
+
+export {
+  fiftyFourColors,
+  fiftyFourRadii,
+  fiftyFourShadows,
+  fiftyFourPlatformTokens
+};

package/dist/css.d.mts

@@ -0,0 +1,44 @@
+/**
+ * @module css
+ *
+ * CSS custom property generator for design tokens.
+ *
+ * Converts semantic token JS objects into CSS custom property strings.
+ * This is the bridge between the JS token system and CSS-based consumers
+ * (Tailwind, vanilla CSS, etc.).
+ *
+ * Canonical spec: fifty-four/docs/specs/_project/theme-spec.md
+ *
+ * Usage:
+ * ```ts
+ * import { generateCSSVariables } from '@gtcx/tokens/css';
+ * import { fiftyFourPlatformTokens } from '@gtcx/tokens/platforms/fifty-four';
+ *
+ * const css = generateCSSVariables(fiftyFourPlatformTokens);
+ * // Returns: ":root { --gtcx-primary: #00E5C8; ... }"
+ * ```
+ */
+interface PlatformTokenColors {
+    [key: string]: string;
+}
+interface PlatformTokenRadii {
+    [key: string]: number;
+}
+interface PlatformTokenShadows {
+    [key: string]: string;
+}
+interface PlatformTokens {
+    colors: PlatformTokenColors;
+    radii: PlatformTokenRadii;
+    shadows: PlatformTokenShadows;
+}
+/**
+ * Generate a CSS string of `--gtcx-*` custom properties from a platform
+ * token override object.
+ *
+ * The output is a plain CSS `:root {}` block suitable for direct injection
+ * into a stylesheet or `<style>` tag.
+ */
+declare function generateCSSVariables(tokens: PlatformTokens): string;
+
+export { generateCSSVariables };

package/dist/css.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @module css
+ *
+ * CSS custom property generator for design tokens.
+ *
+ * Converts semantic token JS objects into CSS custom property strings.
+ * This is the bridge between the JS token system and CSS-based consumers
+ * (Tailwind, vanilla CSS, etc.).
+ *
+ * Canonical spec: fifty-four/docs/specs/_project/theme-spec.md
+ *
+ * Usage:
+ * ```ts
+ * import { generateCSSVariables } from '@gtcx/tokens/css';
+ * import { fiftyFourPlatformTokens } from '@gtcx/tokens/platforms/fifty-four';
+ *
+ * const css = generateCSSVariables(fiftyFourPlatformTokens);
+ * // Returns: ":root { --gtcx-primary: #00E5C8; ... }"
+ * ```
+ */
+interface PlatformTokenColors {
+    [key: string]: string;
+}
+interface PlatformTokenRadii {
+    [key: string]: number;
+}
+interface PlatformTokenShadows {
+    [key: string]: string;
+}
+interface PlatformTokens {
+    colors: PlatformTokenColors;
+    radii: PlatformTokenRadii;
+    shadows: PlatformTokenShadows;
+}
+/**
+ * Generate a CSS string of `--gtcx-*` custom properties from a platform
+ * token override object.
+ *
+ * The output is a plain CSS `:root {}` block suitable for direct injection
+ * into a stylesheet or `<style>` tag.
+ */
+declare function generateCSSVariables(tokens: PlatformTokens): string;
+
+export { generateCSSVariables };

package/dist/css.js

@@ -0,0 +1,49 @@
+"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/css.ts
+var css_exports = {};
+__export(css_exports, {
+  generateCSSVariables: () => generateCSSVariables
+});
+module.exports = __toCommonJS(css_exports);
+function camelToKebab(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function generateCSSVariables(tokens) {
+  const { colors, radii, shadows } = tokens;
+  const lines = [":root {"];
+  for (const [key, value] of Object.entries(colors)) {
+    lines.push(`  --gtcx-${camelToKebab(key)}: ${value};`);
+  }
+  lines.push("");
+  for (const [key, value] of Object.entries(radii)) {
+    lines.push(`  --gtcx-radius-${camelToKebab(key)}: ${value}px;`);
+  }
+  lines.push("");
+  for (const [key, value] of Object.entries(shadows)) {
+    lines.push(`  --gtcx-shadow-${camelToKebab(key)}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateCSSVariables
+});

package/dist/css.mjs

@@ -0,0 +1,6 @@
+import {
+  generateCSSVariables
+} from "./chunk-5IDFVTYK.mjs";
+export {
+  generateCSSVariables
+};