80 lines
2.0 KiB
Sass
80 lines
2.0 KiB
Sass
// abstracts/_variables.sass (updated)
|
|
|
|
@use 'sass:map'
|
|
|
|
// Color palette (Sass map: HSL for modularity; all lightnesses darkened ~10-20%)
|
|
$colors: (
|
|
'bg-dark': hsl(0, 0%, 2%),
|
|
'bg-darker': hsl(210, 7%, 5%),
|
|
'text-light': hsla(0, 0%, 100%, 1.00),
|
|
'text-lighter': hsl(120, 52%, 15%),
|
|
'text-muted': hsl(120, 40%, 45%),
|
|
'accent-light': hsl(120, 100%, 35%),
|
|
'accent-success': hsl(120, 80%, 45%),
|
|
'accent-warning': hsl(60, 100%, 35%),
|
|
'accent-error': hsl(0, 100%, 45%),
|
|
'border-light': hsla(120, 60%, 70%, 0.2)
|
|
)
|
|
|
|
// Helper functions to pull from map
|
|
@function color($key)
|
|
@return map.get($colors, $key)
|
|
|
|
// Direct vars for common use
|
|
$bg-dark: color('bg-dark') !default
|
|
$bg-darker: color('bg-darker') !default
|
|
$text-light: color('text-light') !default
|
|
$text-lighter: color('text-lighter') !default
|
|
$text-muted: color('text-muted') !default
|
|
$accent-light: color('accent-light') !default
|
|
$accent-success: color('accent-success') !default
|
|
$accent-warning: color('accent-warning') !default
|
|
$accent-error: color('accent-error') !default
|
|
$border-light: color('border-light') !default
|
|
|
|
$font-stack: 'Courier New', 'SF Mono', monospace
|
|
$mono-font: 'Courier New', 'SF Mono', 'Fira Code', Consolas, monospace
|
|
|
|
$spacing: (
|
|
'xs': 0.25rem,
|
|
'sm': 0.5rem,
|
|
'md': 1rem,
|
|
'lg': 1.5rem,
|
|
'xl': 2.5rem,
|
|
'2xl': 4rem
|
|
)
|
|
|
|
@function space($key)
|
|
@return map.get($spacing, $key)
|
|
|
|
$breakpoints: (
|
|
'sm': 640px,
|
|
'md': 768px,
|
|
'lg': 1024px,
|
|
'xl': 1280px,
|
|
'2xl': 1536px
|
|
)
|
|
|
|
$z-index: (
|
|
'dropdown': 1000,
|
|
'sticky': 50,
|
|
'modal': 2000
|
|
)
|
|
|
|
@function z($key)
|
|
@return map.get($z-index, $key)
|
|
|
|
$dark-mode: true !default
|
|
|
|
:root
|
|
--bg-dark: #{color('bg-dark')}
|
|
--bg-darker: #{color('bg-darker')}
|
|
--text-light: #{color('text-light')}
|
|
--text-lighter: #{color('text-lighter')}
|
|
--text-muted: #{color('text-muted')}
|
|
--accent-light: #{color('accent-light')}
|
|
--accent-success: #{color('accent-success')}
|
|
--accent-warning: #{color('accent-warning')}
|
|
--accent-error: #{color('accent-error')}
|
|
--border-light: #{color('border-light')}
|
|
--font-stack: #{$font-stack} |