From d1db02bcdcc486290881b35722ac49040963306a Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Mon, 13 Nov 2023 14:53:29 +0100 Subject: [PATCH] Dark mode: Utilities (bg, border, color) (#2362) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- .bundlewatch.config.json | 2 +- scss/_button-group.scss | 4 +- scss/_buttons.scss | 14 +- scss/_root.scss | 3 +- scss/_utilities.scss | 4 +- scss/_variables-dark.scss | 10 +- scss/_variables.scss | 40 +- scss/forms/_form-check.scss | 6 +- scss/helpers/_chevron-link.scss | 8 +- scss/helpers/_colored-links.scss | 2 +- site/content/docs/5.3/dark-mode.md | 960 ++++++++++++++---- site/content/docs/5.3/utilities/background.md | 21 +- site/content/docs/5.3/utilities/colors.md | 33 +- site/data/theme-colors.yml | 3 - 14 files changed, 825 insertions(+), 285 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index d34dace1c7..e0d78374e7 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -14,7 +14,7 @@ }, { "path": "./dist/css/boosted-reboot.min.css", - "maxSize": "4.25 kB" + "maxSize": "4.5 kB" }, { "path": "./dist/css/boosted-utilities.css", diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 77172b0844..e1d9da7762 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -140,11 +140,11 @@ .btn.active + &, &:active + * + .btn, &.active + * + .btn { - border-color: $primary; + border-color: $brand-orange; } .btn-group.show > &:not(:focus):not(:active)::before { - color: $primary; + color: $brand-orange; background-color: currentcolor; } // End mod diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a1133a604d..d4700169d3 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -98,7 +98,7 @@ // scss-docs-start btn-variant-loops .btn-primary { - @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg)); + @include button-variant($brand-orange, $brand-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg)); } .btn-success { @@ -131,15 +131,13 @@ @each $color, $value in $theme-colors { .btn-outline-#{$color} { - $btn-outline-hover-color: $white; - @if index(("primary", "warning", "info", "light"), #{$color}) { + $btn-outline-hover-color: var(--#{$prefix}highlight-color); + @if index(("primary", "warning", "light"), #{$color}) { $btn-outline-hover-color: $black; + } @else if (#{$color} == "dark") { + $btn-outline-hover-color: $white; } - @if #{$color} == "secondary" { - @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color)); - } @else { - @include button-outline-variant($value, $btn-outline-hover-color); - } + @include button-outline-variant(var(--#{$prefix}#{$color}), $btn-outline-hover-color); } } // scss-docs-end btn-variant-loops diff --git a/scss/_root.scss b/scss/_root.scss index e4326df544..b53df42ff1 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -35,7 +35,6 @@ --#{$prefix}#{$color}-border-subtle: #{$value}; } - --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)}; // Boosted mod --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; @@ -227,6 +226,8 @@ --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // Boosted mod --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // Boosted mod + --#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // Boosted mod + --#{$prefix}form-valid-color: #{$form-valid-color-dark}; --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4d3bb07853..9f680b8b69 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -593,7 +593,6 @@ $utilities: map-merge( "body-tertiary": var(--#{$prefix}tertiary-color), "body-emphasis": var(--#{$prefix}emphasis-color), "reset": inherit, - "primary": rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value ) ) ), @@ -680,7 +679,8 @@ $utilities: map-merge( "supporting-blue": $supporting-blue, // Boosted mod "supporting-yellow": $supporting-yellow, // Boosted mod "supporting-pink": $supporting-pink, // Boosted mod - "supporting-purple": $supporting-purple // Boosted mod + "supporting-purple": $supporting-purple, // Boosted mod + "supporting-orange": $brand-orange, // Boosted mod ) ) ), diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index abd521b9bf..55abf4e876 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -16,8 +16,8 @@ $functional-red-dark: #d53f15 !default; // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-color-dark-variables -$primary-dark: $orange !default; -$secondary-dark: $black !default; +$primary-dark: $brand-orange !default; +$secondary-dark: $white !default; $success-dark: $functional-green-dark !default; $info-dark: $functional-blue-dark !default; $warning-dark: $functional-yellow-dark !default; @@ -41,7 +41,7 @@ $theme-colors-dark: ( // End mod // scss-docs-start theme-text-dark-variables -$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: isntead of `tint-color($primary, 40%)` +$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: instead of `tint-color($primary, 40%)` $secondary-text-emphasis-dark: $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)` $success-text-emphasis-dark: $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)` $info-text-emphasis-dark: $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)` @@ -84,11 +84,13 @@ $border-color-dark: $white !default; // Boosted mod: instead of $border-color-translucent-dark: $gray-700 !default; // Boosted mod instead of `rgba($white, .15)` $headings-color-dark: $white !default; // Boosted mod: instead of `inherit` $link-color-dark: $white !default; // Boosted mod: instead of `tint-color($primary, 40%)` -$link-hover-color-dark: $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` +$link-hover-color-dark: $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` $code-color-dark: tint-color($code-color, 40%) !default; $mark-color-dark: $black !default; // Boosted mod: instead of `$body-color-dark` $mark-bg-dark: $white !default; // Boosted mod: instead of `$yellow-800` +$focus-ring-color-dark: rgba($brand-orange, $focus-ring-opacity) !default; // Boosted mod + $disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // Boosted mod $focus-visible-inner-color-dark: $black !default; // Boosted mod diff --git a/scss/_variables.scss b/scss/_variables.scss index 325215ecb1..6fda37077e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -63,7 +63,7 @@ $indigo: $supporting-purple !default; $purple: $supporting-purple !default; $pink: $supporting-pink !default; $red: $functional-red !default; -$orange: $brand-orange !default; +$orange: $accessible-orange !default; $yellow: $functional-yellow !default; $green: $functional-green !default; $teal: $supporting-green !default; @@ -344,7 +344,7 @@ $theme-colors: ( // scss-docs-end theme-colors-map // scss-docs-start theme-text-variables -$primary-text-emphasis: $accessible-orange !default; // Boosted mod: instead of `shade-color($primary, 60%)` +$primary-text-emphasis: $primary !default; // Boosted mod: instead of `shade-color($primary, 60%)` $secondary-text-emphasis: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 60%)` $success-text-emphasis: $success !default; // Boosted mod: instead of `shade-color($success, 60%)` $info-text-emphasis: $info !default; // Boosted mod: instead of `shade-color($info, 60%)` @@ -418,7 +418,9 @@ $svg-as-custom-props: ( //// Filters // see https://codepen.io/sosuke/pen/Pjoqqp $invert-filter: invert(1) !default; -$orange-filter: invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; +// fusv-disable +$orange-filter: invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; // Deprecated in v5.3.3 +// fusv-enable $disabled-filter: brightness(0) invert(1) brightness(.8) !default; // End mod @@ -668,7 +670,7 @@ $box-shadow-inset: null !default; // Boosted mod: instead of `inset 0 1px 2px r // scss-docs-end box-shadow-variables $component-active-color: $black !default; -$component-active-bg: $primary !default; +$component-active-bg: $brand-orange !default; // scss-docs-start focus-ring-variables $focus-ring-width: .25rem !default; @@ -987,8 +989,8 @@ $btn-border-width: $input-btn-border-width !default; $btn-default-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod $btn-default-hover-border: var(--#{$prefix}highlight-bg) !default; // Boosted mod $btn-default-hover-color: var(--#{$prefix}highlight-color) !default; // Boosted mod -$btn-default-active-bg: $primary !default; // Boosted mod -$btn-default-active-border: $primary !default; // Boosted mod +$btn-default-active-bg: $brand-orange !default; // Boosted mod +$btn-default-active-border: $brand-orange !default; // Boosted mod $btn-default-active-color: $black !default; // Boosted mod $btn-default-disabled-bg: var(--#{$prefix}disabled-color) !default; // Boosted mod $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod @@ -997,8 +999,8 @@ $btn-default-disabled-color: var(--#{$prefix}highlight-color) !default; // Boos $btn-outline-default-hover-bg: var(--#{$prefix}btn-color) !default; // Boosted mod $btn-outline-default-hover-border: var(--#{$prefix}btn-border-color) !default; // Boosted mod $btn-outline-default-hover-color: $white !default; // Boosted mod -$btn-outline-default-active-bg: $primary !default; // Boosted mod -$btn-outline-default-active-border: $primary !default; // Boosted mod +$btn-outline-default-active-bg: $brand-orange !default; // Boosted mod +$btn-outline-default-active-border: $brand-orange !default; // Boosted mod $btn-outline-default-active-color: $black !default; // Boosted mod $btn-outline-default-disabled-bg: transparent !default; // Boosted mod $btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod @@ -1056,7 +1058,7 @@ $btn-social-networks: ( "icon": "" ), "mail": ( - "color": $primary, + "color": $brand-orange, "icon": "", "size": 1.5rem ), @@ -1259,8 +1261,8 @@ $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1) $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod $form-switch-checked-square-bg: var(--#{$prefix}body-bg) !default; // Boosted mod -$form-switch-checked-bg: $primary !default; // Boosted mod -$form-switch-checked-border-color: $primary !default; // Boosted mod +$form-switch-checked-bg: $brand-orange !default; // Boosted mod +$form-switch-checked-border-color: $brand-orange !default; // Boosted mod $form-switch-checked-filter: none !default; // Boosted mod $form-switch-checked-focus-inner: var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod $form-switch-checked-focus-outer: var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod @@ -1324,7 +1326,7 @@ $form-range-track-width: 100% !default; $form-range-track-height: .375rem !default; // Boosted mod: instead of `.5rem` $form-range-track-cursor: pointer !default; $form-range-track-bg: var(--#{$prefix}secondary-bg) !default; -$form-range-track-filled-bg: $primary !default; // Boosted mod +$form-range-track-filled-bg: var(--#{$prefix}link-hover-color) !default; // Boosted mod $form-range-track-border-radius: null !default; // Boosted mod: instead of `1rem` $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; @@ -1337,8 +1339,8 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa $form-range-thumb-focus-box-shadow: null !default; // Boosted mod $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge $form-range-thumb-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod -$form-range-thumb-active-bg: $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)` -$form-range-thumb-active-border: $primary !default; // Boosted mod +$form-range-thumb-active-bg: var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)` +$form-range-thumb-active-border: var(--#{$prefix}link-hover-color) !default; // Boosted mod $form-range-thumb-disabled-bg: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow // scss-docs-end form-range-variables @@ -1562,8 +1564,8 @@ $navbar-badge-margin-top: .375rem !default; $navbar-dark-border-color: $gray-700 !default; // Boosted mod $navbar-dark-color: $white !default; // Boosted mod: instead of `rgba($white, .55)` -$navbar-dark-hover-color: $primary !default; // Boosted mod: instead of `rgba($white, .75)` -$navbar-dark-active-color: $primary !default; // Boosted mod: instead of `$white` +$navbar-dark-hover-color: $brand-orange !default; // Boosted mod: instead of `rgba($white, .75)` +$navbar-dark-active-color: $brand-orange !default; // Boosted mod: instead of `$white` $navbar-dark-disabled-color: $gray-700 !default; // Boosted mod: instead of `rgba($white, .25)` // Boosted mod: no $navbar-dark-icon-color // Boosted mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter @@ -1679,7 +1681,7 @@ $pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}b $pagination-icon-width: add(.5rem, 1px) !default; $pagination-icon-height: subtract(1rem, 1px) !default; -$pagination-active-item-bg: $primary !default; +$pagination-active-item-bg: $brand-orange !default; $pagination-active-item-color: $black !default; $pagination-active-item-border: $pagination-active-item-bg !default; // End mod @@ -2220,7 +2222,7 @@ $btn-close-white-color: $white !default; // Boosted mod $btn-close-white-bg: transparent !default; // Boosted mod $btn-close-white-border-color: transparent !default; // Boosted mod $btn-close-white-hover-color: $btn-close-white-color !default; // Boosted mod -$btn-close-white-active-color: $primary !default; // Boosted mod +$btn-close-white-active-color: $brand-orange !default; // Boosted mod $btn-close-white-active-border-color: $gray-700 !default; // Boosted mod $btn-close-white-disabled-color: $gray-700 !default; // Boosted mod @@ -2299,7 +2301,7 @@ $step-item-padding-end: $step-item-padding * 2 !default; // Deprecated in // fusv-enable $step-item-margin-end: var(--#{$prefix}border-width) !default; $step-item-bg: var(--#{$prefix}highlight-bg) !default; -$step-item-active-bg: $primary !default; +$step-item-active-bg: $brand-orange !default; $step-item-next-bg: var(--#{$prefix}border-color-translucent) !default; $step-item-shadow-size: calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list $step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 52b60744b1..9f7ea8770f 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -318,11 +318,11 @@ &:active + .btn, + .btn:active, + .btn.active { - color: color-contrast($primary); - background-color: $primary; + color: color-contrast($brand-orange); + background-color: $brand-orange; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); - border-color: $primary; + border-color: $brand-orange; } // End mod diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss index f71d495396..71794d46cb 100644 --- a/scss/helpers/_chevron-link.scss +++ b/scss/helpers/_chevron-link.scss @@ -10,17 +10,13 @@ margin-left: $linked-chevron-margin-left; vertical-align: middle; content: ""; - background-image: var(--#{$prefix}chevron-icon); - background-repeat: no-repeat; + background-color: currentcolor; + mask: var(--#{$prefix}chevron-icon) no-repeat; transform: $linked-chevron-transform; } &:hover { text-decoration: $link-decoration; - - &::after { - filter: $orange-filter; - } } } // End mod diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index f47bd3bbd1..6c80dbe2b0 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,7 +1,7 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { .link-#{$color} { - color: RGBA(if($color == "primary", var(--#{$prefix}#{$color}-text-rgb), var(--#{$prefix}#{$color}-rgb)), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); // Boosted mod: adapt to the right variable for primary + color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); @if $link-shade-percentage != 0 { diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index b1f00a1e23..f7af3d09ff 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -139,7 +139,7 @@ sitemap_exclude: true

No theme

-
+

@@ -180,7 +180,7 @@ sitemap_exclude: true

Dark theme on container

-
+

@@ -221,7 +221,7 @@ sitemap_exclude: true

Light theme on container

-
+

@@ -262,7 +262,7 @@ sitemap_exclude: true

Dark theme on component

-
+

@@ -303,7 +303,7 @@ sitemap_exclude: true

Light theme on component

-
+

@@ -346,7 +346,7 @@ sitemap_exclude: true

No theme

-
+