Upload 6 files

ui_kits/chan-compass/tokens/base.css

@@ -0,0 +1,58 @@
+/* ============================================================
+   BASE — Chan Compass · Spectrum 2
+   Light, opinionated element defaults. Body uses the canvas
+   background and UI type. Helper classes for the few primitives
+   that aren't worth a React component.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--canvas);
+  color: var(--text-body);
+  font: var(--type-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  margin: 0;
+  color: var(--text-heading);
+  letter-spacing: var(--letter-spacing-heading);
+  text-wrap: balance;
+}
+h1 { font: var(--type-h1); }
+h2 { font: var(--type-h2); }
+h3 { font: var(--type-h3); letter-spacing: 0; }
+h4 { font: var(--type-h4); letter-spacing: 0; }
+
+p { margin: 0; text-wrap: pretty; }
+
+a { color: var(--accent-text); text-decoration: none; }
+a:hover { text-decoration: underline; text-underline-offset: 2px; }
+
+code, kbd, samp { font-family: var(--font-code); font-size: 0.92em; }
+
+::selection { background: var(--accent-subtle); }
+
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+/* ---- Eyebrow / overline ---- */
+.s2-eyebrow {
+  font: var(--font-weight-bold) var(--font-size-50)/1.2 var(--font-sans);
+  letter-spacing: var(--letter-spacing-caps);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* ---- Hairline divider ---- */
+.s2-divider {
+  border: none;
+  border-top: var(--border-width-100) solid var(--border-hairline);
+  margin: var(--space-300) 0;
+}

ui_kits/chan-compass/tokens/colors.css

@@ -0,0 +1,148 @@
+/* ============================================================
+   COLOR — Chan Compass · Spectrum 2
+   Two layers:
+     1. PRIMITIVES  — the raw Spectrum 2 scales (--s2-gray-100, --s2-blue-900…)
+     2. SEMANTICS   — purpose-named aliases the UI references (--text-body,
+                      --surface-card, --accent…)
+   Always consume semantics in components; reach for a primitive only
+   when no semantic fits. Light theme is the default; .s2-dark flips the
+   semantic layer (primitives are not re-pointed here for simplicity).
+   ============================================================ */
+
+:root {
+  /* ---- Gray (light) ---- */
+  --s2-gray-25:  #ffffff;
+  --s2-gray-50:  #f8f8f8;
+  --s2-gray-75:  #f3f3f3;
+  --s2-gray-100: #e6e6e6;
+  --s2-gray-200: #d5d5d5;
+  --s2-gray-300: #b1b1b1;
+  --s2-gray-400: #909090;
+  --s2-gray-500: #6d6d6d;
+  --s2-gray-600: #464646;
+  --s2-gray-700: #292929;
+  --s2-gray-800: #1b1b1b;
+  --s2-gray-900: #000000;
+
+  /* ---- Blue (accent family) ---- */
+  --s2-blue-100:  #e0f2ff;
+  --s2-blue-200:  #cae8ff;
+  --s2-blue-300:  #98cbfe;
+  --s2-blue-400:  #6fb7fb;
+  --s2-blue-500:  #4ba0ec;
+  --s2-blue-600:  #2c84e0;
+  --s2-blue-700:  #1473e6;
+  --s2-blue-800:  #0a6fd6;
+  --s2-blue-900:  #0265dc;   /* accent default */
+  --s2-blue-1000: #0054b6;   /* accent hover   */
+  --s2-blue-1100: #00418f;   /* accent down    */
+
+  /* ---- Green (positive) ---- */
+  --s2-green-100:  #ebf9ee;
+  --s2-green-400:  #6cc788;
+  --s2-green-700:  #15924a;
+  --s2-green-900:  #007a39;  /* positive default */
+  --s2-green-1000: #006d31;
+  --s2-green-1100: #00601f;
+
+  /* ---- Red (negative) ---- */
+  --s2-red-100:  #ffefef;
+  --s2-red-400:  #ff9b88;
+  --s2-red-700:  #e34850;
+  --s2-red-900:  #d7373f;    /* negative default */
+  --s2-red-1000: #c0272d;
+  --s2-red-1100: #a01a1f;
+
+  /* ---- Orange (notice) ---- */
+  --s2-orange-100:  #fdf0e1;
+  --s2-orange-400:  #f8af5a;
+  --s2-orange-700:  #cb6f10;
+  --s2-orange-900:  #b25309;  /* notice default */
+  --s2-orange-1000: #99490b;
+
+  /* ---- Indigo (informative accent / charts) ---- */
+  --s2-indigo-700: #5258e4;
+  --s2-indigo-900: #3d43d0;
+
+  /* ---- Purple (decorative / hero gradient stop) ---- */
+  --s2-purple-700: #8c42d6;
+  --s2-purple-900: #7326d3;
+
+  /* ============================================================
+     SEMANTIC ALIASES — what components actually reference
+     ============================================================ */
+
+  /* Surfaces & framing (Spectrum 2 background layering) */
+  --canvas:          var(--s2-gray-50);   /* app background        */
+  --surface-card:    var(--s2-gray-25);   /* cards, panels         */
+  --surface-elevated:var(--s2-gray-25);   /* popovers, menus       */
+  --surface-subtle:  var(--s2-gray-75);   /* table head, wells     */
+  --surface-sunken:  var(--s2-gray-75);   /* inset fields          */
+
+  /* Text */
+  --text-heading:    var(--s2-gray-800);
+  --text-body:       var(--s2-gray-700);
+  --text-secondary:  var(--s2-gray-600);
+  --text-muted:      var(--s2-gray-500);
+  --text-disabled:   var(--s2-gray-400);
+  --text-on-accent:  #ffffff;
+
+  /* Borders & dividers */
+  --border-hairline: var(--s2-gray-100);
+  --border-default:  var(--s2-gray-200);
+  --border-strong:   var(--s2-gray-300);
+  --border-field:    var(--s2-gray-300);
+
+  /* Accent (Spectrum blue) */
+  --accent:          var(--s2-blue-900);
+  --accent-hover:    var(--s2-blue-1000);
+  --accent-down:     var(--s2-blue-1100);
+  --accent-subtle:   var(--s2-blue-100);
+  --accent-text:     var(--s2-blue-1000);
+
+  /* Semantic status */
+  --positive:        var(--s2-green-900);
+  --positive-hover:  var(--s2-green-1000);
+  --positive-subtle: var(--s2-green-100);
+  --negative:        var(--s2-red-900);
+  --negative-hover:  var(--s2-red-1000);
+  --negative-subtle: var(--s2-red-100);
+  --notice:          var(--s2-orange-900);
+  --notice-subtle:   var(--s2-orange-100);
+  --informative:     var(--s2-blue-900);
+  --informative-subtle: var(--s2-blue-100);
+
+  /* Focus ring */
+  --focus-ring:      var(--s2-blue-900);
+
+  /* Market direction (this product's domain colors) */
+  --up:              var(--s2-green-900);   /* gains / BUY  */
+  --down:            var(--s2-red-900);     /* losses / SELL */
+  --flat:            var(--s2-gray-500);    /* HOLD / WAIT  */
+}
+
+/* ---- Dark theme: flip the semantic layer only ---- */
+.s2-dark {
+  --canvas:          #1d1d1d;
+  --surface-card:    #262626;
+  --surface-elevated:#2c2c2c;
+  --surface-subtle:  #222222;
+  --surface-sunken:  #1a1a1a;
+
+  --text-heading:    #f2f2f2;
+  --text-body:       #e0e0e0;
+  --text-secondary:  #b8b8b8;
+  --text-muted:      #8f8f8f;
+  --text-disabled:   #6a6a6a;
+
+  --border-hairline: #383838;
+  --border-default:  #4a4a4a;
+  --border-strong:   #5e5e5e;
+  --border-field:    #5e5e5e;
+
+  --accent:          #2680eb;
+  --accent-hover:    #4ba0ec;
+  --accent-down:     #6fb7fb;
+  --accent-subtle:   #1a3a5c;
+  --accent-text:     #6fb7fb;
+}

ui_kits/chan-compass/tokens/elevation.css

@@ -0,0 +1,35 @@
+/* ============================================================
+   ELEVATION & MOTION — Chan Compass · Spectrum 2
+   Soft, low-spread drop shadows; never heavy. Spectrum easing curves.
+   ============================================================ */
+
+:root {
+  /* ---- Drop shadows (Spectrum 2 elevation) ---- */
+  --shadow-flat:      none;
+  --shadow-raised:    0 1px 3px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
+  --shadow-elevated:  0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
+  --shadow-emphasized:0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
+  --shadow-dragged:   0 12px 32px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.10);
+
+  /* Accent-tinted glow (used on AI / focused panels) */
+  --shadow-accent:    0 2px 12px rgba(2,101,220,.12);
+
+  /* ---- Focus ring ---- */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
+  /* ---- Motion ---- */
+  --ease-default: cubic-bezier(0.45, 0, 0.4, 1);  /* @kind other */
+  --ease-in:      cubic-bezier(0.5, 0, 1, 1);      /* @kind other */
+  --ease-out:     cubic-bezier(0, 0, 0.4, 1);      /* @kind other */
+  --ease-in-out:  cubic-bezier(0.45, 0, 0.4, 1);   /* @kind other */
+
+  --duration-fast:    130ms;  /* @kind other */
+  --duration-default: 160ms;  /* @kind other */
+  --duration-slow:    220ms;  /* @kind other */
+
+  --transition-default: all var(--duration-default) var(--ease-default);
+  --transition-colors:  color var(--duration-fast) var(--ease-default),
+                        background-color var(--duration-fast) var(--ease-default),
+                        border-color var(--duration-fast) var(--ease-default);
+}

ui_kits/chan-compass/tokens/fonts.css

@@ -0,0 +1,12 @@
+/* ============================================================
+   FONTS — Chan Compass · Spectrum 2
+   Adobe Clean (Spectrum's UI typeface) is proprietary, so this
+   system substitutes Adobe's own open-source families:
+     · Source Sans 3   → UI / headings   (stands in for Adobe Clean)
+     · Source Serif 4  → editorial serif (stands in for Adobe Clean Serif)
+     · Source Code Pro → mono / code     (Spectrum's real code font)
+   Loaded from Google Fonts. If you have licensed Adobe Clean,
+   swap the @font-face stack and the families resolve automatically.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500;600&display=swap');

ui_kits/chan-compass/tokens/spacing.css

@@ -0,0 +1,46 @@
+/* ============================================================
+   SPACING & SIZING — Chan Compass · Spectrum 2
+   Spectrum 2 spacing scale (px): 0 2 4 8 12 16 20 24 28 32 40 48 64 80 96.
+   8px is the base rhythm. Padding uses px; layout gaps reuse the same scale.
+   ============================================================ */
+
+:root {
+  --space-0:    0;
+  --space-50:   2px;
+  --space-75:   4px;
+  --space-100:  8px;    /* base unit */
+  --space-150:  12px;
+  --space-200:  16px;
+  --space-250:  20px;
+  --space-300:  24px;
+  --space-400:  32px;
+  --space-500:  40px;
+  --space-600:  48px;
+  --space-700:  64px;
+  --space-800:  80px;
+  --space-900:  96px;
+
+  /* ---- Corner radii (Spectrum 2) ---- */
+  --radius-none:    0;
+  --radius-sm:      4px;    /* chips, small controls   */
+  --radius-default: 8px;    /* inputs, buttons (square)*/
+  --radius-lg:      10px;   /* nested cards            */
+  --radius-xl:      16px;   /* cards, panels          */
+  --radius-2xl:     20px;   /* hero, large surfaces   */
+  --radius-full:    9999px; /* pills, avatars         */
+
+  /* ---- Border widths ---- */
+  --border-width-100: 1px;
+  --border-width-200: 2px;
+  --border-width-400: 4px;
+
+  /* ---- Control heights (medium scale) ---- */
+  --control-height-sm: 28px;
+  --control-height-md: 32px;
+  --control-height-lg: 40px;
+
+  /* ---- Layout ---- */
+  --container-max: 1280px;
+  --field-radius:  var(--radius-default);
+  --card-radius:   var(--radius-xl);
+}

ui_kits/chan-compass/tokens/typography.css

@@ -0,0 +1,61 @@
+/* ============================================================
+   TYPOGRAPHY — Chan Compass · Spectrum 2
+   Spectrum 2 desktop UI base = 14px, modular scale ratio 1.125.
+   Three families: sans (UI/headings), serif (editorial), code (mono).
+   ============================================================ */
+
+:root {
+  /* ---- Families ---- */
+  --font-sans: 'Source Sans 3', 'Adobe Clean', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-serif: 'Source Serif 4', 'Adobe Clean Serif', Georgia, 'Times New Roman', serif;
+  --font-code: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
+
+  /* ---- Type scale (ratio 1.125, base 14px) ---- */
+  --font-size-50:   11px;
+  --font-size-75:   12px;
+  --font-size-100:  14px;   /* UI base */
+  --font-size-200:  16px;
+  --font-size-300:  18px;
+  --font-size-400:  20px;
+  --font-size-500:  22px;
+  --font-size-600:  25px;
+  --font-size-700:  28px;
+  --font-size-800:  32px;
+  --font-size-900:  36px;
+  --font-size-1000: 40px;
+  --font-size-1100: 45px;
+  --font-size-1200: 50px;
+
+  /* ---- Weights (Source Sans 3 axis) ---- */
+  --font-weight-regular:  400;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
+  --font-weight-black:    800;
+
+  /* ---- Line heights ---- */
+  --line-height-ui:      1.3;   /* UI components, tight        */
+  --line-height-heading: 1.15;  /* large display headings      */
+  --line-height-body:    1.5;   /* paragraphs, spacious        */
+  --line-height-code:    1.45;
+
+  /* ---- Letter spacing ---- */
+  --letter-spacing-heading: -0.015em;  /* Spectrum tightens large type */
+  --letter-spacing-ui:      0;
+  --letter-spacing-caps:    0.06em;     /* eyebrows / overlines         */
+
+  /* ============================================================
+     SEMANTIC TYPE ROLES
+     ============================================================ */
+  --type-display:  var(--font-weight-bold) var(--font-size-1000)/var(--line-height-heading) var(--font-sans);
+  --type-h1:       var(--font-weight-bold) var(--font-size-800)/var(--line-height-heading) var(--font-sans);
+  --type-h2:       var(--font-weight-bold) var(--font-size-600)/var(--line-height-heading) var(--font-sans);
+  --type-h3:       var(--font-weight-semibold) var(--font-size-400)/var(--line-height-ui) var(--font-sans);
+  --type-h4:       var(--font-weight-semibold) var(--font-size-300)/var(--line-height-ui) var(--font-sans);
+  --type-body-lg:  var(--font-weight-regular) var(--font-size-300)/var(--line-height-body) var(--font-sans);
+  --type-body:     var(--font-weight-regular) var(--font-size-100)/var(--line-height-body) var(--font-sans);
+  --type-ui:       var(--font-weight-regular) var(--font-size-100)/var(--line-height-ui) var(--font-sans);
+  --type-ui-bold:  var(--font-weight-semibold) var(--font-size-100)/var(--line-height-ui) var(--font-sans);
+  --type-detail:   var(--font-weight-regular) var(--font-size-75)/var(--line-height-ui) var(--font-sans);
+  --type-code:     var(--font-weight-regular) var(--font-size-75)/var(--line-height-code) var(--font-code);
+}