Proposal to rename the CSS and Sass variables

diff --git a/scss/_maps.scss b/scss/_maps.scss
index c6b55823cf982afcd4a53c6127ef16230bbeabf3..68ee421c2b1fa6277a9b606b0d789561292284d6 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -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
 

diff --git a/scss/_root.scss b/scss/_root.scss
index 7841a153eb84fb343d59105612e2b6828a256702..b82759a210c8fc139d4b0590ba6a456c9a48dd32 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -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 {

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 88256a1c3af8637caf4248f262130e96bdae78e0..80e522ca065d964384c6a80e4f04f06acf0e73c7 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -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

diff --git a/scss/_variables.scss b/scss/_variables.scss
index ddd7e5c38af0b60c9ff0647f8c42f9b709d62db8..35446421f9352e102918388a05f24c72fff77acf 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -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;
 

diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index 964170a3cf8b7fc8a363e53cc636aded970f0e1e..3aedfd2588a7732c933eacec29c719ee9d30ed48 100644 (file)
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -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);
   }
 }

diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index 93d102199aca3c9542212672a54a60eabd8f9de8..6a3c323b0c7ee662b05aae6c2a60fb08e1c522cc 100644 (file)
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -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>

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index a5030d781bd423011416b145d41ca433d83c7178..9541d284f166562ad9e410dab4b17516d05c62db 100644 (file)
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -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`.