Jonathan Stephens jonathan-stephens
jonathan-stephens
/ color-palette-generator.scss
Last active
September 26, 2024 20:50
Color palette generator mix-in for Sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use "sass:map"; | |
| @use "sass:meta"; | |
| @function generate-color-scale($base) { | |
| $scale: ( | |
| "05": color-mix(in oklab, $base, var(--palette-white) 90%), | |
| "10": color-mix(in oklab, $base, var(--palette-white) 80%), | |
| "20": color-mix(in oklab, $base, var(--palette-white) 60%), | |
| "30": color-mix(in oklab, $base, var(--palette-white) 40%), | |
| "40": color-mix(in oklab, $base, var(--palette-white) 20%), |
jonathan-stephens
/ custom-properties-boilerplate.css
Created
July 23, 2024 13:03
— forked from malarkey/custom-properties-boilerplate.css
CSS Custom Properties boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* CSS Custom Properties */ | |
| :root { | |
| --font-family: 'Georgia', serif; | |
| --font-family-alt: 'Helvetica', Arial, sans-serif; | |
| --font-weight: 400; | |
| --font-weight-bold: 700; | |
| --font-weight-black: 900; | |
| /* 3:4 perfect fourth scale */ |