63 lines
1.6 KiB
SCSS
63 lines
1.6 KiB
SCSS
|
$_light: (
|
||
|
|
// 1. text
|
||
|
|
// 1.1 for headings
|
||
|
|
text-accent: hsl(240, 31%, 25%),
|
||
|
|
// 1.2 for base text
|
||
|
|
text: hsl(0, 0%, 24%),
|
||
|
|
// 1.3 for subtle text like metadata
|
||
|
|
text-muted: hsl(204, 4%, 35%),
|
||
|
|
// 2. bg
|
||
|
|
// 2.1 for cards, headers, footers,
|
||
|
|
bg-accent: hsl(339, 100%, 97%),
|
||
|
|
// 2.2 for base bg
|
||
|
|
bg: hsl(0, 0%, 100%),
|
||
|
|
// 2.3 for hover state of cards
|
||
|
|
bg-muted: rgb(255, 229, 239),
|
||
|
|
// 3. links
|
||
|
|
// 3.1 the default one.
|
||
|
|
link: hsl(219, 100%, 20%),
|
||
|
|
link-muted: hsl(344, 79%, 40%),
|
||
|
|
// 4. for icons, borders
|
||
|
|
fill: hsl(339, 100%, 36%),
|
||
|
|
// 4.2 for borders, primarily
|
||
|
|
fill-muted: hsl(0, 0%, 80%),
|
||
|
|
// shadows on cards
|
||
|
|
shadow: 0 0 1rem hsla(0, 0%, 0%, 0.2),
|
||
|
|
// keyboard, focus hightlight
|
||
|
|
highlight: hsl(176, 43%, 46%),
|
||
|
|
// for gradient behind hero text on about page.
|
||
|
|
gradient:
|
||
|
|
(
|
||
|
|
radial-gradient(
|
||
|
|
at 23% 32%,
|
||
|
|
hsla(344, 79%, 40%, 0.15) 0px,
|
||
|
|
transparent 70%
|
||
|
|
),
|
||
|
|
radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
|
||
|
|
$_dark: (
|
||
|
|
text-accent: hsl(0, 0%, 100%),
|
||
|
|
text: hsl(0, 0%, 96%),
|
||
|
|
text-muted: hsl(0, 0%, 80%),
|
||
|
|
bg-accent: hsl(221, 39%, 15%),
|
||
|
|
bg: hsl(221, 39%, 11%),
|
||
|
|
bg-muted: rgb(20, 28, 46),
|
||
|
|
link: hsl(339, 95%, 80%),
|
||
|
|
link-muted: hsl(344, 79%, 80%),
|
||
|
|
fill: hsl(339, 75%, 64%),
|
||
|
|
fill-muted: hsl(0, 0, 35%),
|
||
|
|
shadow: hsla(0, 0%, 0%, 1),
|
||
|
|
highlight: hsl(176, 43%, 46%),
|
||
|
|
gradient: (
|
||
|
|
radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.04) 0px, transparent 70%),
|
||
|
|
radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.05) 0px, transparent 50%),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
|
||
|
|
$themes: (
|
||
|
|
light: $_light,
|
||
|
|
dark: $_dark,
|
||
|
|
);
|