wehub-resource-sync
98e40dac97
CLI Smoke Test / smoke-test-linux (20) (push) Has been cancelled
CLI Smoke Test / smoke-test-linux (24) (push) Has been cancelled
CLI Smoke Test / smoke-test-windows (20) (push) Has been cancelled
CLI Smoke Test / smoke-test-windows (24) (push) Has been cancelled
Expo App TypeScript typecheck / typecheck (push) Has been cancelled
216 lines
11 KiB
CSS
216 lines
11 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/*
|
|
* Theme tokens are derived from a 5-input theme object (accent, ink, surface,
|
|
* contrast, opaqueWindows + fonts/semanticColors) by the JS pipeline in
|
|
* `sources/theme/derive.ts`, then written to <html>'s inline style at runtime.
|
|
* See packages/codium/design-system.md for the full derivation model.
|
|
*
|
|
* The two class branches below only flip color-scheme; the ~65 chrome-theme
|
|
* `--color-*` values come from the inline style on <html>.
|
|
*/
|
|
html.electron-dark { color-scheme: dark; }
|
|
html.electron-light { color-scheme: light; }
|
|
|
|
/*
|
|
* Body background: when the active theme has `opaqueWindows: true` we paint a
|
|
* solid color so macOS vibrancy doesn't bleed through behind the rounded main
|
|
* surface. When opaqueWindows is false the body stays transparent so the
|
|
* window-level vibrancy material is visible.
|
|
*/
|
|
html, body { background: transparent; }
|
|
html.electron-opaque body {
|
|
/* Codex's own light page bg — slightly darker than the main surface so
|
|
* the rounded white surface still pops. */
|
|
background: var(--color-background-surface-under);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
* Design-system aliases (--color-token-*).
|
|
*
|
|
* Codex defines ~96 `--color-token-*` aliases in CSS that reference the
|
|
* inline-injected chrome theme tokens. Components consume these via Tailwind
|
|
* utilities (e.g. `bg-token-input-background`, `text-token-foreground`).
|
|
*
|
|
* They're kept in CSS (not the JS derivation) so they hot-recompute when the
|
|
* inline tokens change without re-running the derive pass.
|
|
*
|
|
* Fixed brand colors (charts, status, decorations, ANSI primaries) are
|
|
* inlined as `var(--…)` aliases that resolve to the JS-derived values where
|
|
* possible, or to literal hex when they aren't theme-dependent.
|
|
* ──────────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* — text aliases — */
|
|
--color-token-foreground: var(--color-text-foreground);
|
|
--color-token-text-primary: var(--color-text-foreground);
|
|
--color-token-text-secondary: var(--color-text-foreground-secondary);
|
|
--color-token-text-tertiary: var(--color-text-foreground-tertiary);
|
|
--color-token-description-foreground: var(--color-text-foreground-tertiary);
|
|
--color-token-disabled-foreground: var(--color-text-foreground-tertiary);
|
|
|
|
/* — icon aliases — */
|
|
--color-token-icon-foreground: var(--color-icon-primary);
|
|
|
|
/* — surface / background aliases — */
|
|
--color-token-main-surface-primary: var(--color-background-surface);
|
|
--color-token-bg-primary: var(--color-background-surface-under);
|
|
--color-token-bg-secondary: color-mix(in srgb, var(--color-background-surface-under) 92%, transparent);
|
|
--color-token-bg-tertiary: color-mix(in srgb, var(--color-background-surface-under) 85%, transparent);
|
|
--color-token-side-bar-background: var(--color-background-surface-under);
|
|
--color-token-input-background: var(--color-background-control);
|
|
--color-token-dropdown-background: var(--color-background-elevated-primary-opaque);
|
|
--color-token-menu-background: var(--color-background-elevated-primary);
|
|
--color-token-checkbox-background: var(--color-background-elevated-primary);
|
|
--color-token-bg-fog: color-mix(in oklab, var(--color-text-foreground) 2.5%, transparent);
|
|
|
|
/* — input/checkbox/menu aliases — */
|
|
--color-token-input-foreground: var(--color-text-foreground);
|
|
--color-token-input-placeholder-foreground: var(--color-text-foreground-tertiary);
|
|
--color-token-input-border: var(--color-border);
|
|
--color-token-checkbox-foreground: var(--color-text-foreground);
|
|
--color-token-checkbox-border: var(--color-border);
|
|
--color-token-menu-border: var(--color-border);
|
|
--color-token-menubar-selection-foreground: var(--color-text-foreground);
|
|
--color-token-menubar-selection-background: var(--color-token-bg-fog);
|
|
--color-token-radio-active-foreground: var(--color-text-foreground);
|
|
|
|
/* — link aliases — */
|
|
--color-token-link: var(--color-text-accent);
|
|
--color-token-text-link-foreground: var(--color-text-accent);
|
|
--color-token-text-link-active-foreground: var(--color-text-accent);
|
|
|
|
/* — border aliases — */
|
|
--color-token-border: var(--color-border);
|
|
--color-token-border-default: var(--color-border);
|
|
--color-token-border-heavy: var(--color-border-heavy);
|
|
--color-token-border-light: var(--color-border-light);
|
|
--color-token-focus-border: var(--color-border-focus);
|
|
--color-token-list-focus-outline: var(--color-border-focus);
|
|
|
|
/* — button aliases — */
|
|
--color-token-button-background: var(--color-background-button-primary);
|
|
--color-token-button-foreground: var(--color-background-button-primary);
|
|
--color-token-button-border: var(--color-border);
|
|
--color-token-button-secondary-hover-background: var(--color-background-button-secondary-hover);
|
|
|
|
/* — list / hover aliases — */
|
|
--color-token-list-hover-background: var(--color-background-button-tertiary-hover);
|
|
--color-token-toolbar-hover-background: var(--color-background-button-tertiary-hover);
|
|
--color-token-list-active-selection-background: var(--color-background-button-secondary);
|
|
--color-token-list-active-selection-foreground: var(--color-text-foreground);
|
|
--color-token-list-active-selection-icon-foreground: var(--color-icon-primary);
|
|
|
|
/* — badge — */
|
|
--color-token-badge-background: var(--color-background-button-secondary);
|
|
--color-token-badge-foreground: var(--color-text-foreground-secondary);
|
|
|
|
/* — text / code block — */
|
|
--color-token-text-code-block-background: var(--color-border);
|
|
|
|
/* — scrollbar — */
|
|
--color-token-scrollbar-slider-background: var(--color-border);
|
|
--color-token-scrollbar-slider-hover-background: var(--color-border-heavy);
|
|
--color-token-scrollbar-slider-active-background: var(--color-border-heavy);
|
|
|
|
/* — editor — */
|
|
--color-token-editor-foreground: var(--color-text-foreground);
|
|
--color-token-editor-background: var(--color-background-editor-opaque);
|
|
--color-token-editor-error-foreground: #ff6764;
|
|
--color-token-editor-warning-foreground: #ff8549;
|
|
|
|
/* — terminal — */
|
|
--color-token-terminal-foreground: var(--color-text-foreground);
|
|
--color-token-terminal-background: var(--color-background-surface);
|
|
--color-token-terminal-border: var(--color-border);
|
|
--color-token-terminal-ansi-black: var(--color-text-foreground-tertiary);
|
|
--color-token-terminal-ansi-bright-black: var(--color-text-foreground-secondary);
|
|
--color-token-terminal-ansi-blue: var(--color-accent-blue);
|
|
--color-token-terminal-ansi-bright-blue: var(--color-accent-blue);
|
|
--color-token-terminal-ansi-cyan: var(--color-accent-blue);
|
|
--color-token-terminal-ansi-bright-cyan: var(--color-accent-blue);
|
|
--color-token-terminal-ansi-green: var(--color-decoration-added);
|
|
--color-token-terminal-ansi-bright-green: var(--color-decoration-added);
|
|
--color-token-terminal-ansi-magenta: var(--color-accent-purple);
|
|
--color-token-terminal-ansi-bright-magenta: var(--color-accent-purple);
|
|
--color-token-terminal-ansi-red: #ff6764;
|
|
--color-token-terminal-ansi-bright-red: #ff6764;
|
|
--color-token-terminal-ansi-white: var(--color-text-foreground);
|
|
--color-token-terminal-ansi-bright-white: var(--color-text-foreground);
|
|
--color-token-terminal-ansi-yellow: #ffd240;
|
|
--color-token-terminal-ansi-bright-yellow: #ffd240;
|
|
|
|
/* — charts — */
|
|
--color-token-charts-blue: var(--color-accent-blue);
|
|
--color-token-charts-green: var(--color-decoration-added);
|
|
--color-token-charts-orange: #fb6a22;
|
|
--color-token-charts-purple: var(--color-accent-purple);
|
|
--color-token-charts-red: #ff6764;
|
|
--color-token-charts-yellow: #ffd240;
|
|
|
|
/* — git decoration — */
|
|
--color-token-git-decoration-added-resource-foreground: var(--color-decoration-added);
|
|
--color-token-git-decoration-deleted-resource-foreground: var(--color-decoration-deleted);
|
|
|
|
/* — diff surface (inverse-mix) — */
|
|
--color-token-diff-surface: color-mix(in srgb, var(--color-background-surface) 94%, var(--color-text-foreground));
|
|
|
|
/* — error / warning — */
|
|
--color-token-error-foreground: #ff6764;
|
|
--color-icon-warning: #ff8549;
|
|
--color-background-status-error: #4d100e;
|
|
--color-background-status-warning: #4a2206;
|
|
--color-background-status-success: color-mix(in oklab, #04b84c 16%, transparent);
|
|
}
|
|
|
|
/*
|
|
* Light-mode overrides for the few status/error tokens whose dark default
|
|
* doesn't read against a light surface.
|
|
*/
|
|
html.electron-light {
|
|
--color-token-editor-error-foreground: #b6161c;
|
|
--color-token-editor-warning-foreground: #b55a16;
|
|
--color-token-error-foreground: #b6161c;
|
|
--color-token-terminal-ansi-red: #b6161c;
|
|
--color-token-terminal-ansi-bright-red: #b6161c;
|
|
--color-token-charts-red: #b6161c;
|
|
--color-token-charts-orange: #b04300;
|
|
--color-token-charts-yellow: #ad7e00;
|
|
--color-icon-warning: #b55a16;
|
|
--color-background-status-error: color-mix(in oklab, #b6161c 12%, transparent);
|
|
--color-background-status-warning: color-mix(in oklab, #b55a16 12%, transparent);
|
|
--color-background-status-success: color-mix(in oklab, #04b84c 12%, transparent);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|