phosphor-ui 0.3.39-dev.0

package/dist/styles/tokens.css

@@ -0,0 +1,382 @@
+:root {
+  color-scheme: dark;
+
+  /* ── primary phosphor column ───────────────────────────── */
+  --phosphor: #2cff7a; /* primary tube glow */
+  --phosphor-bright: #b6ffce; /* paper-mint highlight */
+  --phosphor-dim: #1fb854; /* mid-green */
+  --phosphor-fade: #0a4d22; /* deep forest */
+
+  /* ── accent phosphor (slightly cooler / paler) ─────────── */
+  --magenta: #62ff9a; /* accent green (legacy var name) */
+  --magenta-bright: #d6ffe2;
+  --magenta-deep: #157a3b;
+  --magenta-fade: #06321a;
+
+  /* ── extra single-channel hues ─────────────────────────── */
+  --moss: #00cec8;
+  --spring: #00ff7f;
+  --rose: #88ffae;
+
+  /* ── tube body / surfaces ──────────────────────────────── */
+  --bg: #04140a; /* near-black w/ green undertone */
+  --bg-raise: #082416; /* raised surface */
+  --bg-deep: #010604; /* tube-back */
+  --ink: #d8ffe7; /* default text */
+
+  /* ── public semantic color aliases ───────────────────────
+     Prefer these --pho-* tokens in consumer apps. The legacy
+     raw variables above stay supported for existing sites. */
+  --pho-color-background: var(--bg);
+  --pho-color-background-raised: var(--bg-raise);
+  --pho-color-background-deep: var(--bg-deep);
+  --pho-color-text: var(--ink);
+  --pho-color-text-strong: var(--phosphor-bright);
+  --pho-color-text-muted: var(--phosphor-dim);
+  --pho-color-text-faint: var(--phosphor-fade);
+  --pho-color-primary: var(--phosphor);
+  --pho-color-primary-strong: var(--phosphor-bright);
+  --pho-color-primary-muted: var(--phosphor-dim);
+  --pho-color-primary-faint: var(--phosphor-fade);
+  --pho-color-accent: var(--magenta);
+  --pho-color-accent-strong: var(--magenta-bright);
+  --pho-color-accent-muted: var(--magenta-deep);
+  --pho-color-accent-faint: var(--magenta-fade);
+  --pho-color-info: var(--moss);
+  --pho-color-success: var(--spring);
+  --pho-color-highlight: var(--rose);
+  --pho-color-link: var(--pho-color-accent);
+  --pho-color-link-hover: var(--pho-color-accent-strong);
+  --pho-color-inverse: var(--bg);
+  --pho-color-selection-bg: var(--pho-color-primary);
+  --pho-color-selection-text: var(--pho-color-background);
+  --pho-color-surface: var(--pho-color-background-raised);
+  --pho-color-surface-deep: var(--pho-color-background-deep);
+  --pho-color-border: var(--pho-color-primary-faint);
+  --pho-color-border-strong: var(--pho-color-primary-muted);
+  --pho-color-danger: #ff6a6a;
+  --pho-color-danger-strong: #ff8a8a;
+  --pho-color-danger-emphasis: #ff3a3a;
+  --pho-color-danger-contrast: #1a0606;
+  --pho-color-danger-muted: rgba(255, 58, 58, 0.35);
+  --pho-color-danger-faint: rgba(255, 58, 58, 0.12);
+  --pho-color-danger-subtle: rgba(255, 58, 58, 0.08);
+  --pho-color-danger-glow: rgba(255, 58, 58, 0.55);
+  --pho-color-danger-glow-soft: rgba(255, 58, 58, 0.25);
+  --pho-color-warning: #dfffaa;
+  --pho-color-warning-strong: #efffc9;
+  --pho-color-warning-muted: rgba(170, 255, 102, 0.42);
+  --pho-color-warning-faint: rgba(170, 255, 102, 0.07);
+  --pho-color-status-draft: var(--pho-color-text-muted);
+  --pho-color-status-published: var(--pho-color-success);
+  --pho-color-status-archived: var(--pho-color-text-faint);
+  --pho-color-status-locked: var(--pho-color-danger);
+  --pho-color-status-current: var(--pho-color-primary);
+  --pho-color-status-missing: var(--pho-color-danger-strong);
+
+  /* ── alpha overlays ───────────────────────────────────── */
+  --pho-alpha-primary-01: rgba(44, 255, 122, 0.01);
+  --pho-alpha-primary-02: rgba(44, 255, 122, 0.02);
+  --pho-alpha-primary-03: rgba(44, 255, 122, 0.03);
+  --pho-alpha-primary-04: rgba(44, 255, 122, 0.04);
+  --pho-alpha-primary-05: rgba(44, 255, 122, 0.05);
+  --pho-alpha-primary-06: rgba(44, 255, 122, 0.06);
+  --pho-alpha-primary-07: rgba(44, 255, 122, 0.07);
+  --pho-alpha-primary-08: rgba(44, 255, 122, 0.08);
+  --pho-alpha-primary-10: rgba(44, 255, 122, 0.1);
+  --pho-alpha-primary-12: rgba(44, 255, 122, 0.12);
+  --pho-alpha-primary-14: rgba(44, 255, 122, 0.14);
+  --pho-alpha-primary-16: rgba(44, 255, 122, 0.16);
+  --pho-alpha-primary-18: rgba(44, 255, 122, 0.18);
+  --pho-alpha-primary-22: rgba(44, 255, 122, 0.22);
+  --pho-alpha-primary-28: rgba(44, 255, 122, 0.28);
+  --pho-alpha-primary-35: rgba(44, 255, 122, 0.35);
+  --pho-alpha-primary-45: rgba(44, 255, 122, 0.45);
+  --pho-alpha-accent-04: rgba(98, 255, 154, 0.04);
+  --pho-alpha-accent-08: rgba(98, 255, 154, 0.08);
+  --pho-alpha-accent-12: rgba(98, 255, 154, 0.12);
+  --pho-alpha-accent-14: rgba(98, 255, 154, 0.14);
+  --pho-alpha-surface-45: rgba(1, 6, 4, 0.45);
+  --pho-alpha-surface-62: rgba(1, 6, 4, 0.62);
+  --pho-alpha-surface-72: rgba(1, 6, 4, 0.72);
+  --pho-alpha-surface-82: rgba(3, 17, 10, 0.82);
+
+  /* ── glow utilities ────────────────────────────────────── */
+  --glow-emerald:
+    0 0 1px var(--phosphor), 0 0 6px rgba(44, 255, 122, 0.55),
+    0 0 14px rgba(44, 255, 122, 0.25);
+  --glow-magenta:
+    0 0 1px var(--magenta), 0 0 8px rgba(98, 255, 154, 0.5),
+    0 0 18px rgba(98, 255, 154, 0.2);
+  --glow-amber: 0 0 1px var(--moss), 0 0 8px rgba(170, 255, 82, 0.5);
+
+  --glow-soft-emerald:
+    0 0 1px rgba(44, 255, 122, 0.45), 0 0 4px rgba(44, 255, 122, 0.22);
+
+  --glow-soft-magenta:
+    0 0 1px rgba(98, 255, 154, 0.4), 0 0 4px rgba(98, 255, 154, 0.2);
+
+  --glow-readable: none;
+
+  /* ── public effect aliases ─────────────────────────────── */
+  --pho-glow-primary: var(--glow-emerald);
+  --pho-glow-accent: var(--glow-magenta);
+  --pho-glow-info: var(--glow-amber);
+  --pho-glow-primary-soft: var(--glow-soft-emerald);
+  --pho-glow-accent-soft: var(--glow-soft-magenta);
+  --pho-glow-readable: var(--glow-readable);
+
+  /* ── typography stacks ─────────────────────────────────── */
+  --font-display:
+    "Bender", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+  --font-heading:
+    "Bender", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+  --font-body:
+    "JetBrains Mono", "Bender", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+  --font-code:
+    "JetBrains Mono", "Bender", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+  --font-terminal:
+    "VCR OSD Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, monospace;
+  --font-control:
+    "Bender", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+
+  --pho-font-display: var(--font-display);
+  --pho-font-heading: var(--font-heading);
+  --pho-font-body: var(--font-body);
+  --pho-font-code: var(--font-code);
+  --pho-font-terminal: var(--font-terminal);
+  --pho-font-control: var(--font-control);
+
+  /* ── code-block tokens (all greens, no warm channels) ──── */
+  --code-bg: #03110a;
+  --code-fn: #b6ffce;
+  --code-comment: #3a7a52;
+  --code-keyword: #62ff9a;
+  --code-string: #00d4b5;
+  --code-number: #aaff66;
+  --code-var: #d6ffe2;
+  --code-type: #5cf5d4;
+  --code-punct: #4d8a6e;
+  --code-tag: #62ff9a;
+  --code-attr: #aaff66;
+  --code-builtin: #5cf5d4;
+  --code-operator: #b6ffce;
+
+  /* ── borders ───────────────────────────────────────────── */
+  --border-frame: 2px solid var(--phosphor-dim);
+  --border-line: 1px solid var(--phosphor-fade);
+  --border-dash: 1px dashed var(--phosphor-fade);
+  --border-dot: 1px dotted var(--phosphor-fade);
+  --rail-strong: 2px solid var(--phosphor);
+  --rail-quote: 3px double var(--phosphor);
+  --border-magenta-strong: 1.5px solid var(--magenta);
+  --border-magenta-dash: 1px dashed var(--magenta-deep);
+
+  --pho-border-frame: var(--border-frame);
+  --pho-border-line: var(--border-line);
+  --pho-border-dashed: var(--border-dash);
+  --pho-border-dotted: var(--border-dot);
+  --pho-border-accent: var(--border-magenta-strong);
+  --pho-border-accent-dashed: var(--border-magenta-dash);
+  --pho-rail-strong: var(--rail-strong);
+  --pho-rail-quote: var(--rail-quote);
+  --pho-focus-ring: 2px solid var(--pho-color-primary-strong);
+  --pho-focus-offset: 2px;
+  --pho-radius-none: 0;
+  --pho-radius-sm: 0;
+  --pho-radius-md: 0;
+
+  /* ── spacing scale (modular) ───────────────────────────── */
+  --space-0: 0.1rem;
+  --space-1: 0.2rem;
+  --space-2: 0.4rem;
+  --space-3: 0.6rem;
+  --space-4: 0.8rem;
+  --space-5: 1rem;
+  --space-6: 1.4rem;
+  --space-7: 2rem;
+
+  --pho-space-0: var(--space-0);
+  --pho-space-1: var(--space-1);
+  --pho-space-2: var(--space-2);
+  --pho-space-3: var(--space-3);
+  --pho-space-4: var(--space-4);
+  --pho-space-5: var(--space-5);
+  --pho-space-6: var(--space-6);
+  --pho-space-7: var(--space-7);
+  --pho-size-touch-target: 2.5rem;
+  --pho-size-content: 72rem;
+  --pho-size-prose: 68ch;
+  --pho-layout-site-max: 88rem;
+  --pho-layout-content-max: 72rem;
+  --pho-layout-prose-max: 68ch;
+  --pho-layout-sidebar-width: 18rem;
+  --pho-layout-toc-width: 17.5rem;
+  --pho-layout-admin-sidebar-width: clamp(18rem, 24vw, 22rem);
+  --pho-layout-gutter: clamp(1rem, 2vw, 1.75rem);
+  --pho-layout-sticky-top: 1rem;
+  --pho-bp-xs: 360px;
+  --pho-bp-sm: 520px;
+  --pho-bp-md: 720px;
+  --pho-bp-lg: 880px;
+  --pho-bp-xl: 1120px;
+  --pho-motion-fast: 120ms;
+  --pho-motion-base: 180ms;
+  --pho-motion-slow: 320ms;
+  --pho-ease-out: ease-out;
+  --pho-ease-terminal: steps(8);
+  --pho-caret-blink-duration: 0.78s;
+  --pho-caret-gap: 0.16em;
+  --pho-caret-idle-delay: 520ms;
+  --pho-caret-glow:
+    0 0 1px var(--pho-color-primary-strong), 0 0 5px var(--pho-alpha-primary-28);
+  --pho-placeholder-color: rgba(31, 184, 84, 0.72);
+  --pho-placeholder-opacity: 1;
+  --pho-focus-glow:
+    0 0 0 1px var(--pho-alpha-primary-18), 0 0 10px var(--pho-alpha-primary-18);
+  --pho-active-glow:
+    0 0 0 1px var(--pho-alpha-primary-22),
+    inset 0 0 14px var(--pho-alpha-primary-05);
+  --pho-scanline-opacity: 0.11;
+  --pho-scanline-size: 4px;
+  --pho-flicker-opacity-min: 0.88;
+  --pho-card-border: 1px solid var(--pho-color-border);
+  --pho-card-bg: var(--pho-color-surface);
+  --pho-card-padding: var(--pho-space-5);
+  --pho-thumb-post-w: 160px;
+  --pho-thumb-post-h: 100px;
+  --pho-thumb-post-w-sm: 88px;
+  --pho-thumb-post-h-sm: 56px;
+  --pho-ascii-glow-pad-x: 1.5em;
+  --pho-ascii-glow-pad-y: 1.1em;
+
+  /* ── z-index ramp ──────────────────────────────────────── */
+  --z-deep: 0;
+  --z-default: 1;
+  --z-raised: 2;
+  --z-fx-noise: 6;
+  --z-fx-vignette: 7;
+  --z-fx-frame: 8;
+  --z-fx-flicker: 9;
+  --z-shell: 10;
+  --z-backdrop: 49;
+  --z-drawer: 50;
+
+  --pho-z-deep: var(--z-deep);
+  --pho-z-default: var(--z-default);
+  --pho-z-raised: var(--z-raised);
+  --pho-z-fx-noise: var(--z-fx-noise);
+  --pho-z-fx-vignette: var(--z-fx-vignette);
+  --pho-z-fx-frame: var(--z-fx-frame);
+  --pho-z-fx-flicker: var(--z-fx-flicker);
+  --pho-z-shell: var(--z-shell);
+  --pho-z-backdrop: var(--z-backdrop);
+  --pho-z-drawer: var(--z-drawer);
+
+  /* ── semantic type roles ───────────────────────────────── */
+  --type-h1-size: clamp(2rem, 3.6vw, 2.6rem);
+  --type-h2-size: clamp(1.55rem, 2.8vw, 2rem);
+  --type-h3-size: clamp(1.25rem, 2.1vw, 1.5rem);
+  --type-h4-size: clamp(1.05rem, 1.7vw, 1.2rem);
+  --type-h5-size: 0.98rem;
+  --type-h6-size: 0.88rem;
+  --type-lead-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
+  --type-body-size: clamp(16px, 0.4vw + 14px, 18px);
+  --type-small-size: 0.875rem;
+  --type-caption-size: 0.78rem;
+  --type-micro-size: 0.68rem;
+  --type-ui-xs-size: 0.72rem;
+  --type-ui-sm-size: 0.82rem;
+  --type-label-size: 0.78rem;
+  --type-mono-size: 0.86em;
+  --type-control-size: 0.95rem;
+  --type-control-sm-size: 0.875rem;
+  --type-control-lg-size: 1.1rem;
+  --type-icon-sm-size: 1rem;
+  --type-icon-md-size: 1.25rem;
+  --type-icon-lg-size: 1.65rem;
+
+  --type-line-tight: 1.05;
+  --type-line-snug: 1.15;
+  --type-line-normal: 1.6;
+  --type-line-prose: 1.7;
+  --type-line-control: 1;
+  --type-line-caption: 1.35;
+
+  --tracking-tight: 0;
+  --tracking-normal: 0;
+  --tracking-wide: 0.06em;
+  --tracking-wider: 0.14em;
+  --tracking-stamp: 0.22em;
+
+  --pho-type-h1-size: var(--type-h1-size);
+  --pho-type-h2-size: var(--type-h2-size);
+  --pho-type-h3-size: var(--type-h3-size);
+  --pho-type-h4-size: var(--type-h4-size);
+  --pho-type-h5-size: var(--type-h5-size);
+  --pho-type-h6-size: var(--type-h6-size);
+  --pho-type-lead-size: var(--type-lead-size);
+  --pho-type-body-size: var(--type-body-size);
+  --pho-type-small-size: var(--type-small-size);
+  --pho-type-caption-size: var(--type-caption-size);
+  --pho-type-micro-size: var(--type-micro-size);
+  --pho-type-ui-xs-size: var(--type-ui-xs-size);
+  --pho-type-ui-sm-size: var(--type-ui-sm-size);
+  --pho-type-label-size: var(--type-label-size);
+  --pho-type-mono-size: var(--type-mono-size);
+  --pho-type-control-size: var(--type-control-size);
+  --pho-type-control-sm-size: var(--type-control-sm-size);
+  --pho-type-control-lg-size: var(--type-control-lg-size);
+  --pho-type-icon-sm-size: var(--type-icon-sm-size);
+  --pho-type-icon-md-size: var(--type-icon-md-size);
+  --pho-type-icon-lg-size: var(--type-icon-lg-size);
+  --pho-line-tight: var(--type-line-tight);
+  --pho-line-snug: var(--type-line-snug);
+  --pho-line-normal: var(--type-line-normal);
+  --pho-line-prose: var(--type-line-prose);
+  --pho-line-control: var(--type-line-control);
+  --pho-line-caption: var(--type-line-caption);
+  --pho-tracking-tight: var(--tracking-tight);
+  --pho-tracking-normal: var(--tracking-normal);
+  --pho-tracking-wide: var(--tracking-wide);
+  --pho-tracking-wider: var(--tracking-wider);
+  --pho-tracking-stamp: var(--tracking-stamp);
+
+  /* ── scrollbar ─────────────────────────────────────────── */
+  --scrollbar-size: 8px;
+  --scrollbar-track: var(--bg-deep);
+  --scrollbar-track-border: 1px dashed var(--phosphor-fade);
+  --scrollbar-thumb: var(--phosphor-fade);
+  --scrollbar-thumb-edge: var(--phosphor-dim);
+  --scrollbar-thumb-hover: var(--phosphor-dim);
+  --scrollbar-thumb-active: var(--phosphor);
+  --scrollbar-glow: 0 0 6px rgba(44, 255, 122, 0.4);
+
+  --pho-scrollbar-size: var(--scrollbar-size);
+  --pho-scrollbar-track: var(--scrollbar-track);
+  --pho-scrollbar-thumb: var(--scrollbar-thumb);
+  --pho-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
+  --pho-scrollbar-thumb-active: var(--scrollbar-thumb-active);
+  --pho-cursor-default:
+    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%232cff7a' stroke-width='1' stroke-linecap='square'/%3E%3Ccircle cx='8' cy='8' r='4.25' stroke='%231fb854' stroke-width='.75'/%3E%3C/svg%3E")
+      8 8,
+    default;
+  --pho-cursor-pointer:
+    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3 2l11 7-5 1.2L6.2 16 3 2z' fill='%2304140a' stroke='%232cff7a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Cpath d='M7 8.5l2.2 1.7' stroke='%23b6ffce' stroke-width='.8'/%3E%3C/svg%3E")
+      3 2,
+    pointer;
+  --pho-cursor-text:
+    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 2h4M8 2v12M6 14h4' stroke='%23b6ffce' stroke-width='1.2' stroke-linecap='square'/%3E%3Cpath d='M4 8h8' stroke='%231fb854' stroke-width='.8'/%3E%3C/svg%3E")
+      8 8,
+    text;
+  --pho-cursor-disabled:
+    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='6' stroke='%231fb854' stroke-width='1'/%3E%3Cpath d='M5 13L13 5' stroke='%232cff7a' stroke-width='1.2'/%3E%3C/svg%3E")
+      9 9,
+    not-allowed;
+}

package/dist/styles/typography.css

@@ -0,0 +1,193 @@
+/* ─── semantic typography utilities ───────────────────────── */
+.t-h1 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h1-size);
+  line-height: var(--pho-line-snug);
+  letter-spacing: var(--pho-tracking-wide);
+  text-transform: uppercase;
+  color: var(--pho-color-text-strong);
+  text-shadow: var(--pho-glow-primary);
+}
+.t-h2 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h2-size);
+  line-height: var(--pho-line-snug);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--pho-color-text-strong);
+  text-shadow: var(--pho-glow-primary);
+}
+.t-h3 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h3-size);
+  line-height: var(--pho-line-snug);
+  color: var(--pho-color-accent);
+  text-shadow: var(--pho-glow-accent);
+  letter-spacing: 0.04em;
+}
+.t-h4 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h4-size);
+  line-height: var(--pho-line-snug);
+  text-transform: uppercase;
+  letter-spacing: var(--pho-tracking-wide);
+  color: var(--pho-color-primary);
+}
+.t-h5 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h5-size);
+  line-height: var(--pho-line-snug);
+  letter-spacing: var(--pho-tracking-wide);
+  text-transform: uppercase;
+  color: var(--pho-color-primary);
+}
+.t-h6 {
+  font-family: var(--pho-font-heading);
+  font-weight: 700;
+  font-size: var(--pho-type-h6-size);
+  line-height: var(--pho-line-snug);
+  letter-spacing: var(--pho-tracking-wider);
+  text-transform: uppercase;
+  color: var(--pho-color-text-muted);
+}
+.pho-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 0.55ch;
+}
+.pho-heading__glyph {
+  color: var(--pho-color-primary);
+  font-family: var(--pho-font-code);
+  text-shadow: var(--pho-glow-primary);
+  line-height: 1;
+  flex: 0 0 auto;
+}
+.pho-heading__text {
+  min-width: 0;
+}
+.t-body {
+  font-family: var(--pho-font-body);
+  font-size: var(--pho-type-body-size);
+  line-height: var(--pho-line-prose);
+  color: var(--pho-color-text);
+}
+.t-lead {
+  font-family: var(--pho-font-body);
+  font-size: var(--pho-type-lead-size);
+  line-height: var(--pho-line-prose);
+  color: var(--pho-color-text-strong);
+}
+.t-small {
+  font-family: var(--pho-font-body);
+  font-size: var(--pho-type-small-size);
+  line-height: var(--pho-line-normal);
+  color: var(--pho-color-text);
+}
+.t-caption {
+  font-family: var(--pho-font-code);
+  font-size: var(--pho-type-caption-size);
+  line-height: var(--pho-line-caption);
+  color: var(--pho-color-text-faint);
+  letter-spacing: var(--pho-tracking-wide);
+  text-transform: uppercase;
+}
+.t-mono {
+  font-family: var(--pho-font-code);
+  font-size: var(--pho-type-mono-size);
+}
+.t-code {
+  font-family: var(--pho-font-code);
+  font-size: var(--pho-type-mono-size);
+  color: var(--pho-color-text-strong);
+}
+.t-terminal {
+  font-family: var(--pho-font-terminal);
+  font-size: 1.3em;
+  letter-spacing: var(--pho-tracking-wider);
+  text-transform: uppercase;
+}
+.t-stamp {
+  font-family: var(--pho-font-terminal);
+  font-size: var(--pho-type-caption-size);
+  letter-spacing: var(--pho-tracking-stamp);
+  text-transform: uppercase;
+  color: var(--pho-color-text-faint);
+}
+.t-prompt {
+  color: var(--pho-color-accent-strong);
+  text-shadow: var(--pho-glow-accent);
+  font-family: var(--pho-font-terminal);
+  font-weight: 700;
+}
+.t-glow {
+  color: var(--pho-color-primary);
+  text-shadow: var(--pho-glow-primary);
+}
+.t-glow-pale {
+  color: var(--pho-color-primary-strong);
+  text-shadow: var(--pho-glow-primary);
+}
+.t-muted {
+  color: var(--pho-color-text-muted);
+  text-shadow: none;
+}
+.t-dim {
+  color: var(--pho-color-text-muted);
+  text-shadow: none;
+}
+.t-faded {
+  color: var(--pho-color-text-faint);
+  text-shadow: none;
+}
+.t-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.t-balance {
+  text-wrap: balance;
+}
+.t-nowrap {
+  white-space: nowrap;
+}
+.t-align-start {
+  text-align: start;
+}
+.t-align-center {
+  text-align: center;
+}
+.t-align-end {
+  text-align: end;
+}
+.t-uppercase {
+  text-transform: uppercase;
+}
+.t-lowercase {
+  text-transform: lowercase;
+}
+.t-capitalize {
+  text-transform: capitalize;
+}
+.t-tone-primary {
+  color: var(--pho-color-primary-strong);
+  text-shadow: var(--pho-glow-primary-soft);
+}
+.t-tone-accent {
+  color: var(--pho-color-accent-strong);
+  text-shadow: var(--pho-glow-accent-soft);
+}
+.t-tone-danger {
+  color: var(--pho-color-danger-strong);
+  text-shadow: 0 0 10px var(--pho-color-danger-glow-soft);
+}
+.t-dim,
+.t-faded,
+.t-muted {
+  text-shadow: none;
+  filter: none;
+}