mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
refactor: rm previous light/dark theme hacks
This commit is contained in:
axolotle
parent
1f45899d4b
commit
ad2f792e8b
3 changed files with 0 additions and 380 deletions
|
|
@ -1,250 +0,0 @@
|
|||
@use 'sass:math';
|
||||
|
||||
// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
|
||||
// Those functions overrides built-in bootstrap's computation color functions (that
|
||||
// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
|
||||
// variables to be used as primary colors and be instead computed on the fly with `calc()`s
|
||||
|
||||
@function is-color($color) {
|
||||
@if (type-of($color) == color) {
|
||||
@return true;
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@function count-occurrences($string, $search) {
|
||||
$searchIndex: str-index($string, $search);
|
||||
$searchCount: 0;
|
||||
@while $searchIndex {
|
||||
$searchCount: $searchCount + 1;
|
||||
$string: str-slice($string, $searchIndex + 1);
|
||||
$searchIndex: str-index($string, $search);
|
||||
}
|
||||
@return $searchCount;
|
||||
}
|
||||
|
||||
@function str-is-between($string, $first, $last) {
|
||||
$firstCount: count-occurrences($string, $first);
|
||||
$lastCount: count-occurrences($string, $last);
|
||||
@return $firstCount == $lastCount;
|
||||
}
|
||||
|
||||
@function recursive-color($color, $index: 0) {
|
||||
$indices: (
|
||||
0: h,
|
||||
1: s,
|
||||
2: l,
|
||||
3: a,
|
||||
);
|
||||
// find end of part
|
||||
$end: str-index($color, ',');
|
||||
@while (
|
||||
$end and not str-is-between(str-slice($color, 0, $end - 1), '(', ')')
|
||||
) {
|
||||
$newEnd: str-index(str-slice($color, $end + 1), ',');
|
||||
@if (not $newEnd) {
|
||||
$newEnd: 0;
|
||||
}
|
||||
$end: 2 + $end + $newEnd;
|
||||
}
|
||||
@if ($end) {
|
||||
$part: str-slice($color, 0, $end - 1);
|
||||
$value: map-merge(
|
||||
(
|
||||
map-get($indices, $index): $part,
|
||||
),
|
||||
recursive-color(str-slice($color, $end + 1), $index + 1)
|
||||
);
|
||||
@return $value;
|
||||
}
|
||||
@return ();
|
||||
}
|
||||
|
||||
@function to-hsl($color) {
|
||||
$c: inspect($color);
|
||||
|
||||
$h: 0;
|
||||
$s: 0;
|
||||
$l: 0;
|
||||
$a: 1;
|
||||
|
||||
@if (is-color($color)) {
|
||||
// std color
|
||||
$h: hue($color);
|
||||
$s: saturation($color);
|
||||
$l: lightness($color);
|
||||
$a: alpha($color);
|
||||
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@if (str-slice($c, 0, 3) == 'var') {
|
||||
// var(--color)
|
||||
$commaPos: str-index($c, ',');
|
||||
$end: -2;
|
||||
@if ($commaPos) {
|
||||
$end: $commaPos - 1;
|
||||
}
|
||||
$var: str-slice($c, 7, $end);
|
||||
|
||||
$h: var(--#{$var}-h);
|
||||
$s: var(--#{$var}-s);
|
||||
$l: var(--#{$var}-l);
|
||||
$a: var(--#{$var}-a, 1);
|
||||
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@if ($c == '0') {
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
// color is (maybe complex) calculated color
|
||||
// e.g.: hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2)), hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2))
|
||||
$startPos: str-index($c, '(');
|
||||
$c: str-slice($c, $startPos + 1, -2); // 3 or 4 comma-separated vomplex values
|
||||
@return recursive-color($c);
|
||||
// $hEnd: str-index($c, ',');
|
||||
// @if ($hEnd) {
|
||||
// $h: str-slice($c, 0, $hEnd - 1);
|
||||
// $c: str-slice($c, $hEnd + 1);
|
||||
// $sEnd: str-index($c, ',');
|
||||
// @if ($hEnd) {
|
||||
// $h: str-slice($c, 0, $hEnd - 1);
|
||||
// $c: str-slice($c, $hEnd + 1);
|
||||
// $sEnd: str-index($c, ',');
|
||||
// }
|
||||
// }
|
||||
|
||||
// @return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@function render-hsla($h, $s, $l, $a: 1) {
|
||||
// @return hsla($h, #{$s}, #{$l}, $a);
|
||||
// Error when using sass `hsla` with css variables, fallback to browser native `hsla`
|
||||
@return unquote('hsla(#{$h}, #{$s}, #{$l}, #{$a})');
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@if (is-color($color)) {
|
||||
@return scale-color($color: $color, $lightness: $amount);
|
||||
}
|
||||
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
@return render-hsla($h, $s, calc(#{$l} + #{$amount}), $a);
|
||||
}
|
||||
|
||||
@function darken($color, $amount) {
|
||||
@return lighten($color, $amount * -1);
|
||||
}
|
||||
|
||||
@function rgba($red, $green, $blue: false, $alpha: false) {
|
||||
$color: $red;
|
||||
|
||||
@if (not $blue and not $alpha) {
|
||||
$alpha: $green;
|
||||
$color: $red;
|
||||
}
|
||||
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
@return render-hsla($h, $s, $l, $alpha);
|
||||
}
|
||||
|
||||
@function rgb($red, $green, $blue) {
|
||||
@return rgba($red, $green, $blue, 1);
|
||||
}
|
||||
|
||||
@function mix($color-1, $color-2, $weight: 50%) {
|
||||
$c1: to-hsl($color-1);
|
||||
$c2: to-hsl($color-2);
|
||||
|
||||
$h1: map-get($c1, h);
|
||||
$s1: map-get($c1, s);
|
||||
$l1: map-get($c1, l);
|
||||
$a1: map-get($c1, a);
|
||||
|
||||
$h2: map-get($c2, h);
|
||||
$s2: map-get($c2, s);
|
||||
$l2: map-get($c2, l);
|
||||
$a2: map-get($c2, a);
|
||||
|
||||
$h: calc((#{$h1} + #{$h2}) / 2);
|
||||
$s: calc((#{$s1} + #{$s2}) / 2);
|
||||
$l: calc((#{$l1} + #{$l2}) / 2);
|
||||
$a: calc((#{$a1} + #{$a2}) / 2);
|
||||
|
||||
@return render-hsla($h, $s, $l, $a);
|
||||
}
|
||||
|
||||
@function fade-in($color, $amount) {
|
||||
$c: to-hsl($color);
|
||||
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
@if (not $a) {
|
||||
$a: 1;
|
||||
}
|
||||
|
||||
@return render-hsla($h, $s, $l, $a + $amount);
|
||||
}
|
||||
|
||||
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
||||
@if (is-color($color)) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= $yiq-contrasted-threshold) {
|
||||
@return $dark;
|
||||
} @else {
|
||||
@return $light;
|
||||
}
|
||||
} @else {
|
||||
$c: to-hsl($color);
|
||||
$l: map-get($c, l);
|
||||
|
||||
$th: calc($yiq-contrasted-threshold / 2.56); // convert hex to dec
|
||||
$lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
|
||||
|
||||
// ignoring hue and saturation, just a light or dark gray
|
||||
@return render-hsla(0, 0%, $lightness, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a?permalink_comment_id=4053335#gistcomment-4053335
|
||||
@function theme-color-level($color-name: 'primary', $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
@if ($level == 0) {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
$amount: math.div($theme-color-interval * abs($level), 100%);
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
|
||||
@if ($level > 0) {
|
||||
// Darken -X%: L = L * (1 - X)
|
||||
// $rl: calc((#{$l} * #{1 - $amount}));
|
||||
$rl: calc((#{$l} * #{$amount}));
|
||||
@return render-hsla($h, $s, $rl, $a);
|
||||
}
|
||||
@if ($level < 0) {
|
||||
// Ligthen +X%: L = L + X * (100 - L)
|
||||
$rl: calc(#{$l} + #{$amount} * (100% - #{$l}));
|
||||
@return render-hsla($h, $s, $rl, $a);
|
||||
}
|
||||
}
|
||||
|
|
@ -57,15 +57,6 @@ $theme-colors: (
|
|||
'best': $purple,
|
||||
);
|
||||
|
||||
$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
|
||||
|
||||
$alert-bg-level: -10;
|
||||
$alert-border-level: -9;
|
||||
$alert-color-level: 5;
|
||||
|
||||
$list-group-item-bg-level: -11;
|
||||
$list-group-item-color-level: 6;
|
||||
|
||||
$code-color: $black;
|
||||
|
||||
// Replace font-weight 300 with 200
|
||||
|
|
@ -107,25 +98,7 @@ $card-spacer-x: 1rem;
|
|||
|
||||
$list-group-item-padding-x: 1rem;
|
||||
|
||||
// Hard coded for scss compilation to pass
|
||||
$b-toast-background-opacity: 100%;
|
||||
|
||||
// fixes for svg icon color not working with css variables
|
||||
@function get-checkbox-icon-checked($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
|
||||
}
|
||||
|
||||
@function get-checkbox-icon-indeterminate($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$color}' d='M0 2h4'/></svg>");
|
||||
}
|
||||
|
||||
$custom-checkbox-indicator-icon-checked: get-checkbox-icon-checked('%23fff');
|
||||
$custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
|
||||
'%23fff'
|
||||
);
|
||||
|
||||
// Import default variables after the above setup to compute all other variables.
|
||||
@import '_functions-override.scss';
|
||||
@import '~bootstrap/scss/variables';
|
||||
@import '~bootstrap/scss/variables-dark';
|
||||
@import '~bootstrap/scss/maps';
|
||||
|
|
|
|||
|
|
@ -51,109 +51,6 @@
|
|||
@import 'font';
|
||||
@import '~fork-awesome/scss/fork-awesome.scss';
|
||||
|
||||
// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
|
||||
@mixin hsl-color($name, $h, $s, $l) {
|
||||
--#{$name}: hsl(#{$h}, #{$s}, #{$l});
|
||||
--#{$name}-h: #{$h};
|
||||
--#{$name}-s: #{$s};
|
||||
--#{$name}-l: #{$l};
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--yiq-contrasted-threshold: 150;
|
||||
|
||||
@include hsl-color('white', 0, 0%, 100%);
|
||||
@include hsl-color('black', 0, 0%, 0%);
|
||||
@include hsl-color('blue', 211, 64%, 50%);
|
||||
@include hsl-color('indigo', 263, 90%, 51%);
|
||||
@include hsl-color('purple', 280, 61%, 50%);
|
||||
@include hsl-color('pink', 332, 79%, 58%);
|
||||
@include hsl-color('red', 354, 70%, 54%);
|
||||
@include hsl-color('orange', 27, 98%, 54%);
|
||||
@include hsl-color('yellow', 45, 100%, 66%);
|
||||
@include hsl-color('green', 134, 61%, 41%);
|
||||
@include hsl-color('teal', 162, 73%, 46%);
|
||||
@include hsl-color('cyan', 188, 78%, 41%);
|
||||
|
||||
@include hsl-color('gray-100', 210, 17%, 98%);
|
||||
@include hsl-color('gray-200', 210, 16%, 93%);
|
||||
@include hsl-color('gray-300', 210, 14%, 89%);
|
||||
@include hsl-color('gray-400', 210, 14%, 83%);
|
||||
@include hsl-color('gray-500', 210, 11%, 71%);
|
||||
@include hsl-color('gray-600', 208, 7%, 46%);
|
||||
@include hsl-color('gray-700', 210, 9%, 31%);
|
||||
@include hsl-color('gray-800', 210, 10%, 23%);
|
||||
@include hsl-color('gray-900', 210, 11%, 15%);
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant(
|
||||
$color,
|
||||
theme-color-level($color, $list-group-item-bg-level),
|
||||
theme-color-level($color, $list-group-item-color-level)
|
||||
);
|
||||
|
||||
.btn-#{$color} {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dark-theme='true'] {
|
||||
color-scheme: dark; // Ask browser to use dark mode native styling
|
||||
|
||||
--yiq-contrasted-threshold: 120;
|
||||
|
||||
@include hsl-color('white', 256, 0%, 12.5%);
|
||||
@include hsl-color('black', 256, 0%, 100%);
|
||||
@include hsl-color('blue', 210.7, 95.5%, 65.5%);
|
||||
@include hsl-color('purple', 280, 77.8%, 62.9%);
|
||||
@include hsl-color('red', 0, 100%, 67.6%);
|
||||
@include hsl-color('green', 134.3, 74.4%, 67.8%);
|
||||
@include hsl-color('cyan', 188.4, 91.4%, 72.5%);
|
||||
|
||||
@include hsl-color('gray-900', 256, 0%, 98%);
|
||||
@include hsl-color('gray-800', 256, 0%, 93%);
|
||||
@include hsl-color('gray-700', 256, 0%, 89%);
|
||||
@include hsl-color('gray-600', 256, 0%, 83%);
|
||||
@include hsl-color('gray-500', 256, 0%, 71%);
|
||||
@include hsl-color('gray-400', 256, 0%, 46%);
|
||||
@include hsl-color('gray-300', 256, 0%, 31%);
|
||||
@include hsl-color('gray-200', 256, 0%, 23%);
|
||||
@include hsl-color('gray-100', 256, 0%, 15%);
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant(
|
||||
$color,
|
||||
theme-color-level($color, -6),
|
||||
theme-color-level($color, 2)
|
||||
);
|
||||
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(
|
||||
theme-color-level($color, -6),
|
||||
theme-color-level($color, -5),
|
||||
theme-color-level($color, 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// FIX svg fill not working with CSS variables
|
||||
.custom-checkbox .custom-control-input {
|
||||
&:checked ~ .custom-control-label::after {
|
||||
background-image: escape-svg(get-checkbox-icon-checked('#202020'));
|
||||
}
|
||||
|
||||
&:indeterminate ~ .custom-control-label::after {
|
||||
background-image: escape-svg(get-checkbox-icon-indeterminate('#202020'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style overrides happens after dependencies imports
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue