/* ============================================================
Ted's Tools — colors_and_type.css
The canonical token file. Import this in any artifact:
Use the CSS vars below — never hardcode hex or px.
Primary mode: DARK. Light mode is provided but Ted's Tools
ship dark-first because the audience is developers in a
terminal-adjacent context.
============================================================ */
/* ---- Webfonts -------------------------------------------------
Inter Tight (display), Inter (body), JetBrains Mono (code/UI).
Loaded from Google Fonts CDN; offline notes in /fonts/README.md.
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ===============================================================
1. PALETTE — raw colors. Reference these only from the semantic
layer below.
=============================================================== */
:root {
/* Dark-mode surfaces — a hair warmer than GitHub's #0d1117. */
--plt-bg-900: #0c0f14; /* page background, deepest */
--plt-bg-800: #11151b; /* sunken / textarea */
--plt-bg-700: #161b22; /* default panel surface */
--plt-bg-600: #1c222b; /* panel hover / raised */
--plt-bg-500: #232a35; /* even higher elevation, modal */
--plt-bg-mark: #2c333a; /* title-highlight box (the brand move) */
--plt-line-700: #21262d; /* faint divider */
--plt-line-600: #30363d; /* default 1px panel border */
--plt-line-500: #484f58; /* heavy / focus rule */
--plt-fg-50: #f4f6f8; /* highest contrast text */
--plt-fg-100: #e6edf3; /* primary text */
--plt-fg-200: #b1bac4; /* secondary text */
--plt-fg-300: #7d8590; /* muted helper text */
--plt-fg-400: #6e7681; /* placeholder, disabled label */
--plt-fg-500: #484f58; /* lowest readable / icon ghost */
/* Light-mode surfaces — same hues, inverted lightness. */
--plt-paper-50: #ffffff;
--plt-paper-100: #f6f8fa; /* light page bg */
--plt-paper-200: #eaeef2;
--plt-paper-300: #d0d7de;
--plt-paper-400: #afb8c1;
/* Blue — primary action (Render, Analyze, Pick Script). */
--plt-blue-700: #1158c7;
--plt-blue-600: #1f6feb; /* primary button bg */
--plt-blue-500: #388bfd; /* hover */
--plt-blue-300: #79b8ff;
--plt-blue-100: rgba(31, 111, 235, 0.15);
/* Copper — secondary action, status-ready bullet, About footer. */
--plt-copper-700: #c25a1e;
--plt-copper-600: #f0883e; /* default copper accent */
--plt-copper-500: #ff9b51; /* hover */
--plt-copper-100: rgba(240, 136, 62, 0.14);
--plt-copper-bg-deep: #2a1408; /* status banner ground (dark) */
--plt-copper-bg-mid: #391d09;
--plt-copper-border: #5c2d10;
/* Status hues — moss/mustard/clay, dark-mode tuned. */
--plt-moss-600: #3fb950; /* success fg on banner */
--plt-moss-bg: #0d2818;
--plt-moss-border: #1f5436;
--plt-mustard-600: #d29922;
--plt-mustard-bg: #2c2410;
--plt-mustard-border: #614a1e;
--plt-clay-600: #f85149;
--plt-clay-bg: #2e1112;
--plt-clay-border: #67272a;
}
/* ===============================================================
2. SEMANTIC TOKENS — dark mode (default).
=============================================================== */
:root {
color-scheme: dark;
/* Surface */
--bg: var(--plt-bg-900);
--bg-sunken: var(--plt-bg-800);
--bg-raised: var(--plt-bg-700);
--bg-card: var(--plt-bg-700);
--bg-inset: var(--plt-bg-800);
--bg-hover: var(--plt-bg-600);
--bg-modal: var(--plt-bg-500);
--bg-overlay: rgba(0, 0, 0, 0.6);
--bg-mark: var(--plt-bg-mark); /* the title highlight box */
/* Foreground */
--fg: var(--plt-fg-100);
--fg-strong: var(--plt-fg-50);
--fg-2: var(--plt-fg-200);
--fg-muted: var(--plt-fg-300);
--fg-placeholder: var(--plt-fg-400);
--fg-ghost: var(--plt-fg-500);
--fg-on-accent: #ffffff; /* text on blue button */
--fg-on-copper: #1a0c04; /* text on filled copper (rare) */
/* Lines */
--rule: var(--plt-line-600);
--rule-soft: var(--plt-line-700);
--rule-strong: var(--plt-line-500);
/* Action — blue is primary, copper is secondary. */
--accent: var(--plt-blue-600);
--accent-hover: var(--plt-blue-500);
--accent-active: var(--plt-blue-700);
--accent-tint: var(--plt-blue-100);
--copper: var(--plt-copper-600);
--copper-hover: var(--plt-copper-500);
--copper-tint: var(--plt-copper-100);
--link: var(--plt-blue-300);
--link-hover: var(--plt-blue-500);
/* Status colors */
--success: var(--plt-moss-600);
--success-bg: var(--plt-moss-bg);
--success-border: var(--plt-moss-border);
--warn: var(--plt-mustard-600);
--warn-bg: var(--plt-mustard-bg);
--warn-border: var(--plt-mustard-border);
--error: var(--plt-clay-600);
--error-bg: var(--plt-clay-bg);
--error-border: var(--plt-clay-border);
/* Status-ready uses copper (this is the Ted's Tools default
"Ready — …" banner across every tool). */
--ready: var(--plt-copper-600);
--ready-bg: var(--plt-copper-bg-deep);
--ready-border: var(--plt-copper-border);
/* Selection */
--selection-bg: rgba(31, 111, 235, 0.35);
--selection-fg: var(--plt-fg-50);
/* ----------- Type families ----------- */
--font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', 'Menlo', monospace;
/* ----------- Type scale ----------- */
--fs-display: 42px; /* tool title — "QR Builder" */
--fs-h1: 32px;
--fs-h2: 22px;
--fs-h3: 17px; /* panel headers — "Options" */
--fs-h4: 14px;
--fs-body: 14px; /* default UI text */
--fs-body-lg: 15px; /* longer-form running text */
--fs-small: 13px;
--fs-micro: 12px;
--fs-eyebrow: 11px;
/* ----------- Line heights ----------- */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-loose: 1.65;
/* ----------- Letter spacing ----------- */
--tracking-tight: -0.02em; /* display + h1 */
--tracking-normal: -0.01em; /* h2/h3 */
--tracking-body: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.08em;
/* ----------- Weights ----------- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* ----------- Spacing scale (4-pt) ----------- */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 48px;
--s-9: 64px;
/* ----------- Radii — slightly softer than I previously set. ----------- */
--r-0: 0;
--r-1: 4px; /* small chips, kbd */
--r-2: 6px; /* buttons, inputs */
--r-3: 8px; /* panels, cards (default) */
--r-4: 12px; /* large surfaces / modal */
--r-pill: 999px; /* segment / category pill */
/* ----------- Borders ----------- */
--bw-1: 1px;
--bw-2: 2px;
--border: var(--bw-1) solid var(--rule);
--border-soft: var(--bw-1) solid var(--rule-soft);
--border-strong: var(--bw-1) solid var(--rule-strong);
/* ----------- Shadows — soft and short for dark mode. ----------- */
--shadow-0: none;
--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
--shadow-2: 0 1px 0 rgba(0, 0, 0, 0.3),
0 4px 12px -2px rgba(0, 0, 0, 0.5);
--shadow-3: 0 2px 0 rgba(0, 0, 0, 0.3),
0 12px 28px -6px rgba(0, 0, 0, 0.7);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);
--shadow-focus: 0 0 0 3px rgba(31, 111, 235, 0.35);
/* ----------- Motion ----------- */
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
--ease-stand: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-normal: 180ms;
--dur-slow: 280ms;
/* ----------- Layout ----------- */
--content-max: 72ch;
--tool-max: 1280px;
--gutter: var(--s-6);
--safe-padding: var(--s-7);
/* z stack */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-overlay: 1000;
--z-modal: 1100;
--z-toast: 1200;
}
/* ===============================================================
3. LIGHT MODE — provided for parity; not the default.
Activate explicitly with .
=============================================================== */
:root[data-theme='light'] {
color-scheme: light;
--bg: var(--plt-paper-100);
--bg-sunken: var(--plt-paper-200);
--bg-raised: var(--plt-paper-50);
--bg-card: var(--plt-paper-50);
--bg-inset: var(--plt-paper-100);
--bg-hover: var(--plt-paper-200);
--bg-modal: var(--plt-paper-50);
--bg-overlay: rgba(15, 18, 22, 0.55);
--bg-mark: #ebe5d4;
--fg: #1f2328;
--fg-strong: #0d1117;
--fg-2: #4a5159;
--fg-muted: #59636e;
--fg-placeholder: #8c959f;
--fg-ghost: #afb8c1;
--fg-on-accent: #ffffff;
--fg-on-copper: #ffffff;
--rule: var(--plt-paper-300);
--rule-soft: var(--plt-paper-200);
--rule-strong: var(--plt-paper-400);
--link: #0969da;
--link-hover: #0550ae;
--ready: #c25a1e;
--ready-bg: #fff1e5;
--ready-border: #ffd6b3;
--success-bg: #dafbe1;
--success-border:#b4f1c3;
--success: #1a7f37;
--warn-bg: #fff8c5;
--warn-border:#eac54f;
--warn: #9a6700;
--error-bg: #ffebe9;
--error-border:#ffc1ba;
--error: #cf222e;
--selection-bg: rgba(31, 111, 235, 0.20);
--selection-fg: #0d1117;
--shadow-1: 0 1px 0 rgba(31, 35, 40, 0.04);
--shadow-2: 0 1px 0 rgba(31, 35, 40, 0.04),
0 4px 12px -2px rgba(31, 35, 40, 0.08);
--shadow-3: 0 2px 0 rgba(31, 35, 40, 0.04),
0 12px 28px -6px rgba(31, 35, 40, 0.18);
--shadow-focus: 0 0 0 3px rgba(31, 111, 235, 0.30);
}
/* ===============================================================
4. RESET — just enough.
=============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
font-feature-settings: 'cv11', 'ss01', 'kern'; /* Inter niceties */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
/* ===============================================================
5. SEMANTIC TYPE — element-level defaults.
=============================================================== */
.t-display, .display {
font-family: var(--font-display);
font-weight: var(--fw-black);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-strong);
}
/* Title with the selection-highlight word — the signature pattern.
Mark up like: */
.t-tool-title {
font-family: var(--font-display);
font-weight: var(--fw-black);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-strong);
margin: 0;
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0;
}
.t-tool-title mark {
background: var(--bg-mark);
color: var(--fg-strong);
padding: 0 0.08em;
border-radius: 4px;
margin: 0 0.02em;
}
.t-tool-sub {
font-weight: var(--fw-medium);
color: var(--fg-muted);
margin-left: 0.3em;
}
h1, .t-h1 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-strong);
margin: 0 0 var(--s-5) 0;
}
h2, .t-h2 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-normal);
color: var(--fg-strong);
margin: var(--s-7) 0 var(--s-3) 0;
}
h3, .t-h3 {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-h3);
line-height: var(--lh-snug);
color: var(--fg-strong);
margin: var(--s-6) 0 var(--s-3) 0;
}
h4, .t-h4 {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-h4);
line-height: var(--lh-snug);
color: var(--fg-strong);
margin: var(--s-5) 0 var(--s-2) 0;
}
.t-eyebrow {
font-family: var(--font-body);
font-weight: var(--fw-medium);
font-size: var(--fs-eyebrow);
line-height: 1;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--fg-muted);
}
p, .t-body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-loose);
color: var(--fg);
margin: 0 0 var(--s-4) 0;
max-width: var(--content-max);
}
.t-small, small { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); }
.t-micro { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--fg-muted); }
.t-mono { font-family: var(--font-mono); }
.t-muted { color: var(--fg-muted); }
code, .t-code, samp {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--bg-inset);
padding: 0.08em 0.36em;
border: var(--bw-1) solid var(--rule-soft);
border-radius: var(--r-1);
color: var(--fg);
}
kbd {
font-family: var(--font-mono);
font-size: 0.85em;
font-weight: var(--fw-medium);
background: var(--bg-raised);
color: var(--fg-2);
border: var(--bw-1) solid var(--rule);
border-bottom-width: 2px;
border-radius: var(--r-1);
padding: 0.12em 0.48em;
display: inline-block;
}
pre {
font-family: var(--font-mono);
font-size: var(--fs-small);
line-height: var(--lh-normal);
background: var(--bg-inset);
border: var(--border);
border-radius: var(--r-3);
padding: var(--s-4);
overflow-x: auto;
color: var(--fg);
}
pre code { background: none; border: 0; padding: 0; }
a, .t-link {
color: var(--link);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-bottom-color: currentColor; }
hr {
border: 0;
border-top: var(--border-soft);
margin: var(--s-6) 0;
}
/* Tool tagline that sits under the title (e.g.
"Paste text or a URL, and get a clean QR code. Press ⌘+Enter to render.") */
.t-tagline {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--fg-2);
margin: var(--s-2) 0 var(--s-5) 0;
line-height: var(--lh-normal);
}
.t-tagline kbd { vertical-align: baseline; }
/* About-footer paragraph. Bold-prefix the tool name. */
.t-about {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--ready);
line-height: var(--lh-normal);
}
.t-about strong { color: var(--ready); font-weight: var(--fw-bold); }
/* ===============================================================
6. LOCAL @font-face FALLBACK — see /fonts/README.md.
=============================================================== */
/*
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900;
src: url('./fonts/InterVariable.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900;
src: url('./fonts/InterTight-Variable.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 900;
src: url('./fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-display: swap; }
*/