From ad2f792e8b9a2a25917365d4118890ecd83a3126 Mon Sep 17 00:00:00 2001 From: axolotle Date: Wed, 13 Mar 2024 19:55:20 +0100 Subject: [PATCH] refactor: rm previous light/dark theme hacks --- app/src/scss/_functions-override.scss | 250 -------------------------- app/src/scss/_variables.scss | 27 --- app/src/scss/main.scss | 103 ----------- 3 files changed, 380 deletions(-) delete mode 100644 app/src/scss/_functions-override.scss diff --git a/app/src/scss/_functions-override.scss b/app/src/scss/_functions-override.scss deleted file mode 100644 index 08cf131a..00000000 --- a/app/src/scss/_functions-override.scss +++ /dev/null @@ -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); - } -} diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss index a6cbd379..635adaf3 100644 --- a/app/src/scss/_variables.scss +++ b/app/src/scss/_variables.scss @@ -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,"); -} - -@function get-checkbox-icon-indeterminate($color) { - @return url("data:image/svg+xml,"); -} - -$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'; diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss index f485673b..2afaecb7 100644 --- a/app/src/scss/main.scss +++ b/app/src/scss/main.scss @@ -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