/* * SMTL Theme System v1.0.0 * Dark theme is default. Light theme override via [data-smtl-theme="light"]. * * Usage: * ← default (or omit attribute) * ← light theme */ /* ================================================================ * LIGHT THEME OVERRIDES * Applied when data-smtl-theme="light" is set on any ancestor. * ================================================================ */ [data-smtl-theme="light"] { /* Backgrounds */ --smtl-bg-app: #FFFFFF; --smtl-bg-sidebar: #F3F3F3; --smtl-bg-editor: #FFFFFF; --smtl-bg-panel: #F8F8F8; --smtl-bg-statusbar: #007ACC; --smtl-bg-hover: #E8E8E8; --smtl-bg-active: #D6D6D6; --smtl-bg-elevated: #F5F5F5; --smtl-bg-overlay: rgba(0, 0, 0, 0.3); /* Text */ --smtl-text-primary: #1E1E1E; --smtl-text-secondary: #616161; --smtl-text-tertiary: #8E8E8E; --smtl-text-disabled: #A0A0A0; --smtl-text-link: #006AB1; --smtl-text-link-hover: #005A9E; --smtl-text-inverse: #FFFFFF; --smtl-text-on-brand: #FFFFFF; /* Borders */ --smtl-border-default: #CECECE; --smtl-border-subtle: #E5E5E5; --smtl-border-strong: #999999; --smtl-border-focus: #005FB8; /* Semantic status */ --smtl-color-success: #388E3C; --smtl-color-success-bg: rgba(56, 142, 60, 0.08); --smtl-color-warning: #F57C00; --smtl-color-warning-bg: rgba(245, 124, 0, 0.08); --smtl-color-error: #D32F2F; --smtl-color-error-bg: rgba(211, 47, 47, 0.08); --smtl-color-info: #0288D1; --smtl-color-info-bg: rgba(2, 136, 209, 0.08); /* Inputs */ --smtl-input-bg: #FFFFFF; --smtl-input-bg-disabled: #F3F3F3; --smtl-input-border: #CECECE; --smtl-input-border-focus: #005FB8; --smtl-input-text: #1E1E1E; --smtl-input-placeholder: #8E8E8E; /* Cards */ --smtl-card-bg: #FFFFFF; --smtl-card-bg-hover: #F5F5F5; --smtl-card-border: #E5E5E5; --smtl-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Tables */ --smtl-table-header-bg: #F3F3F3; --smtl-table-row-bg-hover: #F5F5F5; --smtl-table-row-bg-selected: #E8E8E8; --smtl-table-row-bg-striped: rgba(0, 0, 0, 0.02); /* Shadows (lighter for light theme) */ --smtl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --smtl-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.08); --smtl-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); --smtl-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15); --smtl-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2); /* Scrollbar */ --smtl-scrollbar-thumb: rgba(100, 100, 100, 0.3); --smtl-scrollbar-thumb-hover: rgba(100, 100, 100, 0.6); /* Tooltip */ --smtl-tooltip-bg: #FFFFFF; --smtl-tooltip-text: #1E1E1E; --smtl-tooltip-border: #CECECE; } /* ================================================================ * SCROLLBAR STYLING (both themes) * ================================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--smtl-scrollbar-thumb) var(--smtl-scrollbar-track); } *::-webkit-scrollbar { width: var(--smtl-scrollbar-width); height: var(--smtl-scrollbar-width); } *::-webkit-scrollbar-track { background: var(--smtl-scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--smtl-scrollbar-thumb); border-radius: var(--smtl-radius-full); } *::-webkit-scrollbar-thumb:hover { background: var(--smtl-scrollbar-thumb-hover); } /* ================================================================ * FOCUS VISIBLE (accessibility) * ================================================================ */ :focus-visible { outline: 2px solid var(--smtl-border-focus); outline-offset: 2px; }