@customercity/tokens 0.2.2

package/core.css

@@ -0,0 +1,238 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ============================================================
+   Customer City Design System v1.0 — design tokens.
+   GENERATED FILE — do not edit by hand.
+   Token values are authored in tokens/*.json (DTCG format) and
+   compiled to these CSS variables by Style Dictionary:
+       pnpm tokens:build
+   Brand royal blue #1554FF · navy dark mode · Inter ·
+   violet -> purple -> pink agent identity.
+   ============================================================ */
+
+/* Core primitives — brand-neutral, shared by every brand. */
+:root {
+  --brand-50: #EEF3FF;
+  --brand-100: #DBE6FF;
+  --brand-200: #B8CDFF;
+  --brand-300: #8CB9FF;
+  --brand-400: #4D8BFF;
+  --brand-500: #1554FF;
+  --brand-600: #0052D2;
+  --brand-700: #0043AB;
+  --brand-800: #0A2F73;
+  --brand-900: #071731;
+  --neutral-50: #F6F8FB;
+  --neutral-100: #F0F3F8;
+  --neutral-200: #DBDCE0;
+  --neutral-300: #CDD2DF;
+  --neutral-400: #868B98;
+  --neutral-500: #5B6577;
+  --neutral-600: #4E5663;
+  --neutral-700: #38404E;
+  --neutral-800: #1E232C;
+  --neutral-900: #0E1626;
+  --green-100: #DFF4E5;
+  --green-500: #60C67C;
+  --green-700: #2E8B57;
+  --red-100: #F7E6EA;
+  --red-500: #FB4E6D;
+  --red-700: #C42A47;
+  --orange-100: #F8E6DF;
+  --orange-500: #FFA26D;
+  --orange-700: #D9691F;
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-popover: 1400;
+  --z-toast: 1500;
+  --z-tooltip: 1600;
+  --radius: 0.5rem;
+}
+
+/* ── Shadows ── Light mode (soft navy-tinted #1F2E52) */
+.card-shadow {
+  box-shadow: 0 1px 2px rgba(31,46,82,0.06), 0 1px 3px rgba(31,46,82,0.04);
+}
+.card-shadow-md {
+  box-shadow: 0 4px 24px rgba(31,46,82,0.08);
+}
+.card-shadow-lg {
+  box-shadow: 0 12px 32px rgba(31,46,82,0.14), 0 4px 8px rgba(31,46,82,0.06);
+}
+
+/* ── Shadows ── Dark mode (navy) */
+html.dark .card-shadow {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.40);
+}
+html.dark .card-shadow-md {
+  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
+}
+html.dark .card-shadow-lg {
+  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
+}
+
+/* Dark mode card border helper */
+html.dark .card-border {
+  border: 1px solid var(--border);
+}
+
+/* ── Agent card utilities — Violet → Purple → Pink ── */
+.agent-card {
+  background: var(--sparkle-light);
+  border: 1px solid var(--sparkle-border);
+}
+html.dark .agent-card {
+  background: var(--sparkle-light);
+  border: 1px solid var(--sparkle-border);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 0 24px rgba(118,55,255,0.18);
+}
+
+.agent-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.agent-shimmer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent 0%, rgba(170,0,255,0.45) 30%, rgba(118,55,255,0.45) 50%, rgba(213,0,249,0.45) 70%, transparent 100%);
+  background-size: 200% 100%;
+  animation: sparkle-shimmer 4s ease-in-out infinite;
+}
+html.dark .agent-shimmer::after {
+  background: linear-gradient(90deg, transparent 0%, rgba(194,77,255,0.6) 30%, rgba(157,107,255,0.55) 50%, rgba(232,102,251,0.55) 70%, transparent 100%);
+  background-size: 200% 100%;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-border-light: var(--border-light);
+  --color-ring: var(--ring);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-light: var(--brand-light);
+  --color-brand-lighter: var(--brand-lighter);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-navy: var(--navy);
+  --color-navy-light: var(--navy-light);
+  --color-green: var(--green);
+  --color-green-bg: var(--green-bg);
+  --color-red: var(--red);
+  --color-red-bg: var(--red-bg);
+  --color-orange: var(--orange);
+  --color-orange-bg: var(--orange-bg);
+  --color-sparkle: var(--sparkle);
+  --color-sparkle-bg: var(--sparkle-bg);
+  --color-sparkle-light: var(--sparkle-light);
+  --color-agent-card: var(--agent-card);
+  --color-sparkle-border: var(--sparkle-border);
+  --color-yellow: var(--yellow);
+  --color-yellow-bg: var(--yellow-bg);
+  --color-background-alt: var(--background-alt);
+  --color-mint: var(--mint);
+  --color-mint-bg: var(--mint-bg);
+  --color-sky: var(--sky);
+  --color-sky-bg: var(--sky-bg);
+  --color-violet: var(--violet);
+  --color-violet-bg: var(--violet-bg);
+  --color-purple: var(--purple);
+  --color-purple-bg: var(--purple-bg);
+  --color-pink: var(--pink);
+  --color-pink-bg: var(--pink-bg);
+  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", "Roboto Mono", "Menlo", monospace;
+}
+
+/* ── Animations ── */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes sparkle-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes sparkle-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes m-sparkle-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes score-glow {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.08); }
+}
+
+@keyframes status-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--accent) 25%, var(--border-light) 50%, var(--accent) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.sparkle-pulse {
+  animation: sparkle-pulse 3s ease-in-out infinite;
+}
+
+.score-glow {
+  animation: score-glow 4s ease-in-out infinite;
+}
+
+.status-pulse {
+  animation: status-pulse 2s ease-in-out infinite;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--muted);
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  -webkit-font-smoothing: antialiased;
+}

package/core.json

@@ -0,0 +1,40 @@
+{
+  "brand-50": "#EEF3FF",
+  "brand-100": "#DBE6FF",
+  "brand-200": "#B8CDFF",
+  "brand-300": "#8CB9FF",
+  "brand-400": "#4D8BFF",
+  "brand-500": "#1554FF",
+  "brand-600": "#0052D2",
+  "brand-700": "#0043AB",
+  "brand-800": "#0A2F73",
+  "brand-900": "#071731",
+  "neutral-50": "#F6F8FB",
+  "neutral-100": "#F0F3F8",
+  "neutral-200": "#DBDCE0",
+  "neutral-300": "#CDD2DF",
+  "neutral-400": "#868B98",
+  "neutral-500": "#5B6577",
+  "neutral-600": "#4E5663",
+  "neutral-700": "#38404E",
+  "neutral-800": "#1E232C",
+  "neutral-900": "#0E1626",
+  "green-100": "#DFF4E5",
+  "green-500": "#60C67C",
+  "green-700": "#2E8B57",
+  "red-100": "#F7E6EA",
+  "red-500": "#FB4E6D",
+  "red-700": "#C42A47",
+  "orange-100": "#F8E6DF",
+  "orange-500": "#FFA26D",
+  "orange-700": "#D9691F",
+  "z-base": 0,
+  "z-dropdown": 1000,
+  "z-sticky": 1100,
+  "z-overlay": 1200,
+  "z-modal": 1300,
+  "z-popover": 1400,
+  "z-toast": 1500,
+  "z-tooltip": 1600,
+  "radius": "0.5rem"
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@customercity/tokens",
+  "version": "0.2.2",
+  "type": "module",
+  "description": "Customer City design tokens — multi-brand. DTCG source compiled by Style Dictionary to CSS (Tailwind v4 @theme), JS, and JSON. core.css = shared primitives; brands/<brand>.css = per-brand semantic colors scoped under [data-brand]. Consumed across web, mobile, email, and diagrams.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CustomerCity/design-system.git",
+    "directory": "packages/tokens"
+  },
+  "exports": {
+    ".": {
+      "types": "./tokens.d.ts",
+      "import": "./tokens.js",
+      "default": "./tokens.js"
+    },
+    "./package.json": "./package.json",
+    "./tokens.css": "./tokens.css",
+    "./tokens.json": "./tokens.json",
+    "./core.css": "./core.css",
+    "./core.json": "./core.json",
+    "./brands/customercity.css": "./brands/customercity.css",
+    "./brands/customercity.json": "./brands/customercity.json",
+    "./brands/databrite.css": "./brands/databrite.css",
+    "./brands/databrite.json": "./brands/databrite.json",
+    "./assets/*": "./assets/*"
+  },
+  "main": "./tokens.js",
+  "types": "./tokens.d.ts",
+  "files": [
+    "src",
+    "build.mjs",
+    "tokens.css",
+    "tokens.js",
+    "tokens.json",
+    "tokens.d.ts",
+    "core.css",
+    "core.json",
+    "brands",
+    "assets"
+  ],
+  "devDependencies": {
+    "style-dictionary": "5.5.0"
+  },
+  "scripts": {
+    "build": "node build.mjs"
+  }
+}

package/src/brands/customercity.json

@@ -0,0 +1,94 @@
+{
+  "customercity": {
+    "light": {
+      "$type": "color",
+      "brand": { "$value": "#1554FF" },
+      "brand-hover": { "$value": "#0052D2" },
+      "brand-light": { "$value": "rgba(21,84,255,0.08)" },
+      "brand-lighter": { "$value": "#F4F9FF" },
+      "brand-subtle": { "$value": "#8CB9FF" },
+      "background": { "$value": "#F0F3F8" },
+      "background-alt": { "$value": "#E6EAF2" },
+      "foreground": { "$value": "#1E232C" },
+      "card": { "$value": "#FFFFFF" },
+      "card-foreground": { "$value": "#1E232C" },
+      "muted": { "$value": "#4E5663" },
+      "muted-foreground": { "$value": "#868B98" },
+      "border": { "$value": "#CDD2DF" },
+      "border-light": { "$value": "#DBDCE0" },
+      "ring": { "$value": "#1554FF" },
+      "accent": { "$value": "#E8EBF1" },
+      "accent-foreground": { "$value": "#1E232C" },
+      "navy": { "$value": "#071731" },
+      "navy-light": { "$value": "#0E254A" },
+      "green": { "$value": "#60C67C" },
+      "green-bg": { "$value": "#DFF4E5" },
+      "red": { "$value": "#FB4E6D" },
+      "red-bg": { "$value": "#F7E6EA" },
+      "orange": { "$value": "#FFA26D" },
+      "orange-bg": { "$value": "#F8E6DF" },
+      "yellow": { "$value": "#FFE600" },
+      "yellow-bg": { "$value": "#FFFBD2" },
+      "mint": { "$value": "#00CEDB" },
+      "mint-bg": { "$value": "#E1F9FF" },
+      "sky": { "$value": "#29B6F6" },
+      "sky-bg": { "$value": "#E3F4FF" },
+      "violet": { "$value": "#AA00FF" },
+      "violet-bg": { "$value": "#EEDEFB" },
+      "purple": { "$value": "#7637FF" },
+      "purple-bg": { "$value": "#E9E4FB" },
+      "pink": { "$value": "#D500F9" },
+      "pink-bg": { "$value": "#F3DEFB" },
+      "sparkle": { "$value": "#7637FF" },
+      "sparkle-bg": { "$value": "#E9E4FB" },
+      "sparkle-light": { "$value": "#F4EEFE" },
+      "agent-card": { "$value": "#F4EEFE" },
+      "sparkle-border": { "$value": "rgba(118,55,255,0.20)" }
+    },
+    "dark": {
+      "$type": "color",
+      "brand": { "$value": "#4D8BFF" },
+      "brand-hover": { "$value": "#6FA3FF" },
+      "brand-light": { "$value": "rgba(77,139,255,0.16)" },
+      "brand-lighter": { "$value": "#14254A" },
+      "brand-subtle": { "$value": "#8CB9FF" },
+      "background": { "$value": "#071731" },
+      "background-alt": { "$value": "#0A1C3C" },
+      "foreground": { "$value": "#EAEEF5" },
+      "card": { "$value": "#0E254A" },
+      "card-foreground": { "$value": "#EAEEF5" },
+      "muted": { "$value": "#A9B4C6" },
+      "muted-foreground": { "$value": "#6E7C93" },
+      "border": { "$value": "#1C3358" },
+      "border-light": { "$value": "#15294A" },
+      "ring": { "$value": "#4D8BFF" },
+      "accent": { "$value": "#16294A" },
+      "accent-foreground": { "$value": "#EAEEF5" },
+      "navy": { "$value": "#040E20" },
+      "navy-light": { "$value": "#071731" },
+      "green": { "$value": "#7BD89A" },
+      "green-bg": { "$value": "rgba(96,198,124,0.16)" },
+      "red": { "$value": "#FF7B92" },
+      "red-bg": { "$value": "rgba(251,78,109,0.16)" },
+      "orange": { "$value": "#FFB98F" },
+      "orange-bg": { "$value": "rgba(255,162,109,0.16)" },
+      "yellow": { "$value": "#FFEF66" },
+      "yellow-bg": { "$value": "rgba(255,230,0,0.14)" },
+      "mint": { "$value": "#4DDDE8" },
+      "mint-bg": { "$value": "rgba(0,206,219,0.16)" },
+      "sky": { "$value": "#5FC8F8" },
+      "sky-bg": { "$value": "rgba(41,182,246,0.16)" },
+      "violet": { "$value": "#C24DFF" },
+      "violet-bg": { "$value": "rgba(170,0,255,0.18)" },
+      "purple": { "$value": "#9D6BFF" },
+      "purple-bg": { "$value": "rgba(118,55,255,0.18)" },
+      "pink": { "$value": "#E866FB" },
+      "pink-bg": { "$value": "rgba(213,0,249,0.18)" },
+      "sparkle": { "$value": "#9D6BFF" },
+      "sparkle-bg": { "$value": "rgba(118,55,255,0.18)" },
+      "sparkle-light": { "$value": "#1C1A3D" },
+      "agent-card": { "$value": "#1C1A3D" },
+      "sparkle-border": { "$value": "rgba(157,107,255,0.30)" }
+    }
+  }
+}

package/src/brands/databrite.json

@@ -0,0 +1,262 @@
+{
+  "databrite": {
+    "light": {
+      "$type": "color",
+      "brand": {
+        "$value": "#1554FF"
+      },
+      "brand-hover": {
+        "$value": "#0052D2"
+      },
+      "brand-light": {
+        "$value": "rgba(21,84,255,0.08)"
+      },
+      "brand-lighter": {
+        "$value": "#F4F9FF"
+      },
+      "brand-subtle": {
+        "$value": "#8CB9FF"
+      },
+      "background": {
+        "$value": "#F0F3F8"
+      },
+      "background-alt": {
+        "$value": "#E6EAF2"
+      },
+      "foreground": {
+        "$value": "#1E232C"
+      },
+      "card": {
+        "$value": "#FFFFFF"
+      },
+      "card-foreground": {
+        "$value": "#1E232C"
+      },
+      "muted": {
+        "$value": "#4E5663"
+      },
+      "muted-foreground": {
+        "$value": "#868B98"
+      },
+      "border": {
+        "$value": "#CDD2DF"
+      },
+      "border-light": {
+        "$value": "#DBDCE0"
+      },
+      "ring": {
+        "$value": "#1554FF"
+      },
+      "accent": {
+        "$value": "#E8EBF1"
+      },
+      "accent-foreground": {
+        "$value": "#1E232C"
+      },
+      "navy": {
+        "$value": "#071731"
+      },
+      "navy-light": {
+        "$value": "#0E254A"
+      },
+      "green": {
+        "$value": "#60C67C"
+      },
+      "green-bg": {
+        "$value": "#DFF4E5"
+      },
+      "red": {
+        "$value": "#FB4E6D"
+      },
+      "red-bg": {
+        "$value": "#F7E6EA"
+      },
+      "orange": {
+        "$value": "#FFA26D"
+      },
+      "orange-bg": {
+        "$value": "#F8E6DF"
+      },
+      "yellow": {
+        "$value": "#FFE600"
+      },
+      "yellow-bg": {
+        "$value": "#FFFBD2"
+      },
+      "mint": {
+        "$value": "#00CEDB"
+      },
+      "mint-bg": {
+        "$value": "#E1F9FF"
+      },
+      "sky": {
+        "$value": "#29B6F6"
+      },
+      "sky-bg": {
+        "$value": "#E3F4FF"
+      },
+      "violet": {
+        "$value": "#AA00FF"
+      },
+      "violet-bg": {
+        "$value": "#EEDEFB"
+      },
+      "purple": {
+        "$value": "#7637FF"
+      },
+      "purple-bg": {
+        "$value": "#E9E4FB"
+      },
+      "pink": {
+        "$value": "#D500F9"
+      },
+      "pink-bg": {
+        "$value": "#F3DEFB"
+      },
+      "sparkle": {
+        "$value": "#7637FF"
+      },
+      "sparkle-bg": {
+        "$value": "#E9E4FB"
+      },
+      "sparkle-light": {
+        "$value": "#F4EEFE"
+      },
+      "agent-card": {
+        "$value": "#F4EEFE"
+      },
+      "sparkle-border": {
+        "$value": "rgba(118,55,255,0.20)"
+      }
+    },
+    "dark": {
+      "$type": "color",
+      "brand": {
+        "$value": "#4D8BFF"
+      },
+      "brand-hover": {
+        "$value": "#6FA3FF"
+      },
+      "brand-light": {
+        "$value": "rgba(77,139,255,0.16)"
+      },
+      "brand-lighter": {
+        "$value": "#14254A"
+      },
+      "brand-subtle": {
+        "$value": "#8CB9FF"
+      },
+      "background": {
+        "$value": "#071731"
+      },
+      "background-alt": {
+        "$value": "#0A1C3C"
+      },
+      "foreground": {
+        "$value": "#EAEEF5"
+      },
+      "card": {
+        "$value": "#0E254A"
+      },
+      "card-foreground": {
+        "$value": "#EAEEF5"
+      },
+      "muted": {
+        "$value": "#A9B4C6"
+      },
+      "muted-foreground": {
+        "$value": "#6E7C93"
+      },
+      "border": {
+        "$value": "#1C3358"
+      },
+      "border-light": {
+        "$value": "#15294A"
+      },
+      "ring": {
+        "$value": "#4D8BFF"
+      },
+      "accent": {
+        "$value": "#16294A"
+      },
+      "accent-foreground": {
+        "$value": "#EAEEF5"
+      },
+      "navy": {
+        "$value": "#040E20"
+      },
+      "navy-light": {
+        "$value": "#071731"
+      },
+      "green": {
+        "$value": "#7BD89A"
+      },
+      "green-bg": {
+        "$value": "rgba(96,198,124,0.16)"
+      },
+      "red": {
+        "$value": "#FF7B92"
+      },
+      "red-bg": {
+        "$value": "rgba(251,78,109,0.16)"
+      },
+      "orange": {
+        "$value": "#FFB98F"
+      },
+      "orange-bg": {
+        "$value": "rgba(255,162,109,0.16)"
+      },
+      "yellow": {
+        "$value": "#FFEF66"
+      },
+      "yellow-bg": {
+        "$value": "rgba(255,230,0,0.14)"
+      },
+      "mint": {
+        "$value": "#4DDDE8"
+      },
+      "mint-bg": {
+        "$value": "rgba(0,206,219,0.16)"
+      },
+      "sky": {
+        "$value": "#5FC8F8"
+      },
+      "sky-bg": {
+        "$value": "rgba(41,182,246,0.16)"
+      },
+      "violet": {
+        "$value": "#C24DFF"
+      },
+      "violet-bg": {
+        "$value": "rgba(170,0,255,0.18)"
+      },
+      "purple": {
+        "$value": "#9D6BFF"
+      },
+      "purple-bg": {
+        "$value": "rgba(118,55,255,0.18)"
+      },
+      "pink": {
+        "$value": "#E866FB"
+      },
+      "pink-bg": {
+        "$value": "rgba(213,0,249,0.18)"
+      },
+      "sparkle": {
+        "$value": "#9D6BFF"
+      },
+      "sparkle-bg": {
+        "$value": "rgba(118,55,255,0.18)"
+      },
+      "sparkle-light": {
+        "$value": "#1C1A3D"
+      },
+      "agent-card": {
+        "$value": "#1C1A3D"
+      },
+      "sparkle-border": {
+        "$value": "rgba(157,107,255,0.30)"
+      }
+    }
+  }
+}