From cfbbf3a771e127f2db23de10124733449171fb2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 20 Mar 2023 11:26:55 +0100 Subject: [PATCH] feat(dark mode): Boosted dark mode colors prototype (#1858) Co-authored-by: louismaxime.piton --- scss/_variables-dark.scss | 62 +++++++++---------- scss/_variables.scss | 22 +++---- site/assets/scss/_boosted.scss | 2 +- site/assets/scss/_callouts.scss | 2 +- site/assets/scss/_component-examples.scss | 2 +- site/content/docs/5.3/components/tags.md | 2 +- .../content/docs/5.3/components/title-bars.md | 2 +- .../content/docs/5.3/examples/form/index.html | 2 +- .../docs/5.3/examples/title-bars/index.html | 2 +- site/layouts/_default/single.html | 2 +- 10 files changed, 50 insertions(+), 50 deletions(-) diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index da8eb34347..161235bd4b 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -8,50 +8,50 @@ // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-text-dark-variables -$primary-text-emphasis-dark: tint-color($primary, 40%) !default; -$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default; -$success-text-emphasis-dark: tint-color($success, 40%) !default; -$info-text-emphasis-dark: tint-color($info, 40%) !default; -$warning-text-emphasis-dark: tint-color($warning, 40%) !default; -$danger-text-emphasis-dark: tint-color($danger, 40%) !default; -$light-text-emphasis-dark: $gray-100 !default; -$dark-text-emphasis-dark: $gray-300 !default; +$primary-text-emphasis-dark: $primary !default; // Boosted mod: isntead of `tint-color($primary, 40%)` +$secondary-text-emphasis-dark: $secondary !default; // Boosted mod: instead of `tint-color($secondary, 40%)` +$success-text-emphasis-dark: null !default; // Boosted mod: instead of `tint-color($success, 40%)` +$info-text-emphasis-dark: null !default; // Boosted mod: instead of `tint-color($info, 40%)` +$warning-text-emphasis-dark: null !default; // Boosted mod: instead of `tint-color($warning, 40%)` +$danger-text-emphasis-dark: null !default; // Boosted mod: instead of `tint-color($danger, 40%)` +$light-text-emphasis-dark: $light !default; // Boosted mod: instead of `$gray-100` +$dark-text-emphasis-dark: null !default; // Boosted mod: instead of `$gray-300` // scss-docs-end theme-text-dark-variables // scss-docs-start theme-bg-subtle-dark-variables -$primary-bg-subtle-dark: shade-color($primary, 80%) !default; -$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; -$success-bg-subtle-dark: shade-color($success, 80%) !default; -$info-bg-subtle-dark: shade-color($info, 80%) !default; -$warning-bg-subtle-dark: shade-color($warning, 80%) !default; -$danger-bg-subtle-dark: shade-color($danger, 80%) !default; -$light-bg-subtle-dark: $gray-800 !default; -$dark-bg-subtle-dark: mix($gray-800, $black) !default; +$primary-bg-subtle-dark: $primary !default; // Boosted mod: instead of `shade-color($primary, 80%)` +$secondary-bg-subtle-dark: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 80%)` +$success-bg-subtle-dark: $success !default; // Boosted mod: instead of `shade-color($success, 80%)` +$info-bg-subtle-dark: $info !default; // Boosted mod: instead of `shade-color($info, 80%)` +$warning-bg-subtle-dark: $warning !default; // Boosted mod: instead of `shade-color($warning, 80%)` +$danger-bg-subtle-dark: $danger !default; // Boosted mod: instead of `shade-color($danger, 80%)` +$light-bg-subtle-dark: $light !default; // Boosted mod: instead of `$gray-800` +$dark-bg-subtle-dark: $dark !default; // Boosted mod: instead of `mix($gray-800, $black)` // scss-docs-end theme-bg-subtle-dark-variables // scss-docs-start theme-border-subtle-dark-variables -$primary-border-subtle-dark: shade-color($primary, 40%) !default; -$secondary-border-subtle-dark: shade-color($secondary, 40%) !default; -$success-border-subtle-dark: shade-color($success, 40%) !default; -$info-border-subtle-dark: shade-color($info, 40%) !default; -$warning-border-subtle-dark: shade-color($warning, 40%) !default; -$danger-border-subtle-dark: shade-color($danger, 40%) !default; -$light-border-subtle-dark: $gray-700 !default; -$dark-border-subtle-dark: $gray-800 !default; +$primary-border-subtle-dark: $primary !default; // Boosted mod: instead of `shade-color($primary, 40%)` +$secondary-border-subtle-dark: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 40%)` +$success-border-subtle-dark: $success !default; // Boosted mod: instead of `shade-color($success, 40%)` +$info-border-subtle-dark: $info !default; // Boosted mod: instead of `shade-color($info, 40%)` +$warning-border-subtle-dark: $warning !default; // Boosted mod: instead of `shade-color($warning, 40%)` +$danger-border-subtle-dark: $danger !default; // Boosted mod: instead of `shade-color($danger, 40%)` +$light-border-subtle-dark: $light !default; // Boosted mod: instead of `$gray-700` +$dark-border-subtle-dark: $dark !default; // Boosted mod: instead of `$gray-800` // scss-docs-end theme-border-subtle-dark-variables -$body-color-dark: $gray-500 !default; -$body-bg-dark: $gray-900 !default; +$body-color-dark: $gray-300 !default; // Boosted mod: instead of `$gray-500` +$body-bg-dark: $black !default; // Boosted mod: instead of `$gray-900` $body-secondary-color-dark: rgba($body-color-dark, .75) !default; $body-secondary-bg-dark: $gray-800 !default; $body-tertiary-color-dark: rgba($body-color-dark, .5) !default; -$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; -$body-emphasis-color-dark: $gray-100 !default; +$body-tertiary-bg-dark: #414141 !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)` +$body-emphasis-color-dark: $white !default; // Boosted mod: instead of `$gray-100` $border-color-dark: $gray-700 !default; -$border-color-translucent-dark: rgba($white, .15) !default; +$border-color-translucent-dark: $gray-700 !default; // Boosted mod instead of `rgba($white, .15)` $headings-color-dark: null !default; -$link-color-dark: tint-color($primary, 40%) !default; -$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default; +$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)` $code-color-dark: tint-color($code-color, 40%) !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 1c49065d6e..3d550fbe15 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -646,13 +646,13 @@ $outline-offset: $outline-width !default; // Deprecated in v5.2.3 $focus-visible-zindex: 5 !default; // Boosted mod $focus-visible-inner-width: 2px !default; // Boosted mod -$focus-visible-inner-color: $white !default; // Boosted mod -$focus-visible-inner-color-inverted: $black !default; // Boosted mod +$focus-visible-inner-color: var(--#{$prefix}body-bg) !default; // Boosted mod +$focus-visible-inner-color-inverted: var(--#{$prefix}emphasis-color) !default; // Boosted mod $focus-visible-outer-width: 3px !default; // Boosted mod $focus-visible-outer-offset: $focus-visible-inner-width !default; // Boosted mod -$focus-visible-outer-color: $black !default; // Boosted mod -$focus-visible-outer-color-inverted: $white !default; // Boosted mod +$focus-visible-outer-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod +$focus-visible-outer-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod // scss-docs-end focus-visible-variables // scss-docs-start box-shadow-variables @@ -873,7 +873,7 @@ $table-cell-vertical-align: top !default; $table-line-height: 1.25 !default; // Boosted mod $table-color: var(--#{$prefix}body-color) !default; -$table-bg: $body-bg !default; // Boosted mod +$table-bg: var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `transparent` $table-accent-bg: transparent !default; $table-th-font-weight: null !default; @@ -906,8 +906,8 @@ $table-striped-columns-order: even !default; $table-group-separator-color: currentcolor !default; -$table-caption-color: var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod -$table-caption-color-inverted: $white !default; // Boosted mod +$table-caption-color: var(--#{$boosted-prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` +$table-caption-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod $table-caption-padding-y: .75rem !default; // Boosted mod // Boosted mod: no $table-bg-scale @@ -1659,7 +1659,7 @@ $card-inner-border-radius: subtract($card-border-radius, $card-border-w $card-cap-padding-y: $card-spacer-bottom * .5 !default; // Boosted mod $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: var(--#{$prefix}body-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)` -$card-cap-color: $white !default; +$card-cap-color: var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `null` $card-cap-font-weight: $font-weight-bold !default; // Boosted mod $card-height: null !default; $card-color: null !default; @@ -1797,7 +1797,7 @@ $toast-max-width: 21.875rem !default; $toast-padding-x: $spacer * .5 !default; $toast-padding-y: $spacer * .25 !default; $toast-font-size: .875rem !default; -$toast-color: $black !default; +$toast-color: null !default; $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default; $toast-border-width: var(--#{$prefix}border-width) !default; $toast-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod @@ -2032,7 +2032,7 @@ $breadcrumb-padding-y: .5rem !default; $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: $spacer * .5 !default; $breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-color: $black !default; // Boosted mod +$breadcrumb-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod $breadcrumb-bg: null !default; $breadcrumb-divider-color: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $breadcrumb-active-color: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` @@ -2129,7 +2129,7 @@ $btn-close-height: $btn-close-width !default; $btn-close-padding: var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod $btn-close-border-width: var(--#{$prefix}border-width) !default; // Boosted mod $btn-close-border-color: transparent !default; // Boosted mod -$btn-close-color: $black !default; +$btn-close-color: var(--#{$prefix}emphasis-color) !default; $btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod // Boosted mod // fusv-disable diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index cd77d738b5..76dbc36db3 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -60,7 +60,7 @@ body { // Design guidelines .ods-guidelines { - background-color: $gray-300; + background-color: var(--bs-secondary-bg); .card a:hover::before { position: absolute; diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index 485c3a5b26..bd7b4bc297 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -32,7 +32,7 @@ @each $variant in $bd-callout-variants { .bd-callout-#{$variant} { --bd-callout-color: var(--bs-emphasis-color); // Boosted mod: instead of `var(--bs-#{$variant}-text-emphasis)` - // Boosted mod: no `--bd-callout-bg` + --bd-callout-bg: var(--bs-tertiary-bg); --bd-callout-border: var(--bs-#{$variant}-border-subtle); } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 8bfac7f290..3563c3715d 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -397,7 +397,7 @@ } .highlight-toolbar { - background-color: $gray-100; // Boosted mod: instead of `var(--bd-pre-bg)` + background-color: var(--bd-pre-bg); border: solid $gray-400; // Boosted mod border-width: 1px 0; // Boosted mod } diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md index 3281683f0b..6e1f151943 100644 --- a/site/content/docs/5.3/components/tags.md +++ b/site/content/docs/5.3/components/tags.md @@ -30,7 +30,7 @@ For a list of tags of an article, for example, add a heading (`

–

`) to
  • Bird
  • - + Twitter
    • diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md index 8abac2ab08..0ae8340c07 100644 --- a/site/content/docs/5.3/components/title-bars.md +++ b/site/content/docs/5.3/components/title-bars.md @@ -27,7 +27,7 @@ Supporting colors can also be used as the background color for title bars, but n The image should not overlap on title and the title shouldn't wrap. If this happens, please **transform your title bar** into a white/black one without any image. {{< example class="p-0">}} -
    +

    Title

    diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html index de4b31a9b6..61fcf77e23 100644 --- a/site/content/docs/5.3/examples/form/index.html +++ b/site/content/docs/5.3/examples/form/index.html @@ -70,7 +70,7 @@

    Travel

    -
    +
    diff --git a/site/content/docs/5.3/examples/title-bars/index.html b/site/content/docs/5.3/examples/title-bars/index.html index fdb92fabe2..91198ed76a 100644 --- a/site/content/docs/5.3/examples/title-bars/index.html +++ b/site/content/docs/5.3/examples/title-bars/index.html @@ -11,7 +11,7 @@ ---
    -
    +

    Title

    diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 6c106063f2..14569e6baa 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -3,7 +3,7 @@
    -
    +

    {{ .Title | markdownify }}