Add border color utilities to the Colors tokens PR

Orange-OpenSource · Dec 17, 2024 · 797713a · 797713a
1 parent 9db1ce9
commit 797713a
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 117 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -6,7 +6,7 @@
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "60.5 kB"
+      "maxSize": "60.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -20,6 +20,13 @@ $ouds-border-widths: (
   "thick":    $ouds-border-width-thick,
   "thicker":  $ouds-border-width-thicker,
 ) !default;
+
+$ouds-border-colors: (
+  "brand-primary": var(--#{$prefix}color-border-brand-primary),
+  "default": var(--#{$prefix}color-border-default),
+  "emphasized": var(--#{$prefix}color-border-emphasized),
+  "on-brand-primary": var(--#{$prefix}color-border-on-brand-primary)
+) !default;
 // scss-docs-end ouds-maps-borders
 
 // scss-docs-start ouds-maps-dimension
@@ -117,7 +124,7 @@ $ouds-opacities: (
 ) !default;
 // scss-docs-end ouds-maps-opacities
 
-// scss-docs-start ouds-maps-opacities
+// scss-docs-start ouds-maps-backgrouds
 $ouds-backgrounds: (
   "primary": var(--#{$prefix}color-bg-primary),
   "secondary": var(--#{$prefix}color-bg-secondary),
@@ -140,7 +147,7 @@ $ouds-backgrounds: (
   "always-white": var(--#{$prefix}color-always-white),
   "transparent": transparent,
 ) !default;
-// scss-docs-end ouds-maps-opacities
+// scss-docs-end ouds-maps-backgrounds
 // End mod
 
 // Re-assigned maps

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -202,12 +202,14 @@ $utilities: map-merge(
       local-vars: (
         "border-opacity": 1
       ),
-      values: $utilities-border-colors
+      values: $utilities-border-colors,
+      bootstrap-compatibility: true
     ),
     "subtle-border-color": (
       property: border-color,
       class: border,
-      values: $utilities-border-subtle
+      values: $utilities-border-subtle,
+      bootstrap-compatibility: true
     ),
     "border-width": (
       property: border-width,
@@ -270,6 +272,11 @@ $utilities: map-merge(
       class: border,
       values: $ouds-border-styles
     ),
+    "border-color-ouds": (
+      property: border-color,
+      class: border,
+      values: $ouds-border-colors
+    ),
     // scss-docs-end utils-borders-ouds
     // End mod
     // Sizing utilities

diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -85,12 +85,14 @@ $utilities: ();
             local-vars: (
               "border-opacity": 1
             ),
-            values: $utilities-border-colors
+            values: $utilities-border-colors,
+            bootstrap-compatibility: true
           ),
           "subtle-border-color": (
             property: border-color,
             class: border,
-            values: $utilities-border-subtle
+            values: $utilities-border-subtle,
+            bootstrap-compatibility: true
           ),
           "border-width": (
             property: border-width,
@@ -150,6 +152,11 @@ $utilities: ();
             class: border,
             values: $ouds-border-styles
           ),
+          "border-color-ouds": (
+            property: border-color,
+            class: border,
+            values: $ouds-border-colors
+          ),
           "rounded": (
             property: border-radius,
             class: rounded,
@@ -1057,88 +1064,6 @@ $utilities: ();
           border: 0 !important;
         }
 
-        .border-primary {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-secondary {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-success {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-info {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-warning {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-danger {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-light {
-          --bs-border-opacity: 1;
-          border-color: rgba(85, 85, 85, var(--bs-border-opacity)) !important;
-        }
-
-        .border-dark {
-          --bs-border-opacity: 1;
-          border-color: rgba(39, 39, 39, var(--bs-border-opacity)) !important;
-        }
-
-        .border-black {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-white {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
-        }
-
-        .border-primary-subtle {
-          border-color: var(--bs-primary-border-subtle) !important;
-        }
-
-        .border-secondary-subtle {
-          border-color: var(--bs-secondary-border-subtle) !important;
-        }
-
-        .border-success-subtle {
-          border-color: var(--bs-success-border-subtle) !important;
-        }
-
-        .border-info-subtle {
-          border-color: var(--bs-info-border-subtle) !important;
-        }
-
-        .border-warning-subtle {
-          border-color: var(--bs-warning-border-subtle) !important;
-        }
-
-        .border-danger-subtle {
-          border-color: var(--bs-danger-border-subtle) !important;
-        }
-
-        .border-light-subtle {
-          border-color: var(--bs-light-border-subtle) !important;
-        }
-
-        .border-dark-subtle {
-          border-color: var(--bs-dark-border-subtle) !important;
-        }
-
         .border-top {
           border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
         }
@@ -1191,6 +1116,22 @@ $utilities: ();
           border-style: dashed !important;
         }
 
+        .border-brand-primary {
+          border-color: var(--bs-color-border-brand-primary) !important;
+        }
+
+        .border-default {
+          border-color: var(--bs-color-border-default) !important;
+        }
+
+        .border-emphasized {
+          border-color: var(--bs-color-border-emphasized) !important;
+        }
+
+        .border-on-brand-primary {
+          border-color: var(--bs-color-border-on-brand-primary) !important;
+        }
+
         .rounded {
           border-radius: 0px !important; // stylelint-disable-line property-disallowed-list, length-zero-no-unit
         }
@@ -9957,12 +9898,14 @@ $utilities: ();
             local-vars: (
               "border-opacity": 1
             ),
-            values: $utilities-border-colors
+            values: $utilities-border-colors,
+            bootstrap-compatibility: true
           ),
           "subtle-border-color": (
             property: border-color,
             class: border,
-            values: $utilities-border-subtle
+            values: $utilities-border-subtle,
+            bootstrap-compatibility: true
           ),
           "border-width": (
             property: border-width,
@@ -10022,6 +9965,11 @@ $utilities: ();
             class: border,
             values: $ouds-border-styles
           ),
+          "border-color-ouds": (
+            property: border-color,
+            class: border,
+            values: $ouds-border-colors
+          ),
           "rounded": (
             property: border-radius,
             class: rounded,
@@ -11151,6 +11099,22 @@ $utilities: ();
           border-style: dashed !important;
         }
 
+        .border-brand-primary {
+          border-color: var(--bs-color-border-brand-primary) !important;
+        }
+
+        .border-default {
+          border-color: var(--bs-color-border-default) !important;
+        }
+
+        .border-emphasized {
+          border-color: var(--bs-color-border-emphasized) !important;
+        }
+
+        .border-on-brand-primary {
+          border-color: var(--bs-color-border-on-brand-primary) !important;
+        }
+
         .rounded-0 {
           border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
         }

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
@@ -33,6 +33,6 @@
   .bd-callout-#{$variant} {
     --bd-callout-color: var(--bs-emphasis-color); // 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);
+    --bd-callout-border: var(--bs-#{$variant}-border-subtle); // TODO LM: Check after the complete list
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -472,10 +472,6 @@
 }
 // scss-docs-end sticker-fs-xl
 
-.border-subtle {
-  --bs-border-color: var(--bs-color-border-default);
-}
-
 .color-copy:hover > svg {
   transform: scale(1.07);
 }

diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
@@ -140,14 +140,15 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
 
 {{< example >}}
 <hr>
+
+<hr class="border border-danger border-medium opacity-medium"> <!-- TODO LM: Check after the complete list -->
+<hr class="border border-brand-primary border-thick opacity-strong">
 {{< /example >}}
 
-<!-- Should be in example above <div class="text-success">
+<!-- Should be in example above
+<div class="text-success">
   <hr>
-</div>
-
-<hr class="border border-danger border-medium opacity-medium">
-<hr class="border border-primary border-thick opacity-strong">-->
+</div>-->
 
 <!-- ## Lists
 

diff --git a/site/content/docs/0.0/utilities/borders.md b/site/content/docs/0.0/utilities/borders.md
@@ -48,7 +48,52 @@ Or remove borders:
 
 {{< /bootstrap-compatibility >}}
 
-<!--## Color-->
+## Color
+
+Change the border color using utilities. The color utilities are generated from our `$theme-colors` Sass map.
+
+{{< example class="bd-example-border-utils d-flex align-items-center" >}}
+<span class="border border-brand-primary"></span>
+<span class="border border-default"></span>
+<span class="border border-emphasized"></span>
+<div data-bs-theme="light" class="bg-brand-primary d-inline-flex m-shortest p-shorter"><span class="border border-on-brand-primary m-none bg-brand-primary"></span></div>
+{{< /example >}}
+
+{{< bootstrap-compatibility >}}
+
+{{< callout info >}}
+Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
+{{< /callout >}}
+
+{{< example class="bd-example-border-utils" >}}
+{{< border.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<span class="border border-{{ .name }}"></span>
+<span class="border border-{{ .name }}-subtle"></span>
+{{- end -}}
+{{< /border.inline >}}
+<span class="border border-black"></span>
+<span class="border border-white"></span>
+{{< /example >}}
+
+Or modify the default `border-color` of a component:
+
+{{< example >}}
+<div class="mb-4">
+  <label for="exampleFormControlInput1" class="form-label">Email address</label>
+  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]"> <!-- TODO LM: Check after the complete list -->
+</div>
+
+<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger"> <!-- TODO LM: Check after the complete list -->
+  Dangerous heading
+</div>
+
+<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> <!-- TODO LM: Check after the complete list -->
+  Changing border color and width
+</div>
+{{< /example >}}
+
+{{< /bootstrap-compatibility >}}
 
 <!--## Opacity-->
 
@@ -182,7 +227,7 @@ Border semantic tokens are defined as Sass variables.
 
 {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
 
-<!--Variables for setting `border-color` in `.border-{direction}-subtle` utilities in light and dark mode:
+<!-- TODO LM: Variables for setting `border-color` in `.border-{direction}-subtle` utilities in light and dark mode:
 
 {{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
 

diff --git a/site/content/docs/0.0/utilities/position.md b/site/content/docs/0.0/utilities/position.md
@@ -86,25 +86,25 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
 </div>
 {{< /example >}}
 
-<!--## Examples
+## Examples
 
 Here are some real life examples of these classes:
 
 {{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
-<button type="button" class="btn btn-primary position-relative">
+<!--<button type="button" class="btn btn-primary position-relative">
   Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
-</button>
+</button>-->
 
-<div class="position-relative py-short px-tallest text-bg-secondary border border-secondary">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-shortest" fill="var(-bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> // TODO: reinsert hyphens
+<div class="position-relative py-short px-tallest text-bg-secondary border border-emphasized">
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-shortest" fill="var(--bs-color-bg-emphasized)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
 </div>
 
-<button type="button" class="btn btn-primary position-relative">
+<!-- <button type="button" class="btn btn-primary position-relative">
   Alerts <span class="position-absolute top-0 start-100 translate-middle badge border rounded-circle text-bg-warning p-short"><span class="visually-hidden">unread messages</span></span>
-</button>
+</button> -->
 {{< /example >}}
 
-You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
+<!--You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
 
 {{< example class="bd-example-position-examples" >}}
 <div class="position-relative m-tallest">