147 lines
8.3 KiB
CSS
147 lines
8.3 KiB
CSS
:root {
|
|
/*────────── Color Palette ──────────*/
|
|
color-scheme: light;
|
|
/* Grayscale */
|
|
--color-l-gray-10: hsla(36, 38%, 98%, 1);
|
|
--color-l-gray-20: hsla(35, 36%, 96%, 1);
|
|
--color-l-gray-30: hsla(35, 37%, 92%, 1);
|
|
--color-l-gray-40: hsla(34, 34%, 90%, 1);
|
|
--color-l-gray-50: hsla(36, 35%, 88%, 1);
|
|
--color-l-gray-60: hsla(37, 38%, 83%, 1);
|
|
--color-l-gray-70: hsla(34, 37%, 70%, 1);
|
|
--color-l-gray-80: hsla(34, 29%, 60%, 1);
|
|
--color-l-gray-90: hsla(31, 23%, 50%, 1);
|
|
--color-l-gray-100: hsla(35, 28%, 40%, 1);
|
|
--color-l-gray-110: hsla(34, 30%, 37%, 1);
|
|
--color-l-gray-120: hsla(36, 32%, 30%, 1);
|
|
--color-l-gray-130: hsla(31, 45%, 24%, 1);
|
|
--color-l-gray-140: hsla(33, 54%, 17%, 1);
|
|
--color-l-alpha-gray: hsla(34, 37%, 70%, 0.15);
|
|
/* Red */
|
|
--color-l-red-10: hsla(4, 59%, 64%, 1);
|
|
--color-l-red-20: hsla(4, 72%, 55%, 1);
|
|
--color-l-red-30: hsla(4, 56%, 48%, 1);
|
|
--color-l-red-40: hsla(4, 72%, 35%, 1);
|
|
--color-l-alpha-red: hsla(350, 84%, 63%, 0.2);
|
|
/* Green */
|
|
--color-l-green-10: hsla(148, 30%, 65%, 1);
|
|
--color-l-green-20: hsla(148, 48%, 47%, 1);
|
|
--color-l-green-30: hsla(149, 50%, 39%, 1);
|
|
--color-l-green-40: hsla(153, 65%, 29%, 1);
|
|
--color-l-alpha-green: hsla(74, 69%, 44%, 0.2);
|
|
/*────────── Window ──────────*/
|
|
/* Scrollbar */
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: var(--background-modifier-border);
|
|
--scrollbar-active-thumb-bg: var(--background-modifier-border-hover);
|
|
/*────────── Foundations ──────────*/
|
|
/* Background */
|
|
--background-primary: var(--color-l-gray-20);
|
|
--background-primary-alt: var(--color-l-gray-30);
|
|
--background-secondary: var(--color-l-gray-40);
|
|
--background-secondary-alt: var(--color-l-gray-40);
|
|
--background-modifier-hover: rgba(255, 255, 255, 0.5);
|
|
--background-modifier-active-hover: var(--color-l-gray-60);
|
|
--background-modifier-border: var(--color-l-gray-60);
|
|
--background-modifier-border-hover: color-mix(in hsl, var(--color-l-gray-70) 60%, var(--color-l-gray-60));
|
|
--background-modifier-border-focus: color-mix(in hsl, var(--color-l-gray-70) 60%, var(--color-l-gray-60));
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
|
/* Text Color */
|
|
--text-normal: var(--color-l-gray-130);
|
|
--text-muted: var(--color-l-gray-100);
|
|
--text-faint: var(--color-l-gray-80);
|
|
--text-selection: var(--color-l-alpha-gray);
|
|
/* Icon Colors */
|
|
--icon-color: var(--color-l-gray-80);
|
|
--icon-opacity: 1;
|
|
--icon-bg: transparent;
|
|
--icon-color-hover: var(--color-l-gray-90);
|
|
--icon-opacity-hover: 1;
|
|
--icon-bg-hover: transparent;
|
|
--icon-color-focused: var(--color-l-gray-90);
|
|
--icon-bg-pressed: transparent;
|
|
--icon-color-active: var(--color-l-gray-100);
|
|
--icon-opacity-active: 1;
|
|
--icon-bg-active: var(--color-l-gray-60);
|
|
--icon-bg-active-menu: transparent;
|
|
/*────────── Components ──────────*/
|
|
--disabled-component-opacity: 0.3;
|
|
/* Button */
|
|
--button-inset-shadow-size: 2px;
|
|
--button-shadow: var(--input-shadow);
|
|
--button-shadow-hover: var(--input-shadow-hover);
|
|
--button-shadow-active: var(--input-shadow-active);
|
|
--button-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.1),
|
|
0px 2px 4px -1px rgba(0, 0, 0, 0.05),
|
|
0px 0px 0px 3px var(--color-l-alpha-gray);
|
|
--button-accent-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.22),
|
|
0px 2px 4px -1px rgba(0, 0, 0, 0.19);
|
|
--button-accent-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.19),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.24);
|
|
--button-accent-shadow-active: var(--input-shadow-active);
|
|
--button-accent-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.24),
|
|
0px 0px 0px 3px var(--color-l-alpha-gray);
|
|
/* Prompt */
|
|
--prompt-input-background: var(--background-primary);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
--prompt-results-background: var(--background-primary);
|
|
--prompt-suggestion-color: var(--color-l-gray-90);
|
|
--prompt-suggestion-highlight-color: color-mix(in srgb, var(--prompt-suggestion-color) 70%, black);
|
|
--prompt-suggestion-color-selected: var(--color-l-gray-130);
|
|
--prompt-suggestion-highlight-color-selected: var(--color-l-gray-130);
|
|
--prompt-suggestion-background-selected: rgba(255, 255, 255, 0.35);
|
|
--prompt-suggestion-shadow-selected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
|
|
0px 2px 6px 0px rgba(0, 0, 0, 0.03);
|
|
--prompt-instructions-background: color-mix(in hsl, var(--background-primary) 60%, var(--background-secondary));
|
|
--prompt-separator-border: 1px solid var(--color-l-gray-40);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
/* Text Input */
|
|
--background-modifier-form-field: var(--color-l-gray-30);
|
|
--input-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.1),
|
|
0px 2px 4px -1px rgba(0, 0, 0, 0.05);
|
|
--input-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.15),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--input-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.09),
|
|
inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.6);
|
|
--text-input-color: var(--color-l-gray-130);
|
|
--text-input-color-focused: var(--color-l-gray-130);
|
|
--text-input-bg-active: color-mix(in hsl, var(--background-modifier-form-field) 40%, var(--color-l-gray-10));
|
|
--text-input-border-color: var(--color-l-gray-60);
|
|
--text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04), 0px 1px 6px 0px rgba(0, 0, 0, 0.07);
|
|
/* Emphasis */
|
|
--underline-color: var(--text-normal);
|
|
--underline-decoration-color: color-mix(in srgb, currentColor var(--underline-decoration-opacity), transparent);
|