183 lines
5.0 KiB
SCSS
183 lines
5.0 KiB
SCSS
// ===================
|
|
// © AngelaMos | 2026
|
|
// _tokens.scss
|
|
// ===================
|
|
|
|
// ============================================================================
|
|
// SPACING (8px base system)
|
|
// ============================================================================
|
|
$space-0: 0;
|
|
$space-px: 1px;
|
|
$space-0-5: 0.125rem;
|
|
$space-1: 0.25rem;
|
|
$space-1-5: 0.375rem;
|
|
$space-2: 0.5rem;
|
|
$space-2-5: 0.625rem;
|
|
$space-3: 0.75rem;
|
|
$space-3-5: 0.875rem;
|
|
$space-4: 1rem;
|
|
$space-5: 1.25rem;
|
|
$space-6: 1.5rem;
|
|
$space-7: 1.75rem;
|
|
$space-8: 2rem;
|
|
$space-9: 2.25rem;
|
|
$space-10: 2.5rem;
|
|
$space-11: 2.75rem;
|
|
$space-12: 3rem;
|
|
$space-14: 3.5rem;
|
|
$space-16: 4rem;
|
|
$space-20: 5rem;
|
|
$space-24: 6rem;
|
|
$space-28: 7rem;
|
|
$space-32: 8rem;
|
|
|
|
// ============================================================================
|
|
// TYPOGRAPHY SCALE
|
|
// ============================================================================
|
|
$font-size-3xs: 0.625rem;
|
|
$font-size-2xs: 0.6875rem;
|
|
$font-size-xs: 0.75rem;
|
|
$font-size-sm: 0.875rem;
|
|
$font-size-base: 1rem;
|
|
$font-size-lg: 1.125rem;
|
|
$font-size-xl: 1.25rem;
|
|
$font-size-2xl: 1.5rem;
|
|
$font-size-3xl: 1.875rem;
|
|
$font-size-4xl: 2.25rem;
|
|
$font-size-5xl: 3rem;
|
|
|
|
// ============================================================================
|
|
// FONT WEIGHTS
|
|
// ============================================================================
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
|
|
// ============================================================================
|
|
// LINE HEIGHTS
|
|
// ============================================================================
|
|
$line-height-none: 1;
|
|
$line-height-tight: 1.2;
|
|
$line-height-snug: 1.375;
|
|
$line-height-normal: 1.5;
|
|
$line-height-relaxed: 1.625;
|
|
|
|
// ============================================================================
|
|
// LETTER SPACING
|
|
// ============================================================================
|
|
$tracking-tighter: -0.05em;
|
|
$tracking-tight: -0.025em;
|
|
$tracking-normal: 0;
|
|
$tracking-wide: 0.025em;
|
|
$tracking-wider: 0.05em;
|
|
|
|
// ============================================================================
|
|
// COLORS
|
|
// ============================================================================
|
|
$white: hsl(0, 0%, 100%);
|
|
$black: hsl(0, 0%, 0%);
|
|
|
|
// Auth
|
|
$bg-page: hsl(0, 0%, 10.5%);
|
|
$bg-card: hsl(0, 0%, 6.2%);
|
|
|
|
// Shell (sidebar/header vs content)
|
|
$bg-shell-base: hsl(0, 0%, 6.9%);
|
|
$bg-shell-dot: hsl(0, 0%, 11.8%);
|
|
|
|
// Main content area
|
|
$bg-content-base: hsl(0, 0%, 5.4%);
|
|
$bg-content-dot: hsl(0, 0%, 9.6%);
|
|
|
|
$bg-default: hsl(0, 0%, 7.1%);
|
|
$bg-alternative: hsl(0, 0%, 5.9%);
|
|
$bg-surface-75: hsl(0, 0%, 9%);
|
|
$bg-surface-100: hsl(0, 0%, 12.2%);
|
|
$bg-surface-200: hsl(0, 0%, 14.1%);
|
|
$bg-surface-300: hsl(0, 0%, 16.1%);
|
|
$bg-control: hsl(0, 0%, 10%);
|
|
$bg-selection: hsl(0, 0%, 19.2%);
|
|
$bg-overlay: hsl(0, 0%, 14.1%);
|
|
$bg-overlay-hover: hsl(0, 0%, 18%);
|
|
|
|
$border-muted: hsl(0, 0%, 11.1%);
|
|
$border-default: hsl(0, 0%, 18%);
|
|
$border-strong: hsl(0, 0%, 22.4%);
|
|
$border-stronger: hsl(0, 0%, 27.1%);
|
|
$border-control: hsl(0, 0%, 22.4%);
|
|
|
|
$text-default: hsl(0, 0%, 98%);
|
|
$text-light: hsl(0, 0%, 70.6%);
|
|
$text-lighter: hsl(0, 0%, 53.7%);
|
|
$text-muted: hsl(0, 0%, 30.2%);
|
|
|
|
$error-default: hsl(0, 72%, 51%);
|
|
$error-light: hsl(0, 72%, 65%);
|
|
|
|
$accent-green: hsl(120, 60%, 50%);
|
|
$accent-green-dim: hsl(120, 40%, 25%);
|
|
$accent-red: hsl(0, 70%, 55%);
|
|
$accent-red-dim: hsl(0, 40%, 20%);
|
|
$accent-blue: hsl(200, 70%, 50%);
|
|
$accent-yellow: hsl(45, 80%, 60%);
|
|
|
|
$terminal-bg: hsl(0, 0%, 5%);
|
|
|
|
// ============================================================================
|
|
// BORDER RADIUS
|
|
// ============================================================================
|
|
$radius-none: 0;
|
|
$radius-xs: 2px;
|
|
$radius-sm: 4px;
|
|
$radius-md: 6px;
|
|
$radius-lg: 8px;
|
|
$radius-xl: 12px;
|
|
$radius-full: 9999px;
|
|
|
|
// ============================================================================
|
|
// Z-INDEX SCALE
|
|
// ============================================================================
|
|
$z-hide: -1;
|
|
$z-base: 0;
|
|
$z-dropdown: 100;
|
|
$z-sticky: 200;
|
|
$z-fixed: 300;
|
|
$z-overlay: 400;
|
|
$z-modal: 500;
|
|
$z-popover: 600;
|
|
$z-tooltip: 700;
|
|
$z-toast: 800;
|
|
$z-max: 9999;
|
|
|
|
// ============================================================================
|
|
// TRANSITIONS
|
|
// ============================================================================
|
|
$duration-instant: 0ms;
|
|
$duration-fast: 100ms;
|
|
$duration-normal: 150ms;
|
|
$duration-slow: 200ms;
|
|
|
|
$ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
// ============================================================================
|
|
// BREAKPOINTS
|
|
// ============================================================================
|
|
$breakpoint-xs: 360px;
|
|
$breakpoint-sm: 480px;
|
|
$breakpoint-md: 768px;
|
|
$breakpoint-lg: 1024px;
|
|
$breakpoint-xl: 1280px;
|
|
$breakpoint-2xl: 1536px;
|
|
|
|
// ============================================================================
|
|
// CONTAINER WIDTHS
|
|
// ============================================================================
|
|
$container-xs: 20rem;
|
|
$container-sm: 24rem;
|
|
$container-md: 28rem;
|
|
$container-lg: 32rem;
|
|
$container-xl: 36rem;
|
|
$container-2xl: 42rem;
|
|
$container-full: 100%;
|