diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css index 50cc6e40..de01bb84 100644 --- a/src/styles/themes/dark.css +++ b/src/styles/themes/dark.css @@ -25,6 +25,7 @@ html[data-theme="dark"] { --color-border-darker: #333; --color-border-light: #666; --color-border-pale: #555; + --color-border-accent: #9999dd; /* Status Colors */ --color-selected-bg: #4a6e3a; @@ -133,16 +134,23 @@ html[data-theme="dark"] { /* Spacing and Sizing */ --spacing-tiny: 0.05em; --spacing-small: 0.1em; + --spacing-xxxs: 0.2em; + --spacing-xxs: 0.3em; --spacing-xs: 0.5rem; --spacing-sm: 0.75em; + --spacing-btn: 0.7em; --spacing-base: 0.5em; --spacing-md: 1em; --spacing-lg: 1.5em; --spacing-xl: 2em; --spacing-2xl: 3em; + --border-width-xthin: 0.05em; + --border-width-sm: 0.1em; --border-width-thin: 1px; --border-width-medium: 2px; --border-width-bold: 5px; + --border-radius-xs: 0.1em; + --border-radius-sm: 0.2em; --border-radius-base: 0.5em; --border-radius-lg: 0.75em; --border-radius-full: 1em; @@ -165,6 +173,12 @@ html[data-theme="dark"] { /* Shadows */ --box-shadow: 0 2px 8px rgba(0,0,0,0.3); --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2); + --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3); + --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35); + --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3); + --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5); + --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4); + --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.4); /* Accessibility */ --min-touch-target: 44px; @@ -178,15 +192,18 @@ html[data-theme="dark"] { /* Overlay and Modal */ --overlay-bg: rgba(0, 0, 0, 0.7); + --overlay-bg-muted: rgba(0, 0, 0, 0.5); --z-index-modal: 9999; --z-index-skip-links: 1000; /* Opacity */ --opacity-disabled: 0.6; + --opacity-input-disabled: 0.75; /* Layout Values */ --max-width-readable: 65ch; --max-width-readable-wide: 70ch; + --grid-min-column: 30em; /* Outline Offsets */ --outline-offset-sm: 2px;