176 lines
4.9 KiB
SCSS
176 lines
4.9 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.65rem;
|
|
$font-size-2xs: 0.695rem;
|
|
$font-size-xs: 0.765rem;
|
|
$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-size-6xl: 3.75rem;
|
|
$font-size-7xl: 5rem;
|
|
$font-size-8xl: 6.5rem;
|
|
|
|
// ============================================================================
|
|
// FONT WEIGHTS
|
|
// ============================================================================
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
$font-weight-black: 900;
|
|
|
|
// ============================================================================
|
|
// 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;
|
|
$tracking-widest: 0.1em;
|
|
|
|
// ============================================================================
|
|
// COLORS
|
|
// ============================================================================
|
|
$white: hsl(220, 15%, 97%);
|
|
$black: hsl(227, 21%, 4%);
|
|
|
|
$bg-page: hsl(260, 16%, 10%);
|
|
$bg-card: hsl(260, 18%, 6%);
|
|
|
|
$bg-landing: hsl(260, 16%, 10%);
|
|
|
|
$bg-default: hsl(260, 18%, 7%);
|
|
$bg-alternative: hsl(260, 18%, 5.5%);
|
|
$bg-surface-75: hsl(260, 15%, 9.5%);
|
|
$bg-surface-100: hsl(260, 13%, 12.5%);
|
|
$bg-surface-200: hsl(260, 11%, 14.5%);
|
|
$bg-surface-300: hsl(260, 9%, 16.5%);
|
|
$bg-control: hsl(260, 15%, 10%);
|
|
$bg-selection: hsl(260, 9%, 19.5%);
|
|
$bg-overlay: hsl(260, 11%, 14.5%);
|
|
$bg-overlay-hover: hsl(260, 9%, 18.5%);
|
|
|
|
$border-muted: hsl(260, 12%, 21.5%);
|
|
$border-default: hsl(260, 9%, 28.5%);
|
|
$border-strong: hsl(260, 7%, 33.5%);
|
|
$border-stronger: hsl(260, 5%, 37.5%);
|
|
$border-control: hsl(260, 7%, 33.5%);
|
|
|
|
$text-default: hsl(255, 14%, 98%);
|
|
$text-light: hsl(258, 9%, 87%);
|
|
$text-lighter: hsl(258, 7%, 80%);
|
|
$text-muted: hsl(260, 9%, 50%);
|
|
|
|
$error-default: hsl(0, 72%, 51%);
|
|
$error-light: hsl(0, 72%, 65%);
|
|
|
|
$accent: hsl(160, 85%, 50%);
|
|
$accent-dim: hsl(160, 35%, 12%);
|
|
|
|
// ============================================================================
|
|
// 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%;
|