// Site Color Config
$colors: (
'white-a': #fff, 'white-b': #dcdcdc, 'white-c': #ddd, 'red-a': rgb(117, 45, 45), 'red-b': rgb(139, 49, 49), 'red-c': rgb(223, 79, 79), 'red-d': rgb(175, 63, 63), 'red-e': #b75251, 'gray-a': #555, 'black-a': #000000, 'black-c': #101010, 'black-d': #2b2b2b, 'black-e': #222, 'black-b': rgb(75, 75, 75)
);
// Light theme colors
$light-theme: (
'fill-main': map-get( $colors, 'white-a' ), 'fill-main-a': map-get( $colors, 'white-a' ), 'fill-main-b': map-get( $colors, 'white-b' ), 'fill-mute': map-get($colors, 'white-c' ), 'fill-gallery': map-get( $colors, 'gray-a' ), 'fill-banner': map-get( $colors, 'red-e' ), 'fill-overlay': #0002, 'scribe-action': map-get( $colors, 'red-a'), 'scribe-action-hover': map-get( $colors, 'red-b'), 'fill-code': map-get($colors, 'black-d'), 'scribe-code': map-get($colors, 'white-b'), 'scribe-white': map-get( $colors, 'white-a'), 'scribe-main': map-get( $colors, 'black-a'), 'scribe-main-a': map-get( $colors, 'black-a'), 'scribe-main-b': map-get( $colors, 'black-b'), 'scribe-mute': map-get( $colors, 'gray-a'), 'scribe-invert': map-get( $colors, 'white-a')
);
// Dark theme colors
$dark-theme: (
'fill-main': map-get( $colors, 'black-d'), 'fill-main-a': map-get( $colors, 'black-d'), 'fill-main-b': map-get( $colors, 'black-c'), 'fill-mute': map-get($colors, 'black-e' ), 'fill-gallery': map-get( $colors, 'black-d'), 'fill-banner': map-get( $colors, 'red-e'), 'fill-overlay': #0002, 'fill-code': map-get($colors, 'black-c'), 'scribe-code': map-get($colors, 'white-b'), 'scribe-action': map-get( $colors, 'red-c'), 'scribe-action-hover': map-get( $colors, 'red-d'), 'scribe-white': map-get( $colors, 'white-a'), 'scribe-main': map-get( $colors, 'white-a'), 'scribe-main-a': map-get( $colors, 'white-a'), 'scribe-main-b': map-get( $colors, 'white-b'), 'scribe-mute': map-get( $colors, 'gray-a'), 'scribe-invert': map-get( $colors, 'white-a')
);
// Scribe colors are text color, // or any color that takes up a small area of the page // // this generates css class tokens // ie. `.scribe-main { color: var(–scribe-main-a); } `
$scribe-colors: (
'main': 'var(--scribe-main-a)', 'main-a': 'var(--scribe-main-a)', 'main-b': 'var(--scribe-main-b)', 'scribe-mute': 'var(--scribe-mute)', 'invert': 'var(--scribe-invert)'
);
// Fill colors are background color, // or any color that takes up a large area of the page // // this will generate css class tokens as well // ie. `.fill-banner { color: var(–fill-banner); } `
$fill-colors: (
'banner': 'var(--fill-banner)', 'overlay': 'var(--fill-overlay)', 'gallery': 'var(--fill-gallery)', 'main': 'var(--fill-main-a)', 'main-a': 'var(--fill-main-a)', 'main-b': 'var(--fill-main-b)'
);