This repository has been archived on 2023-08-21. You can view files and clone it, but cannot push or open issues or pull requests.
bluesky-bootstrap-theme/scss/_palette.scss

96 lines
2.3 KiB
SCSS
Raw Normal View History

2019-11-06 12:18:15 +01:00
@use "sass:map";
// BASE PALETTE
$palette: ("blue":#4e63c9, "violet":#ce4dcd, "purple":#7951c0, "red":#e33d22, "orange":#eb790a, "green":#75b82d, "skyblue":#42a0f3, "dark": #2D2D2D, "light":#eeeeec, "turquoise": #46bd9e, "yellow": #f6d32d, "brown":#986a44, "grey":#77767b);
$semantics: ("primary":"purple", "secondary":"blue", "warning":"orange", "danger":"red", "info":"skyblue", "success":"green");
$whiteness_value: 0.8;
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map.get($palette, map.get($semantics, $name));
} @else {
@return map.get($palette, $name);
}
}
@function list-colors() {
$newmap: map.merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
@function getTextColorFromBackground($background-color, $light-color, $dark-color) {
@if (luminance($background-color ) < 255 * $whiteness_value) {
@return $light-color;
} @else {
@return $dark-color;
}
}
2019-11-06 12:18:15 +01:00
$color-primary: get-color("primary");
$color-secondary: get-color("secondary");
$color-warning: get-color("warning");
$color-danger: get-color("danger");
$color-info: get-color("info");
$color-success: get-color("success");
$color-link: get-color("blue");
$color-selection: get-color("blue");
$color-mark: get-color("yellow");
2019-11-05 12:49:13 +01:00
@mixin text-color($text-color) {
color: $text-color;
}
2019-11-06 12:18:15 +01:00
@mixin background-color($background-color, $light-color, $dark-color) {
2019-11-05 12:49:13 +01:00
background-color: $background-color!important;
color: getTextColorFromBackground($background-color, $light-color, $dark-color);
2019-11-06 12:18:15 +01:00
}
.text {
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name), #FFF, #000); }
}
2019-11-05 12:49:13 +01:00
}
2019-11-06 12:18:15 +01:00
// Direct uses of colors
2019-11-05 12:49:13 +01:00
a, a:hover, a:active {
color: $color-link;
}
::selection {
2019-11-06 12:18:15 +01:00
@include background-color($color-selection, #FFF, #000);
2019-11-05 12:49:13 +01:00
}
::-moz-selection {
2019-11-06 12:18:15 +01:00
@include background-color($color-selection, #FFF, #000);
2019-11-05 12:49:13 +01:00
}
mark {
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
}