Skip to content

Instantly share code, notes, and snippets.

@dobromir-hristov
Created October 7, 2020 16:34
Show Gist options
  • Save dobromir-hristov/868f13386da13a0e05588fefc5b6e781 to your computer and use it in GitHub Desktop.
Save dobromir-hristov/868f13386da13a0e05588fefc5b6e781 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$is-target-ide: true;
$app-mode: if($is-target-ide, ide, default);
$base-colors: (
glyph-gray: (
light: pink,
dark: purple
),
glyph-gray-secondary: (
light: rgb(110, 110, 115),
dark: rgb(134, 134, 139)
),
);
$component-colors: ();
// fetch a color from provided map. This handles color variant automatically.
@function -get-color-from($map, $args...){
$color-map: map-deep-get($map, $args);
@if(type-of($color-map) != map) {
@return $color-map;
}
// if it is in `ide` mode, get that, fallback to default if not available, fallback to value if also not avail.
$color: map-get-default($color-map, $app-mode, map-get-default($color-map, default, $color-map));
// if its still a map, get the `light` variant. We cant know color preference.
@if(type-of($color) == map) {
@return map-get($color, light);
}
// if its not a map, then we are ready to return
@return $color
}
@function get-color($args...){
// try to get the color from the base colors
$baseColor: -get-color-from($base-colors, $args...);
// try to get the color from the component colors
$componentColor: -get-color-from($component-colors, $args...);
// return whichever is available
@return if($baseColor, $baseColor, $componentColor);
}
@function map-deep-get($map, $keys, $default: null) {
$value: $map;
// Loop through every key except the last one, keeping track of each
// corresponding value in the map
@for $i from 1 to length($keys) {
$key: nth($keys, $i);
// make sure $value is a map, so we dont error out
@if(type-of($value) != map) {
$value: ();
}
$value: map-get-default($value, $key, ());
}
// Return the value for the last key or a default value
@return map-get-default($value, nth($keys, -1), $default);
}
@function map-get-default($map, $key, $default) {
@return if(map-has-key($map, $key), map-get($map, $key), $default);
}
// set a color for a property. Automatically resolves light/dark/ide colors.
@mixin set-color-for($property-name, $color, $color-var: null) {
// fetch the color from the components
$palette: map-deep-get($component-colors, $color);
// if its a map, set the colors
@if type-of($palette) == map {
@include -set-color-per-mode($property-name, $palette, $color-var);
} @else {
// otherwise just set the fetched color
#{$property-name}: $palette;
}
}
@function -if-color-var($color-var, $color-fallback) {
@return if($color-var, var($color-var, $color-fallback), $color-fallback);
}
@mixin -set-color-per-mode($property-name, $palette, $color-var: null) {
// get the default color
$default-color: map-get-default($palette, default, ());
// set default variants
$default-color-light: $default-color;
$default-color-dark: null;
// get IDE color
$ide-color: map-get-default($palette, ide, null);
// set IDE variants
$ide-color-light: $ide-color;
$ide-color-dark: null;
// if its a map, extract the light/dark variants
@if(type-of($default-color) == map){
$default-color-light: map-get-default($default-color, light, null);
$default-color-dark: map-get-default($default-color, dark, null);
}
// if its a map, get the light/dark variants
@if(type-of($ide-color) == map){
$ide-color-light: map-get-default($ide-color, light, null);
$ide-color-dark: map-get-default($ide-color, dark, null);
}
// set the light and dark colors to apply for the property
$color: -if-color-var($color-var, $default-color-light);
$color-dark: -if-color-var($color-var, $default-color-dark);
// overwrite the colors, for IDE mode
@if $is-target-ide == true {
$color: -if-color-var($color-var, if($ide-color-light, $ide-color-light, $default-color-light));
@if ($ide-color-dark) {
$color-dark: $ide-color-dark;
}
}
// apply the colors to the property
#{$property-name}: $color;
@media (prefers-color-scheme: dark) {
#{$property-name}: -if-color-var($color-var, $color-dark);
}
}
$component-colors: (
links-item-border: (
default: -get-color-from($base-colors, glyph-gray),
ide: links-item-border-ide
),
link-item-bg: (
default: (
light: link-item-bg-default-light,
dark: link-item-bg-default-dark,
),
ide: (
light: link-item-bg-ide-light,
dark: link-item-bg-ide-dark
)
),
nested: (
deeply: (
link-item-bg: (
default: (
light: link-item-bg-default-light,
dark: link-item-bg-default-dark,
),
ide: (
light: link-item-bg-ide-light,
dark: get-color(glyph-gray, dark)
)
)
)
)
);
.thing {
// color-only: get-color(links-item-border);
// color-only-with-deep-map: get-color(link-item-bg);
// color-mode: get-color(link-item-bg, default);
// color-mode-ide: get-color(link-item-bg, ide);
// color-mode-variant: get-color(link-item-bg, default, light);
// invalid-color: get-color(link-item-b, default, light);
@include set-color-for(color, (link-item-bg));
@include set-color-for(background-color, (links-item-border));
@include set-color-for(border-color, (nested, deeply, link-item-bg));
}
.thing {
color: link-item-bg-ide-light;
background-color: links-item-border-ide;
border-color: link-item-bg-ide-light;
}
@media (prefers-color-scheme: dark) {
.thing {
color: link-item-bg-ide-dark;
}
}
@media (prefers-color-scheme: dark) {
.thing {
border-color: purple;
}
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment