@customercity/tokens 0.2.2

package/src/core/ramps.json

@@ -0,0 +1,36 @@
+{
+  "core": {
+    "$type": "color",
+    "brand-50": { "$value": "#EEF3FF" },
+    "brand-100": { "$value": "#DBE6FF" },
+    "brand-200": { "$value": "#B8CDFF" },
+    "brand-300": { "$value": "#8CB9FF" },
+    "brand-400": { "$value": "#4D8BFF" },
+    "brand-500": { "$value": "#1554FF" },
+    "brand-600": { "$value": "#0052D2" },
+    "brand-700": { "$value": "#0043AB" },
+    "brand-800": { "$value": "#0A2F73" },
+    "brand-900": { "$value": "#071731" },
+
+    "neutral-50": { "$value": "#F6F8FB" },
+    "neutral-100": { "$value": "#F0F3F8" },
+    "neutral-200": { "$value": "#DBDCE0" },
+    "neutral-300": { "$value": "#CDD2DF" },
+    "neutral-400": { "$value": "#868B98" },
+    "neutral-500": { "$value": "#5B6577" },
+    "neutral-600": { "$value": "#4E5663" },
+    "neutral-700": { "$value": "#38404E" },
+    "neutral-800": { "$value": "#1E232C" },
+    "neutral-900": { "$value": "#0E1626" },
+
+    "green-100": { "$value": "#DFF4E5" },
+    "green-500": { "$value": "#60C67C" },
+    "green-700": { "$value": "#2E8B57" },
+    "red-100": { "$value": "#F7E6EA" },
+    "red-500": { "$value": "#FB4E6D" },
+    "red-700": { "$value": "#C42A47" },
+    "orange-100": { "$value": "#F8E6DF" },
+    "orange-500": { "$value": "#FFA26D" },
+    "orange-700": { "$value": "#D9691F" }
+  }
+}

package/src/core/scale.json

@@ -0,0 +1,14 @@
+{
+  "core": {
+    "z-base": { "$value": 0, "$type": "number" },
+    "z-dropdown": { "$value": 1000, "$type": "number" },
+    "z-sticky": { "$value": 1100, "$type": "number" },
+    "z-overlay": { "$value": 1200, "$type": "number" },
+    "z-modal": { "$value": 1300, "$type": "number" },
+    "z-popover": { "$value": 1400, "$type": "number" },
+    "z-toast": { "$value": 1500, "$type": "number" },
+    "z-tooltip": { "$value": 1600, "$type": "number" },
+
+    "radius": { "$value": "0.5rem", "$type": "dimension" }
+  }
+}

package/src/partials/epilogue.css

@@ -0,0 +1,182 @@
+/* ── 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/src/partials/preamble.css

@@ -0,0 +1,13 @@
+@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.
+   ============================================================ */

package/tokens.css

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

@@ -0,0 +1,4 @@
+// GENERATED by build.mjs -- do not edit by hand.
+export type TokenMap = Record<string, string>;
+export declare const tokens: { light: TokenMap; dark: TokenMap; global: TokenMap };
+export default tokens;