/* * Jank UI theme contract * * Only the --theme-* values are palette inputs. Everything else is a * semantic or component recipe derived from them. Future built-in or * user-authored themes must provide the same allowlisted inputs; they must * never inject arbitrary CSS. */ :root, :root[data-theme="default"] { color-scheme: dark; /* Theme inputs: the complete future customization surface. */ --theme-canvas: #0b0d10; --theme-surface: #14171d; --theme-surface-raised: #1b1f27; --theme-surface-overlay: #242a33; --theme-text: #e6e8ee; --theme-text-secondary: #c6ccd8; --theme-text-muted: #8b93a7; --theme-accent: #b6ff4d; --theme-accent-alt: #8effd2; --theme-on-accent: #0d1108; --theme-danger: #ff4d6d; --theme-warning: #f8b968; --theme-success: #7ff2b7; --theme-info: #67e8f9; --theme-shadow-color: #000000; /* Semantic color roles. */ --color-canvas: var(--theme-canvas); --color-surface: var(--theme-surface); --color-surface-raised: var(--theme-surface-raised); --color-surface-overlay: var(--theme-surface-overlay); --color-text: var(--theme-text); --color-text-secondary: var(--theme-text-secondary); --color-text-muted: var(--theme-text-muted); --color-text-inverse: var(--theme-on-accent); --color-link: var(--theme-accent); --color-link-hover: var(--theme-accent-alt); --color-border-subtle: color-mix(in srgb, var(--theme-text) 8%, transparent); --color-border: color-mix(in srgb, var(--theme-text) 12%, transparent); --color-border-strong: color-mix(in srgb, var(--theme-text) 24%, transparent); --color-border-interactive: color-mix(in srgb, var(--theme-accent) 28%, transparent); --color-focus-ring: var(--theme-accent-alt); --color-accent: var(--theme-accent); --color-accent-alt: var(--theme-accent-alt); --color-danger: var(--theme-danger); --color-warning: var(--theme-warning); --color-success: var(--theme-success); /* Shared surfaces. */ --surface-header: linear-gradient(180deg, color-mix(in srgb, white 4%, transparent), transparent), color-mix(in srgb, var(--theme-canvas) 92%, transparent); --surface-sidebar: color-mix(in srgb, var(--theme-canvas) 24%, transparent); --surface-menu: color-mix(in srgb, var(--theme-surface) 96%, transparent); --surface-control: color-mix(in srgb, var(--theme-surface-raised) 78%, transparent); --surface-control-hover: color-mix(in srgb, var(--theme-surface-overlay) 92%, transparent); --surface-scrim: color-mix(in srgb, var(--theme-shadow-color) 68%, transparent); --surface-vn-scrim: linear-gradient( 180deg, color-mix(in srgb, var(--theme-shadow-color) 24%, transparent), color-mix(in srgb, var(--theme-shadow-color) 78%, transparent) ); /* Elevation and focus. */ --shadow-sm: 0 0.45rem 1rem color-mix(in srgb, var(--theme-shadow-color) 18%, transparent); --shadow-md: 0 0.9rem 2rem color-mix(in srgb, var(--theme-shadow-color) 24%, transparent); --shadow-lg: 0 1.75rem 5rem color-mix(in srgb, var(--theme-shadow-color) 42%, transparent); --focus-ring: 0 0 0 0.1rem color-mix(in srgb, var(--theme-canvas) 92%, transparent), 0 0 0 0.24rem color-mix(in srgb, var(--theme-accent-alt) 26%, transparent); /* Primary action. */ --action-primary-bg: linear-gradient( 135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 62%, white) ); --action-primary-text: var(--theme-on-accent); --action-primary-border: color-mix(in srgb, var(--theme-accent) 44%, transparent); --action-primary-hover-bg: linear-gradient( 135deg, color-mix(in srgb, var(--theme-accent) 84%, white), color-mix(in srgb, var(--theme-accent) 48%, white) ); --action-primary-hover-border: color-mix(in srgb, var(--theme-accent) 62%, transparent); --action-primary-active-bg: color-mix(in srgb, var(--theme-accent) 88%, black); --action-primary-disabled-bg: color-mix(in srgb, var(--theme-accent) 32%, var(--theme-surface)); --action-primary-disabled-text: color-mix(in srgb, var(--theme-on-accent) 58%, transparent); --action-primary-shadow: 0 0.9rem 2.1rem color-mix(in srgb, var(--theme-accent) 18%, transparent); /* Secondary action. */ --action-secondary-bg: color-mix(in srgb, var(--theme-surface-raised) 78%, transparent); --action-secondary-text: var(--theme-text); --action-secondary-border: var(--color-border); --action-secondary-hover-bg: var(--surface-control-hover); --action-secondary-hover-border: var(--color-border-interactive); --action-secondary-active-bg: var(--theme-surface-overlay); --action-secondary-disabled-bg: color-mix(in srgb, var(--theme-surface-raised) 44%, transparent); --action-secondary-disabled-text: color-mix(in srgb, var(--theme-text-muted) 58%, transparent); --action-secondary-shadow: none; /* Ghost action. */ --action-ghost-bg: transparent; --action-ghost-text: var(--theme-text); --action-ghost-border: var(--color-border); --action-ghost-hover-bg: var(--surface-control-hover); --action-ghost-hover-border: var(--color-border-interactive); --action-ghost-active-bg: color-mix(in srgb, var(--theme-surface-overlay) 72%, transparent); --action-ghost-disabled-bg: transparent; --action-ghost-disabled-text: color-mix(in srgb, var(--theme-text-muted) 58%, transparent); --action-ghost-shadow: none; /* Destructive action. */ --action-danger-bg: transparent; --action-danger-text: var(--theme-text); --action-danger-border: color-mix(in srgb, var(--theme-danger) 30%, transparent); --action-danger-hover-bg: color-mix(in srgb, var(--theme-danger) 12%, transparent); --action-danger-hover-border: color-mix(in srgb, var(--theme-danger) 48%, transparent); --action-danger-active-bg: color-mix(in srgb, var(--theme-danger) 20%, transparent); --action-danger-disabled-bg: transparent; --action-danger-disabled-text: color-mix(in srgb, var(--theme-text-muted) 58%, transparent); --action-danger-shadow: none; /* Form controls. */ --control-bg: color-mix(in srgb, var(--theme-canvas) 90%, transparent); --control-text: var(--theme-text); --control-placeholder: color-mix(in srgb, var(--theme-text-muted) 72%, transparent); --control-border: color-mix(in srgb, var(--theme-text) 10%, transparent); --control-focus-border: color-mix(in srgb, var(--theme-accent-alt) 54%, transparent); --control-disabled-bg: color-mix(in srgb, var(--theme-surface-raised) 96%, transparent); --control-disabled-text: color-mix(in srgb, var(--theme-text) 92%, transparent); /* Selectable tabs, segments, and choices. */ --control-option-bg: var(--action-secondary-bg); --control-option-text: var(--theme-text-secondary); --control-option-border: var(--action-secondary-border); --control-option-hover-bg: var(--action-secondary-hover-bg); --control-option-hover-text: var(--theme-text); --control-option-hover-border: var(--action-secondary-hover-border); --control-option-selected-bg: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface-raised)); --control-option-selected-text: var(--theme-text); --control-option-selected-border: color-mix(in srgb, var(--theme-accent) 62%, var(--color-border)); /* Navigation, menus, and dialogs. */ --dialog-bg: var(--surface-menu); --dialog-text: var(--theme-text); --dialog-border: var(--color-border); --dialog-shadow: var(--shadow-lg); --dialog-scrim: var(--surface-scrim); /* Feedback/status roles. */ --status-danger-bg: color-mix(in srgb, var(--theme-danger) 12%, transparent); --status-danger-text: color-mix(in srgb, var(--theme-danger) 40%, white); --status-danger-border: color-mix(in srgb, var(--theme-danger) 34%, transparent); --status-warning-bg: color-mix(in srgb, var(--theme-warning) 10%, transparent); --status-warning-text: color-mix(in srgb, var(--theme-warning) 46%, white); --status-warning-border: color-mix(in srgb, var(--theme-warning) 28%, transparent); --status-success-bg: color-mix(in srgb, var(--theme-success) 10%, transparent); --status-success-text: color-mix(in srgb, var(--theme-success) 54%, white); --status-success-border: color-mix(in srgb, var(--theme-success) 28%, transparent); --status-info-bg: color-mix(in srgb, var(--theme-info) 9%, transparent); --status-info-text: color-mix(in srgb, var(--theme-info) 50%, white); --status-info-border: color-mix(in srgb, var(--theme-info) 26%, transparent); /* Component geometry is shared across themes. */ --font-body: "IBM Plex Sans", sans-serif; --font-display: "Space Grotesk", sans-serif; --font-label: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --radius-control: 1rem; --radius-button: 1rem; --radius-panel: 1.4rem; --radius-pill: 999px; --control-height-compact: 2.3rem; --control-height-default: 2.9rem; --control-height-large: 3.4rem; --layer-dialog: 1000; --layer-dialog-raised: 1100; --motion-fast: 160ms ease; /* * Transitional aliases. Existing component CSS can migrate incrementally * while still responding to the root theme. */ --panel: var(--color-surface); --surface: var(--color-surface); --panel-alt: var(--color-surface-raised); --panel-soft: color-mix(in srgb, var(--color-surface) 84%, transparent); --text: var(--color-text); --muted: var(--color-text-muted); --accent: var(--color-accent); --accent-alt: var(--color-accent-alt); --danger: var(--color-danger); --border: var(--color-border-subtle); --border-strong: color-mix(in srgb, var(--color-accent) 18%, transparent); --shadow: var(--shadow-lg); --label-font: var(--font-label); --text-primary: var(--color-text); --text-muted: var(--color-text-muted); --border-subtle: var(--color-border-subtle); --surface-strong: var(--color-surface-raised); /* Bootstrap consumes the same semantic contract. */ --bs-body-bg: var(--color-canvas); --bs-body-color: var(--color-text); }