Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode: Add $theme-colors-dark and $theme-colors-rgb-dark #2227

Merged
merged 13 commits into from
Sep 20, 2023
Merged

Dark mode: Add $theme-colors-dark and $theme-colors-rgb-dark #2227

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
eef9ed2
First draft
louismaximepiton Sep 11, 2023
e1436b7
Introduce Bootstrap proposal
louismaximepiton Sep 12, 2023
bbd5d2d
.
julien-deramond Sep 19, 2023
67f7004
Drop `$theme-colors-dark` init
julien-deramond Sep 19, 2023
275bab2
Add Boosted mods
julien-deramond Sep 19, 2023
673d9e8
Revert yellow color change in light mode
julien-deramond Sep 19, 2023
18ef045
.
julien-deramond Sep 19, 2023
7effeab
.
julien-deramond Sep 19, 2023
ea1c09f
fix(review) Docs part
louismaximepiton Sep 19, 2023
08e197b
Fix bundlewatch values
julien-deramond Sep 19, 2023
eec5af8
Add brand-colors-dark display in /customize/color/#colors
julien-deramond Sep 20, 2023
36d6f93
Modify Boosted mods
julien-deramond Sep 20, 2023
f484904
fix(values)
louismaximepiton Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
{
"path": "./dist/css/boosted-utilities.css",
"maxSize": "12.5 kB"
"maxSize": "12.75 kB"
},
{
"path": "./dist/css/boosted-utilities.min.css",
Expand Down
7 changes: 7 additions & 0 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,18 @@ $background-colors: map-merge(
) !default;
// End mod

$theme-colors-rgb-dark: null !default;
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;

@if $enable-dark-mode {
// Boosted mod
// scss-docs-start theme-colors-rgb-dark
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb-dark
// End mod

// scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,
Expand Down
10 changes: 10 additions & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,16 @@
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};

// Boosted mod
@each $color, $value in $theme-colors-dark {
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
--#{$prefix}#{$color}: #{$value};
}

@each $color, $value in $theme-colors-rgb-dark {
--#{$prefix}#{$color}-rgb: #{$value};
}
// End mod

@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
Expand Down
91 changes: 63 additions & 28 deletions scss/_variables-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,81 @@
// Global colors
//

// Boosted mod: redefine basic colors
// scss-docs-start brand-colors-dark
$functional-green-dark: #32c832 !default;
$functional-blue-dark: #527edb !default;
$functional-yellow-dark: $functional-yellow !default;
$functional-red-dark: #d53f15 !default;
// scss-docs-end brand-colors-dark
// End mod

// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-color-dark-variables
$primary-dark: $orange !default;
$secondary-dark: $black !default;
$success-dark: $functional-green-dark !default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need to override $blue, $green, etc. + $colors or create *-dark versions of them?

In light mode we have:

$functional-green:  #228722 !default;
$green: $functional-green !default;
$success: $green !default;

In dark mode:

$functional-green-dark:  #228722 !default;
$success: $functional-green-dark !default;

$info-dark: $functional-blue-dark !default;
$warning-dark: $functional-yellow-dark !default;
$danger-dark: $functional-red-dark !default;
$light-dark: $gray-500 !default;
$dark-dark: $black !default;
// scss-docs-end theme-color-dark-variables

// Boosted mod
// scss-docs-start theme-colors-dark-map
$theme-colors-dark: (
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"light": $light-dark,
"dark": $dark-dark,
) !default;
// scss-docs-end theme-colors-dark-map
// End mod

// scss-docs-start theme-text-dark-variables
$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: $success !default; // Boosted mod: instead of `tint-color($success, 40%)`
$info-text-emphasis-dark: $info !default; // Boosted mod: instead of `tint-color($info, 40%)`
$warning-text-emphasis-dark: $warning !default; // Boosted mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark: $danger !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: $dark !default; // Boosted mod: instead of `$gray-300`
$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: isntead 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%)`
$warning-text-emphasis-dark: $warning-dark !default; // Boosted mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark: $danger-dark !default; // Boosted mod: instead of `tint-color($danger, 40%)`
$light-text-emphasis-dark: $light-dark !default; // Boosted mod: instead of `$gray-100`
$dark-text-emphasis-dark: $dark-dark !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: $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)`
$primary-bg-subtle-dark: $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark: $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark: $success-dark !default; // Boosted mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark: $info-dark !default; // Boosted mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark: $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark: $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark: $light-dark !default; // Boosted mod: instead of `$gray-800`
$dark-bg-subtle-dark: $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: $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`
$primary-border-subtle-dark: $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 40%)`
$secondary-border-subtle-dark: $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
$success-border-subtle-dark: $success-dark !default; // Boosted mod: instead of `shade-color($success, 40%)`
$info-border-subtle-dark: $info-dark !default; // Boosted mod: instead of `shade-color($info, 40%)`
$warning-border-subtle-dark: $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 40%)`
$danger-border-subtle-dark: $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 40%)`
$light-border-subtle-dark: $light-dark !default; // Boosted mod: instead of `$gray-700`
$dark-border-subtle-dark: $dark-dark !default; // Boosted mod: instead of `$gray-800`
// scss-docs-end theme-border-subtle-dark-variables

$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-950 !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: #414141 !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
$body-secondary-color-dark: $gray-500 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
$body-secondary-bg-dark: $gray-900 !default; // Boosted mod: instead of `$gray-800`
$body-tertiary-color-dark: $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
$body-tertiary-bg-dark: $black !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: $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
Expand Down
6 changes: 3 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ $grays: (
// scss-docs-end gray-colors-map
// fusv-enable

// scss-docs-start brand-colors
// Boosted mod
// scss-docs-start brand-colors
//// Core colors
$accessible-orange: #f16e00 !default;
$brand-orange: #ff7900 !default;
//// Functional colors
$functional-green: #32c832 !default;
$functional-blue: #527edb !default;
$functional-green: #228722 !default;
$functional-blue: #4170d8 !default;
$functional-yellow: #fc0 !default;
$functional-red: #cd3c14 !default;
//// Supporting colors
Expand Down
4 changes: 2 additions & 2 deletions scss/tests/mixins/_color-modes.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] {
--custom-color: #7d82da; // Boosted mod: instead of `#3aff8`
--custom-color: #757bd8; // Boosted mod: instead of `#3aff8`
}
}
}
Expand Down Expand Up @@ -58,7 +58,7 @@
}
@media (prefers-color-scheme: dark) {
:root {
--custom-color: #7d82da; // Boosted mod: instead of `#3aff8`
--custom-color: #757bd8; // Boosted mod: instead of `#3aff8`
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions site/content/docs/5.3/customize/color-modes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,12 @@ $custom-colors: (
);
$theme-colors: map-merge($theme-colors, $custom-colors);

// Add a custom color to $theme-colors
$custom-colors-dark: (
"custom-color": #e1d2f2
);
$theme-colors-dark: map-merge($theme-colors-dark, $custom-colors-dark);

@import "maps";
@import "mixins";
@import "utilities";
Expand Down
4 changes: 3 additions & 1 deletion site/content/docs/5.3/customize/color.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,10 +509,12 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< /theme-colors.inline >}}
</div>

All these colors are available as a Sass map, `$theme-colors`.
All these colors are available as a Sass map, `$theme-colors` or `$theme-colors-dark`.

{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}

Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.

### All colors
Expand Down
28 changes: 20 additions & 8 deletions site/content/docs/5.3/utilities/background.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,24 @@ Background utilities like `.bg-*` that generated from our original `$theme-color

<!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
{{< example >}}
<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
<div class="p-3 mb-2 fw-bold bg-primary text-black">.bg-primary</div>
<div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
<div class="p-3 mb-2 fw-bold bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 fw-bold bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 fw-bold bg-warning text-black">.bg-warning</div>
<div class="p-3 mb-2 fw-bold bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
<div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
<div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
<div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
<div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
<div class="p-3 mb-2 fw-bold bg-light text-black">.bg-light</div>
<div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 fw-bold bg-white">.bg-white</div>
<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
{{< /example >}}

Expand Down Expand Up @@ -110,10 +114,14 @@ Boosted supersedes Bootstrap color variables with Orange brand color.

{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}

{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}

{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}

<!-- Boosted mod: no background gradient -->

Grayscale colors are also available, but only a subset are used to generate any utilities.
Expand All @@ -132,6 +140,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o

{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}

Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**

{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
Expand All @@ -140,6 +150,8 @@ RGB colors are generated from a separate Sass map:

{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}

{{< scss-docs name="theme-colors-rgb-dark" file="scss/_maps.scss" >}}

Background color opacities build on that with their own map that's consumed by the utilities API:

{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
Expand Down
26 changes: 10 additions & 16 deletions site/content/docs/5.3/utilities/colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-white bg-black">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-white-50 bg-black">.text-white-50</p>
{{< /example >}}

{{< callout warning >}}
Expand Down Expand Up @@ -101,20 +101,6 @@ Here are some compliant combinations examples for non-texts elements, such as SV
<svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
</svg>
</p>
<p class="bg-dark p-2">
<svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
</svg>
<svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
</svg>
<svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
</svg>
<svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
</svg>
Expand Down Expand Up @@ -179,10 +165,14 @@ Boosted supersedes Bootstrap color variables with Orange brand color.

{{< scss-docs name="brand-colors" file="scss/_variables.scss" >}}

{{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}}

{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}

Grayscale colors are also available, but only a subset are used to generate any utilities.

{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
Expand All @@ -201,6 +191,8 @@ Theme colors are then put into a Sass map so we can loop over them to generate o

{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-colors-dark-map" file="scss/_variables-dark.scss" >}}

Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**

{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
Expand All @@ -209,6 +201,8 @@ RGB colors are generated from a separate Sass map:

{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}

{{< scss-docs name="theme-colors-rgb-dark" file="scss/_maps.scss" >}}

Color opacities build on that with their own map that's consumed by the utilities API:

{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
Expand Down
26 changes: 23 additions & 3 deletions site/data/palette.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,23 +53,43 @@
- name: Green
class: green
level: success
hex: "#32c832"
hex: "#228722"
variable: $functional-green
- name: Green on dark
class: green
level: success
hex: "#32c832"
variable: $functional-green-dark
- name: Blue
class: blue
level: info
hex: "#527edb"
hex: "#4170d8"
variable: $functional-blue
- name: Blue on dark
class: blue
level: info
hex: "#527edb"
variable: $functional-blue-dark
- name: Yellow
class: yellow
level: warning
hex: "#fc0"
hex: "#8f7200"
variable: $functional-yellow
- name: Yellow on dark
class: yellow
level: warning
hex: "#fc0"
variable: $functional-yellow-dark
- name: Red
class: red
level: danger
hex: "#cd3c14"
variable: $functional-red
- name: Red on dark
class: red
level: danger
hex: "#d53f15"
variable: $functional-red-dark
- category: Grays
name: "Grays"
colors:
Expand Down
Loading