rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Proposal to rename the CSS and Sass variables

Browse Source
This commit is contained in:
louismaximepiton 2023-01-17 16:09:52 +01:00 committed by Mark Otto
parent cfd3560c6d
commit 15744ee1d0
7 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
scss/_maps.scss
View File

@ -8,14 +8,14 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-start theme-text-map
$theme-colors-text: (
"primary": $primary-text,
"secondary": $secondary-text,
"success": $success-text,
"info": $info-text,
"warning": $warning-text,
"danger": $danger-text,
"light": $light-text,
"dark": $dark-text,
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
) !default;
// scss-docs-end theme-text-map
@ -52,14 +52,14 @@ $theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode {
// scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-dark,
"secondary": $secondary-text-dark,
"success": $success-text-dark,
"info": $info-text-dark,
"warning": $warning-text-dark,
"danger": $danger-text-dark,
"light": $light-text-dark,
"dark": $dark-text-dark,
"primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark,
) !default;
// scss-docs-end theme-text-dark-map
@ -111,14 +111,14 @@ $utilities-text: map-merge(
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text),
"secondary-emphasis": var(--#{$prefix}secondary-text),
"success-emphasis": var(--#{$prefix}success-text),
"info-emphasis": var(--#{$prefix}info-text),
"warning-emphasis": var(--#{$prefix}warning-text),
"danger-emphasis": var(--#{$prefix}danger-text),
"light-emphasis": var(--#{$prefix}light-text),
"dark-emphasis": var(--#{$prefix}dark-text)
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
) !default;
// scss-docs-end utilities-text-colors

4
scss/_root.scss
View File

@ -23,7 +23,7 @@
}
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text: #{$value};
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
@ -149,7 +149,7 @@
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text: #{$value};
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {

20
scss/_variables-dark.scss
View File

@ -8,14 +8,14 @@
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-dark: $blue-300 !default;
$secondary-text-dark: $gray-300 !default;
$success-text-dark: $green-300 !default;
$info-text-dark: $cyan-300 !default;
$warning-text-dark: $yellow-300 !default;
$danger-text-dark: $red-300 !default;
$light-text-dark: $gray-100 !default;
$dark-text-dark: $gray-300 !default;
$primary-text-emphasis-dark: $blue-300 !default;
$secondary-text-emphasis-dark: $gray-300 !default;
$success-text-emphasis-dark: $green-300 !default;
$info-text-emphasis-dark: $cyan-300 !default;
$warning-text-emphasis-dark: $yellow-300 !default;
$danger-text-emphasis-dark: $red-300 !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
@ -70,6 +70,6 @@ $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://w
// Accordion
//
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars

18
scss/_variables.scss
View File

@ -322,14 +322,14 @@ $theme-colors: (
// scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables
$primary-text: $blue-700 !default;
$secondary-text: $gray-700 !default;
$success-text: $green-700 !default;
$info-text: $cyan-800 !default;
$warning-text: $yellow-800 !default;
$danger-text: $red-700 !default;
$light-text: $gray-700 !default;
$dark-text: $gray-700 !default;
$primary-text-emphasis: $blue-700 !default;
$secondary-text-emphasis: $gray-700 !default;
$success-text-emphasis: $green-700 !default;
$info-text-emphasis: $cyan-800 !default;
$warning-text-emphasis: $yellow-800 !default;
$danger-text-emphasis: $red-700 !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
@ -1365,7 +1365,7 @@ $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text !default;
$accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;

8
site/content/docs/5.3/customize/color-modes.md
View File

@ -166,7 +166,7 @@ $color-mode-type: data;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text);
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@ -176,7 +176,7 @@ Outputs to:
```css
[data-bs-theme=dark] .element {
color: var(--bs-primary-text);
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
```
@ -188,7 +188,7 @@ $color-mode-type: media-query;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text);
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@ -199,7 +199,7 @@ Outputs to:
```css
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text);
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}

30
site/content/docs/5.3/customize/color.md
View File

@ -10,7 +10,7 @@ toc: true
{{< added-in "5.3.0" >}}
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
@ -135,10 +135,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text`{{< /markdown >}}
{{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -170,10 +170,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text`{{< /markdown >}}
{{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -205,10 +205,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text`{{< /markdown >}}
{{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -240,10 +240,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text`{{< /markdown >}}
{{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -275,10 +275,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text`{{< /markdown >}}
{{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -310,10 +310,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text`{{< /markdown >}}
{{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
@ -345,10 +345,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text`{{< /markdown >}}
{{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
</td>
</tr>
</tbody>

2
site/content/docs/5.3/migration.md
View File

@ -44,7 +44,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
- Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts.
- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
- Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.