@digithings-ai/design 0.0.0-stage → 0.1.0

package/tokens.css

@@ -0,0 +1,268 @@
+@import "./palettes.css";
+/* digithings tokens. One source for colour, type, space and motion.
+   AA-checked colour values stay. History lives in git.
+   Palette overrides (data-palette) live in palettes.css and win by specificity. */
+
+:root {
+
+  --accent-digigraph:  #e5b765;
+  --accent-digiquant:  #3dd6c4;
+  --accent-research:      #6fbf94;
+  --accent-portfolio:     #4a8f7b;
+  --accent-execution:     #2f7a65;
+  --accent-digisearch: #5aa3c4;
+  --accent-digichat:   #e2708a;
+  --accent-digikey:    #d97a5a;
+  --accent-digitrace:  #6fa3a3;
+  --accent-digibot:   #b87840;
+  --accent-digibase:   #9ea0a5;
+  --accent-digistore:  #7b7fc7;
+  --accent-digilink:   #4fa39b;
+  --accent-digivoice:  #cf6bd6;
+  --accent-digillm:    #b8c95a;
+  --accent-digibook:   #d4c5a0;
+  --accent-digidev:    #6b9dff;
+  --accent-digivault:  #9d8fc9;
+
+  --accent: #ffffff;
+
+  --font-stack-sans: var(--font-sans-face, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-stack-mono: var(--font-mono-face, "Geist Mono"), ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Segoe UI Symbol", monospace;
+  --font-stack-display: var(--font-mono-face, "Geist Mono"), ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Segoe UI Symbol", monospace;
+
+  --font-family: var(--font-stack-sans);
+  --font-family-mono: var(--font-stack-mono);
+
+  --spacing-base: 1.5rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2rem;
+  --space-6: 3rem;
+  --space-7: 4rem;
+  --space-8: 6rem;
+  --space-9: 8rem;
+
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+
+}
+
+.accent-digigraph  { --accent: var(--accent-digigraph);  --on-accent: #06110f; }
+.accent-digiquant  { --accent: var(--accent-digiquant);  --on-accent: #06110f; }
+.accent-research      { --accent: var(--accent-research); }
+.accent-portfolio     { --accent: var(--accent-portfolio); }
+.accent-execution     { --accent: var(--accent-execution); }
+.accent-digisearch { --accent: var(--accent-digisearch); --on-accent: #06110f; }
+.accent-digichat   { --accent: var(--accent-digichat);   --on-accent: #06110f; }
+.accent-digikey    { --accent: var(--accent-digikey);    --on-accent: #06110f; }
+.accent-digitrace  { --accent: var(--accent-digitrace);  --on-accent: #06110f; }
+.accent-digibot   { --accent: var(--accent-digibot);   --on-accent: #06110f; }
+.accent-digibase   { --accent: var(--accent-digibase);   --on-accent: #06110f; }
+.accent-digistore  { --accent: var(--accent-digistore);  --on-accent: #06110f; }
+.accent-digilink   { --accent: var(--accent-digilink);   --on-accent: #06110f; }
+.accent-digivault  { --accent: var(--accent-digivault);  --on-accent: #06110f; }
+
+:root[data-theme="dark"] {
+
+  color-scheme: dark;
+  --bg:        #0A0E0C;
+  --surface:   #121417;
+  --surface-2: #171A1E;
+  --hair:      rgba(255, 255, 255, 0.09);
+  --hair-2:    rgba(255, 255, 255, 0.15);
+
+  --hair-strong: var(--hair-2);
+
+  --ink:       #ECEEF0;
+  --ink-soft:  #9AA0A6;
+  --ink-mute:  #7D8389;
+
+  --accent:      #3DD6C4;
+  --accent-weak: rgba(61, 214, 196, 0.14);
+  --on-accent:   #04201C;
+
+  --up:   var(--accent-digiquant);
+  --down: #E5533E;
+  --warn: #E0B341;
+
+  --chart-sma: #1EC98A;
+  --chart-ema: #5AD4F0;
+  --chart-vwap: #F0D44A;
+  --chart-bollinger: #B0DC3A;
+  --chart-bollinger-band: #F09238;
+  --chart-supertrend-up: #54DC62;
+  --chart-supertrend-down: #6A96F0;
+
+  --heat-ink: #FFFFFF;
+  --heat-ink-strong: #000000;
+
+  --danger: #E94959;
+
+  /* Semantic action/status roles. Deliberately not aliases of --accent or of
+     the money pair: a badge row (OPEN / ADD / TRIM / EXIT / CLOSED) has to
+     stay distinguishable, and --accent is already taken by live/selected.
+     Literal values come from the existing chart family — no new palette. */
+  --status-open:   #5AD4F0;
+  --status-add:    #1EC98A;
+  --status-trim:   #E0B341;
+  --status-exit:   #E5533E;
+  --status-closed: #9AA0A6;
+
+  --term-bg:   #08090B;
+  --term-ink:  #E7EAEC;
+  --term-mute: #7E858B;
+  --term-hair: rgba(255, 255, 255, 0.09);
+  --term-fill: rgba(255, 255, 255, 0.05);
+
+  --grain-opacity: 0.03;
+  --grain-blend: screen;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --bg:        #FBFBF9;
+  --surface:   #FFFFFF;
+  --surface-2: #F4F4F1;
+  --hair:      rgba(10, 15, 20, 0.10);
+  --hair-2:    rgba(10, 15, 20, 0.18);
+
+  --hair-strong: var(--hair-2);
+
+  --ink:       #14181B;
+  --ink-soft:  #5C636A;
+  --ink-mute:  #666C73;
+
+  --accent:      #0C7C71;
+  --accent-weak: rgba(12, 124, 113, 0.12);
+  --on-accent:   #FFFFFF;
+
+  --up:   #0C7C71;
+  --down: #B2452E;
+  --warn: #8F6220;
+
+  --chart-sma: #187E58;
+  --chart-ema: #1B798E;
+  --chart-vwap: #806E18;
+  --chart-bollinger: #5D7817;
+  --chart-bollinger-band: #A15F1F;
+  --chart-supertrend-up: #1A8025;
+  --chart-supertrend-down: #3369D8;
+
+  --danger: #C32232;
+
+  --status-open:   #1B798E;
+  --status-add:    #187E58;
+  --status-trim:   #8F6220;
+  --status-exit:   #B2452E;
+  --status-closed: #5C636A;
+
+  --heat-ink: var(--ink);
+  --heat-ink-strong: var(--ink);
+
+  --term-bg:   #F1F0EB;
+  --term-ink:  #1A1E22;
+
+  --term-mute: #5F656C;
+  --term-hair: rgba(10, 15, 20, 0.12);
+  --term-fill: rgba(10, 15, 20, 0.05);
+
+  --grain-opacity: 0.045;
+  --grain-blend: multiply;
+
+  --accent-digigraph:  #B27C1E;
+  --accent-digiquant:  #0E8C7F;
+  --accent-digisearch: #408FB3;
+  --accent-digitrace:  #5C8F8F;
+  --accent-digibase:   #84878D;
+  --accent-digivault:  #8D7DC0;
+  --accent-digilink:   #47938C;
+}
+
+:root[data-theme] {
+
+  --chart-candle-up: var(--up);
+  --chart-candle-down: var(--down);
+  --chart-volume-up: var(--up);
+  --chart-volume-down: var(--down);
+  --chart-grid: var(--hair);
+  --chart-axis: var(--ink-mute);
+
+  --accent-research: var(--ink);
+  --accent-portfolio: var(--ink);
+  --accent-execution: var(--ink);
+
+  --font-sans: var(--font-stack-mono);
+  --font-mono: var(--font-stack-mono);
+  --font-display: var(--font-stack-display);
+  --font-family: var(--font-sans);
+  --font-family-mono: var(--font-mono);
+
+  --wrap: 1180px;
+  --wrap-wide: 1280px;
+  --product-frame-w: 800px;
+  --gutter: clamp(1.25rem, 4vw, 3.25rem);
+
+  --r-sm: 0;
+  --r-md: 0;
+  --r-lg: 0;
+
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --section-y: clamp(4.5rem, 9vw, 8rem);
+  --section-y-tight: clamp(2.5rem, 5vw, 4rem);
+  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --duration-reveal: 0.6s;
+  --duration-hover: 0.18s;
+  --duration-copied: 1.5s;
+  --duration-build: 1.4s;
+
+  --type-display: clamp(2.75rem, 6vw, 5rem);
+  --type-hero: clamp(2rem, 4.5vw, 2.75rem);
+  --type-page-title: clamp(1.5rem, 3vw, 2rem);
+  --type-section-stand: clamp(1.6rem, 3.2vw, 2.5rem);
+  --type-section: 1.375rem;
+  --type-sub-label: 1rem;
+  --type-body: 1rem;
+  --type-meta: 0.75rem;
+  --tracking-meta: 0.08em;
+
+  --leading-prose: 1.8;
+  --leading-prose-narrow: 1.75;
+  --measure-prose: 72ch;
+
+  --frame-w: var(--wrap);
+  --page-pad: var(--gutter);
+  --page-step: var(--section-y);
+
+  /* Document scale. Terminal cells: 11, 13, 16, 20, 28, 40. */
+  --text-xs: 11px;
+  --text-sm: 13px;
+  --text-md: 16px;
+  --text-lg: 20px;
+  --text-xl: 28px;
+  --text-2xl: 40px;
+  --leading-tight: 1.2;
+  --leading: 1.55;
+  --rail: 240px;
+  --bar-app: 32px;
+  --bar-site: 56px;
+  --dur-fast: 120ms;
+  --dur: 240ms;
+  --dur-slow: 600ms;
+  /* Additive scales alongside the legacy --dur-* trio (which stays pinned to
+     motion.json). --dur-tap is the interaction-feedback budget (≤200ms);
+     --dur-arrive is the settled-state entrance, matching --duration-reveal. */
+  --dur-tap: 120ms;
+  --dur-arrive: 600ms;
+}
+
+@supports (transition-timing-function: linear(0, 1)) {
+  :root[data-theme] {
+    --ease: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
+    --ease-glide: var(--ease);
+  }
+}