Skip to content

Instantly share code, notes, and snippets.

@dobromir-hristov
Last active October 7, 2020 15:57
Show Gist options
  • Save dobromir-hristov/e53ffa71a1b4b7756afd5eb83ac5c86e to your computer and use it in GitHub Desktop.
Save dobromir-hristov/e53ffa71a1b4b7756afd5eb83ac5c86e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$base-colors: (
glyph-gray: (
light: pink,
dark: purple
),
glyph-gray-secondary: (
light: rgb(110, 110, 115),
dark: rgb(134, 134, 139)
),
);
@function -get-color-from($map, $args...){
$color-map: map-deep-get($map, $args);
@if(type-of($color-map) != map) {
@return $color-map;
}
// if it has `default` key, get it, otherwise return $color-map
$color: map-get-default($color-map, default, $color-map);
// if its still a map, get the `light` variant
@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...){
$baseColor: -get-color-from($base-colors, $args...);
$componentColor: -get-color-from($component-colors, $args...);
@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);
}
$component-colors: (
links-item-border: (
default: -get-color-from($base-colors, glyph-gray, dark),
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
)
)
);
.thing {
color-base: get-color(links-item-border);
// 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);
}
.thing {
color-base: 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