Add text color utilities to the Colors tokens PR

Orange-OpenSource · Jan 6, 2025 · 2c8b907 · 2c8b907
1 parent 3d2f01c
commit 2c8b907
Show file tree

Hide file tree

Showing 40 changed files with 487 additions and 169 deletions.
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -19,7 +19,7 @@
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
-          <a class="navbar-brand text-white" href="#">This shouldn't jump!</a>
+          <a class="navbar-brand text-always-on-black" href="#">This shouldn't jump!</a>
           <ul class="navbar-nav">
             <li class="nav-item">
               <a class="nav-link active" href="#" aria-current="page">Home</a>
@@ -212,7 +212,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       function reportFirefoxTestResult(result) {
         if (!firefoxTestDone) {
-          ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
+          ffBugTestResult.classList.add(result ? 'text-status-positive' : 'text-status-negative')
           ffBugTestResult.textContent = result ? 'PASS' : 'FAIL'
         }
       }

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -11,7 +11,7 @@
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
     <nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
-      <a class="navbar-brand text-white" href="#">Scrollspy test</a>
+      <a class="navbar-brand text-always-on-black" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>

diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
         <div class="toast-header">
           <span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-body-secondary">2 seconds ago</small>
+          <small class="text-muted">2 seconds ago</small>
           <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
         </div>
         <div class="toast-body">

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -20,7 +20,7 @@
     <div class="container-fluid">
       <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
 
-      <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
+      <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
 
       <hr>
 

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -141,6 +141,28 @@ $ouds-backgrounds: (
   "transparent": transparent,
 ) !default;
 // scss-docs-end ouds-maps-opacities
+
+// scss-docs-start ouds-maps-text-colors
+$ouds-text-colors: (
+  "brand-primary": var(--#{$prefix}color-content-brand-primary),
+  "default": var(--#{$prefix}color-content-default),
+  "disabled": var(--#{$prefix}color-content-disabled),
+  "muted": var(--#{$prefix}color-content-muted),
+  "on-brand-primary": var(--#{$prefix}color-content-on-brand-primary),
+  "on-status-emphasized": var(--#{$prefix}color-content-on-status-emphasized),
+  "on-status-emphasized-alt": var(--#{$prefix}color-content-on-status-emphasized-alt),
+  "on-status-muted": var(--#{$prefix}color-content-on-status-muted),
+  "status-info": var(--#{$prefix}color-content-status-info),
+  "status-negative": var(--#{$prefix}color-content-status-negative),
+  "status-positive": var(--#{$prefix}color-content-status-positive),
+  "status-warning": var(--#{$prefix}color-content-status-warning),
+  "always-black": var(--#{$prefix}color-always-black),
+  "always-white": var(--#{$prefix}color-always-white),
+  "always-on-black": var(--#{$prefix}color-always-on-black),
+  "always-on-white": var(--#{$prefix}color-always-on-white),
+  "reset": inherit,
+) !default;
+// scss-docs-end ouds-maps-text-colors
 // End mod
 
 // Re-assigned maps

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -244,33 +244,33 @@ ul {
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
 // stylelint-disable selector-max-type
 li::marker {
-  color: var(--#{$prefix}primary);
+  color: var(--#{$prefix}color-content-brand-primary);
   vertical-align: middle;
 
   ol & {
     color: inherit;
   }
 }
 
-li li::marker { color: var(--#{$prefix}secondary-color); }
+li li::marker { color: var(--#{$prefix}color-content-muted); }
 
-li li li::marker { color: var(--#{$prefix}tertiary-color); }
+li li li::marker { color: var(--#{$prefix}color-content-disabled); }
 
 // Bullet-proof markers' color
 // @todo To remove when ::marker support is OK
 // See https://caniuse.com/#search=%3A%3Amarker
 li::before {
-  color: var(--#{$prefix}primary);
+  color: var(--#{$prefix}color-content-brand-primary);
   vertical-align: text-top;
 
   ol & {
     color: inherit;
   }
 }
 
-li li::before { color: var(--#{$prefix}secondary-color); }
+li li::before { color: var(--#{$prefix}color-content-muted); }
 
-li li li::before { color: var(--#{$prefix}tertiary-color); }
+li li li::before { color: var(--#{$prefix}color-content-disabled); }
 // stylelint-enable selector-max-type
 // End mod
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -978,9 +978,10 @@ $utilities: map-merge(
           "body-secondary": var(--#{$prefix}secondary-color),
           "body-tertiary": var(--#{$prefix}tertiary-color),
           "body-emphasis": var(--#{$prefix}emphasis-color),
-          "reset": inherit,
+          // OUDS mod: no "reset"
         )
-      )
+      ),
+      bootstrap-compatibility: true
     ),
     "text-opacity": (
       css-var: true,
@@ -990,14 +991,23 @@ $utilities: map-merge(
         50: .5,
         75: .75,
         100: 1
-      )
+      ),
+      bootstrap-compatibility: true
     ),
     "text-color": (
       property: color,
       class: text,
-      values: $utilities-text-emphasis-colors
+      values: $utilities-text-emphasis-colors,
+      bootstrap-compatibility: true
     ),
     // scss-docs-end utils-color
+    // scss-docs-start utils-color-ouds
+    "color-ouds": (
+      property: color,
+      class: text,
+      values: $ouds-text-colors
+    ),
+    // scss-docs-end utils-color-ouds
     // scss-docs-start utils-links
     "link-opacity": (
       css-var: true,

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -79,8 +79,8 @@ $headings-color-dark:               inherit !default;
 $link-color-dark:                   $white !default; // OUDS mod: instead of `tint-color($primary, 40%)`
 $link-hover-color-dark:             $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($code-color, 40%)`
-$mark-color-dark:                   $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$body-color-dark`
-$mark-bg-dark:                      $ouds-color-content-default-dark !default; // OUDS mod: instead of `$yellow-800`
+$mark-color-dark:                   $ouds-color-content-on-action-highlighted-dark !default; // OUDS mod: instead of `$body-color-dark`
+$mark-bg-dark:                      $ouds-color-action-highlighted-dark !default; // OUDS mod: instead of `$yellow-800`
 
 $focus-ring-color-dark:             rgba($ouds-color-orange-500, $focus-ring-opacity) !default; // OUDS mod
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -791,7 +791,7 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 
 $blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
 // OUDS mod: no `$blockquote-font-size`
-$blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
+$blockquote-footer-color:     var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
 // OUDS mod: no `$blockquote-footer-font-size`
 
 $hr-margin-y:                 $ouds-space-fixed-medium !default;
@@ -819,8 +819,8 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         $spacer * .25 !default;
 
 $mark-padding:                .125em !default; // OUDS mod: instead of `.1875rem`
-$mark-color:                  $ouds-color-bg-primary-light !default; // OUDS mod: instead of `$body-color`
-$mark-bg:                     $ouds-color-content-default-light !default; // OUDS mod: instead of `$yellow-100`
+$mark-color:                  $ouds-color-content-on-action-highlighted-light !default; // OUDS mod: instead of `$body-color`
+$mark-bg:                     $ouds-color-action-highlighted-light !default; // OUDS mod: instead of `$yellow-100`
 // scss-docs-end type-variables
 // End mod
 

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
@@ -16,6 +16,21 @@
 }
 
 // OUDS mod
+// TODO LM: Decide whether we keep this or not
+// @each $color, $value in $ouds-text-colors {
+//   .link-#{$color} {
+//     color: $value if($enable-important-utilities, !important, null);
+//     text-decoration-color: $value if($enable-important-utilities, !important, null);
+
+//     &:hover,
+//     &:focus-visible {
+//       color: $value if($enable-important-utilities, !important, null);
+//       text-decoration-color: $value if($enable-important-utilities, !important, null);
+//     }
+//   }
+// }
+
+// TODO LM: Decide if we keep the dark mode or not
 @if $enable-dark-mode {
   @include color-mode(dark) {
     @each $color, $value in $theme-colors-dark {

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
@@ -31,8 +31,8 @@
 // Variations
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
-    --bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
+    --bd-callout-color: var(--#{$prefix}color-content-on-status-muted); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
     --bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
-    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
+    // OUDS mod: no --bd-callout-border
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -206,7 +206,7 @@
     display: inline-block;
     width: 9rem; // OUDS mod
     font-weight: $font-weight-bold; // OUDS mod
-    color: var(--bs-secondary-color);
+    color: var(--#{$prefix}color-content-muted); // OUDS mod: instead of `var(--bs-secondary-color)`
     background-color: var(--#{$prefix}color-bg-secondary); // OUDS mod: instead of `var(--bs-tertiary-bg)`
     border: var(--bs-border-width) solid var(--bs-color-border-default); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
 
@@ -281,7 +281,7 @@
 
 // OUDS mod
 .simple-list-example-scrollspy .active {
-  color: var(--bs-primary);
+  color: var(--#{$prefix}color-content-brand-primary);
 }
 // End mod
 
@@ -406,7 +406,7 @@
 
   pre code {
     @include font-size(inherit);
-    color: var(--bs-body-color); // Effectively the base text color
+    color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--bs-body-color)`
     word-wrap: normal;
   }
 }

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
@@ -11,7 +11,7 @@
   .lead {
     @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size(1rem)`
     font-weight: 400;
-    color: var(--bs-secondary-color);
+    color: var(--#{$prefix}color-content-muted); // OUDS mod: instead of: `var(--bs-secondary-color)`
   }
 
   .bd-code-snippet {

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
@@ -79,7 +79,7 @@
   }
 
   .DocSearch-Search-Icon {
-    color: var(--bs-body-color);
+    color: var(--#{$prefix}color-content-default);
   }
 }
 
@@ -151,7 +151,7 @@
   }
 
   mark {
-    color: var(--bs-highlight-color);
+    color: var(--#{$prefix}color-content-on-action-highlighted);
     background: var(--#{$prefix}color-action-highlighted);
   }
 
@@ -182,7 +182,7 @@
 }
 
 .DocSearch-Prefill {
-  color: var(--bs-body-color);
+  color: var(--#{$prefix}color-content-default);
   text-decoration: underline;
   @include border-radius(0, 0);
 

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
@@ -2,6 +2,6 @@
   z-index: $zindex-skippy; // OUDS mod
 
   a {
-    color: $white;
+    color: var(--#{$prefix}color-always-on-black);
   }
 }
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
@@ -36,7 +36,7 @@
   align-items: center;
   padding: $spacer calc((100% - var(--max-width, 312px)) / 2); // stylelint-disable-line function-disallowed-list
   font-weight: $font-weight-bold;
-  color: $white;
+  color: $ouds-color-functional-white;
   background: $ouds-color-functional-black;
   border-top: var(--bs-border-width) solid var(--bs-color-border-default);
 
@@ -102,7 +102,7 @@
 
 @include tac("Name", true) {
   @include get-font-size("label-small");
-  color: var(--bs-secondary-color);
+  color: var(--#{$prefix}color-content-muted);
 }
 
 @include tac("Ask", true) {
@@ -141,7 +141,7 @@
   right: $modal-content-padding;
   bottom: add($spacer * -1.5, var(--bs-border-width));
   padding: $spacer / 4 $spacer / 2;
-  color: $white;
+  color: $ouds-color-functional-white;
   background-color: $ouds-color-functional-black;
 }
 

diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
@@ -140,11 +140,13 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
 
 {{< example >}}
 <hr>
-{{< /example >}}
 
-<!-- Should be in example above <div class="text-success">
+<div class="text-status-positive">
   <hr>
 </div>
+{{< /example >}}
+
+<!-- Should be in example above
 
 <hr class="border border-danger border-medium opacity-medium">
 <hr class="border border-primary border-thick opacity-strong">-->