NotAShelf
3ccddce7fd
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: If8fe8b38c1d9c4fecd40ff71f88d2ae06a6a6964
256 lines
6.1 KiB
SCSS
256 lines
6.1 KiB
SCSS
// Background colors
|
|
$bg-0: #111118;
|
|
$bg-1: #18181f;
|
|
$bg-2: #1f1f28;
|
|
$bg-3: #26263a;
|
|
|
|
// Border colors
|
|
$border-subtle: rgba(255, 255, 255, 0.06);
|
|
$border: rgba(255, 255, 255, 0.09);
|
|
$border-strong: rgba(255, 255, 255, 0.14);
|
|
|
|
// Text colors
|
|
$text-0: #dcdce4;
|
|
$text-1: #a0a0b8;
|
|
$text-2: #6c6c84;
|
|
$text-3: #4a4a5e;
|
|
|
|
// Accent colors
|
|
$accent: #7c7ef5;
|
|
$accent-dim: rgba(124, 126, 245, 0.15);
|
|
$accent-text: #9698f7;
|
|
$accent-hover: #8b8df7;
|
|
|
|
// Semantic colors
|
|
$success: #3ec97a;
|
|
$error: #e45858;
|
|
$warning: #d4a037;
|
|
|
|
// Derived semantic colors with transparency
|
|
$error-bg: rgba(228, 88, 88, 0.06);
|
|
$error-border: rgba(228, 88, 88, 0.2);
|
|
$error-text: #d47070;
|
|
|
|
$success-bg: rgba(62, 201, 122, 0.08);
|
|
$success-border: rgba(62, 201, 122, 0.2);
|
|
|
|
$warning-bg: rgba(212, 160, 55, 0.06);
|
|
$warning-border: rgba(212, 160, 55, 0.15);
|
|
|
|
// Type badge colors
|
|
$type-audio-bg: rgba(139, 92, 246, 0.1);
|
|
$type-audio-text: #9d8be0;
|
|
|
|
$type-video-bg: rgba(200, 72, 130, 0.1);
|
|
$type-video-text: #d07eaa;
|
|
|
|
$type-image-bg: rgba(34, 160, 80, 0.1);
|
|
$type-image-text: #5cb97a;
|
|
|
|
$type-document-bg: rgba(59, 120, 200, 0.1);
|
|
$type-document-text: #6ca0d4;
|
|
|
|
$type-text-bg: rgba(200, 160, 36, 0.1);
|
|
$type-text-text: #c4a840;
|
|
|
|
$type-other-bg: rgba(128, 128, 160, 0.08);
|
|
|
|
// Action badge colors (audit)
|
|
$action-updated-bg: rgba(59, 120, 200, 0.1);
|
|
$action-updated-text: #6ca0d4;
|
|
|
|
$action-collection-bg: rgba(34, 160, 80, 0.1);
|
|
$action-collection-text: #5cb97a;
|
|
|
|
$action-collection-remove-bg: rgba(212, 160, 55, 0.1);
|
|
$action-collection-remove-text: #c4a840;
|
|
|
|
$action-opened-bg: rgba(139, 92, 246, 0.1);
|
|
$action-opened-text: #9d8be0;
|
|
|
|
$action-scanned-bg: rgba(128, 128, 160, 0.08);
|
|
|
|
// Role badge colors
|
|
$role-admin-bg: rgba(139, 92, 246, 0.1);
|
|
$role-admin-text: #9d8be0;
|
|
|
|
$role-editor-bg: rgba(34, 160, 80, 0.1);
|
|
$role-editor-text: #5cb97a;
|
|
|
|
$role-viewer-bg: rgba(59, 120, 200, 0.1);
|
|
$role-viewer-text: #6ca0d4;
|
|
|
|
// Graph colors
|
|
$graph-node-fill: #4caf50;
|
|
$graph-node-stroke: #388e3c;
|
|
$graph-node-hover: #66bb6a;
|
|
$graph-node-selected: #5456d6;
|
|
$graph-edge-embed: #9d8be0;
|
|
|
|
// Overlay backgrounds
|
|
$overlay-light: rgba(255, 255, 255, 0.03);
|
|
$overlay-medium: rgba(255, 255, 255, 0.04);
|
|
$overlay-strong: rgba(255, 255, 255, 0.06);
|
|
$overlay-subtle: rgba(255, 255, 255, 0.02);
|
|
|
|
// Inverse overlays (for light backgrounds)
|
|
$overlay-inverse-light: rgba(0, 0, 0, 0.06);
|
|
$overlay-inverse-medium: rgba(0, 0, 0, 0.08);
|
|
$overlay-inverse-strong: rgba(0, 0, 0, 0.12);
|
|
|
|
// Semantic variants
|
|
$error-light: rgba(228, 88, 88, 0.08);
|
|
$error-medium: rgba(228, 88, 88, 0.1);
|
|
$error-border-light: rgba(228, 88, 88, 0.25);
|
|
|
|
$success-light: rgba(62, 201, 122, 0.1);
|
|
|
|
$info-bg: rgba(99, 102, 241, 0.08);
|
|
$info-bg-light: rgba(99, 102, 241, 0.12);
|
|
$accent-border: rgba(124, 126, 245, 0.2);
|
|
|
|
$purple-bg: rgba(124, 126, 245, 0.04);
|
|
$purple-light: rgba(139, 92, 246, 0.08);
|
|
$purple-border: rgba(139, 92, 246, 0.3);
|
|
|
|
$warning-light: rgba(212, 160, 55, 0.1);
|
|
$warning-medium: rgba(212, 160, 55, 0.12);
|
|
|
|
$green-light: rgba(76, 175, 80, 0.06);
|
|
$green-medium: rgba(76, 175, 80, 0.12);
|
|
$green-text: #4caf50;
|
|
|
|
// UI element backgrounds
|
|
$btn-danger-hover: rgba(228, 88, 88, 0.08);
|
|
$btn-ghost-hover: rgba(255, 255, 255, 0.04);
|
|
$btn-secondary-hover: rgba(255, 255, 255, 0.06);
|
|
|
|
// Media viewer overlays
|
|
$media-overlay-bg: rgba(0, 0, 0, 0.92);
|
|
$media-overlay-medium: rgba(0, 0, 0, 0.5);
|
|
$media-overlay-light: rgba(0, 0, 0, 0.3);
|
|
$media-controls-bg: rgba(0, 0, 0, 0.7);
|
|
|
|
// Image viewer
|
|
$image-viewer-toolbar-bg: rgba(0, 0, 0, 0.5);
|
|
$image-viewer-border: rgba(255, 255, 255, 0.08);
|
|
$image-viewer-btn-bg: rgba(255, 255, 255, 0.06);
|
|
$image-viewer-btn-border: rgba(255, 255, 255, 0.1);
|
|
$image-viewer-btn-hover: rgba(255, 255, 255, 0.12);
|
|
|
|
// Shadows
|
|
$drop-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
// Gradients
|
|
$gradient-accent-end: #7c7ef3;
|
|
$gradient-success-end: #66bb6a;
|
|
|
|
// Light theme
|
|
$light-bg-0: #f5f5f7;
|
|
$light-bg-1: #eeeef0;
|
|
$light-bg-2: #ffffff;
|
|
$light-bg-3: #e8e8ec;
|
|
|
|
$light-border-subtle: rgba(0, 0, 0, 0.06);
|
|
$light-border: rgba(0, 0, 0, 0.1);
|
|
$light-border-strong: rgba(0, 0, 0, 0.16);
|
|
|
|
$light-text-0: #1a1a2e;
|
|
$light-text-1: #555570;
|
|
$light-text-2: #8888a0;
|
|
|
|
$light-accent: #6366f1;
|
|
$light-accent-dim: rgba(99, 102, 241, 0.1);
|
|
$light-accent-text: #4f52e8;
|
|
|
|
// Spacing
|
|
$space-1: 2px;
|
|
$space-2: 4px;
|
|
$space-3: 6px;
|
|
$space-4: 8px;
|
|
$space-5: 10px;
|
|
$space-6: 12px;
|
|
$space-7: 14px;
|
|
$space-8: 16px;
|
|
$space-10: 20px;
|
|
$space-12: 24px;
|
|
$space-16: 32px;
|
|
$space-20: 40px;
|
|
$space-24: 48px;
|
|
|
|
// Border radius
|
|
$radius-sm: 3px;
|
|
$radius: 5px;
|
|
$radius-md: 7px;
|
|
$radius-lg: 8px;
|
|
$radius-xl: 12px;
|
|
$radius-full: 50%;
|
|
|
|
// Shadows
|
|
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
$shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
$shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.45);
|
|
$shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
$light-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
$light-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
$light-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
|
|
|
|
// Typography
|
|
$font-family-base: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
|
|
$font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
$font-family-mono-alt: 'Menlo', 'Monaco', 'Courier New', monospace;
|
|
|
|
$font-size-xs: 9px;
|
|
$font-size-sm: 10px;
|
|
$font-size-base: 11px;
|
|
$font-size-md: 12px;
|
|
$font-size-lg: 13px;
|
|
$font-size-xl: 14px;
|
|
$font-size-2xl: 15px;
|
|
$font-size-3xl: 16px;
|
|
$font-size-4xl: 18px;
|
|
$font-size-5xl: 20px;
|
|
$font-size-6xl: 28px;
|
|
$font-size-7xl: 32px;
|
|
$font-size-8xl: 48px;
|
|
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
$line-height-tight: 1.2;
|
|
$line-height-base: 1.3;
|
|
$line-height-normal: 1.4;
|
|
$line-height-relaxed: 1.5;
|
|
$line-height-loose: 1.7;
|
|
|
|
$letter-spacing-tight: -0.4px;
|
|
$letter-spacing-normal: 0;
|
|
$letter-spacing-wide: 0.03em;
|
|
$letter-spacing-wider: 0.04em;
|
|
$letter-spacing-widest: 0.06em;
|
|
$letter-spacing-uppercase: 0.5px;
|
|
|
|
// Layout dimensions
|
|
$sidebar-width: 220px;
|
|
$sidebar-collapsed-width: 48px;
|
|
$header-height: 48px;
|
|
|
|
// Z-index scale
|
|
$z-base: 0;
|
|
$z-dropdown: 10;
|
|
$z-sticky: 20;
|
|
$z-fixed: 30;
|
|
$z-modal-backdrop: 100;
|
|
$z-modal: 200;
|
|
$z-toast: 300;
|
|
|
|
// Transitions
|
|
$transition-fast: 0.08s;
|
|
$transition-base: 0.1s;
|
|
$transition-slow: 0.15s;
|
|
$transition-slower: 0.2s;
|
|
$transition-timing-default: ease;
|
|
$transition-timing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|