@ -1,46 +1,9 @@
|
||||
$_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 0.5em 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%)
|
||||
),
|
||||
// changes color of native html elemnts, either 'light' or 'dark' must be set.
|
||||
scheme: light
|
||||
);
|
||||
|
||||
$_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: #000,
|
||||
bg-muted: rgb(20, 28, 46),
|
||||
link: hsl(339, 95%, 80%),
|
||||
link-muted: hsl(344, 79%, 80%),
|
||||
@ -56,6 +19,5 @@ $_dark: (
|
||||
);
|
||||
|
||||
$themes: (
|
||||
light: $_light,
|
||||
dark: $_dark,
|
||||
light: $_dark, // yes
|
||||
);
|
||||
|
Reference in New Issue
Block a user