[OUDS] Add border color utilities to the Colors tokens PR

scss/_maps.scss

@@ -20,6 +20,17 @@ $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),
+  "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),
+) !default;
 // scss-docs-end ouds-maps-borders
 
 // scss-docs-start ouds-maps-dimension
@@ -117,7 +128,7 @@ $ouds-opacities: (
 ) !default;
 // scss-docs-end ouds-maps-opacities
 
-// scss-docs-start ouds-maps-opacities
+// scss-docs-start ouds-maps-backgrounds
 $ouds-backgrounds: (
   "primary": var(--#{$prefix}color-bg-primary),
   "secondary": var(--#{$prefix}color-bg-secondary),
@@ -140,7 +151,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

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

scss/_variables.scss

@@ -612,7 +612,7 @@ $border-widths: (
   5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5`
 ) !default;
 $border-style:                $ouds-border-style-default !default; // OUDS mod: instead of `solid`
-$border-color:                $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300` // TODO LM: Decide whether to use default in here or in translucent
+$border-color:                $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300`
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 

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,
@@ -1073,88 +1080,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;
         }
@@ -1207,6 +1132,38 @@ $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;
+        }
+
+        .border-always-black {
+          border-color: var(--bs-color-always-black) !important;
+        }
+
+        .border-always-white {
+          border-color: var(--bs-color-always-white) !important;
+        }
+
+        .border-always-on-black {
+          border-color: var(--bs-color-always-on-black) !important;
+        }
+
+        .border-always-on-white {
+          border-color: var(--bs-color-always-on-white) !important;
+        }
+
         .rounded {
           border-radius: 0px !important; // stylelint-disable-line property-disallowed-list, length-zero-no-unit
         }
@@ -9973,12 +9930,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,
@@ -10038,6 +9997,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,
@@ -11183,6 +11147,38 @@ $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;
+        }
+
+        .border-always-black {
+          border-color: var(--bs-color-always-black) !important;
+        }
+
+        .border-always-white {
+          border-color: var(--bs-color-always-white) !important;
+        }
+
+        .border-always-on-black {
+          border-color: var(--bs-color-always-on-black) !important;
+        }
+
+        .border-always-on-white {
+          border-color: var(--bs-color-always-on-white) !important;
+        }
+
         .rounded-0 {
           border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
         }

site/assets/scss/_callouts.scss

@@ -11,7 +11,7 @@
   margin-bottom: $spacer; // OUDS mod
   color: var(--bd-callout-color, inherit);
   background-color: var(--bd-callout-bg, var(--#{$prefix}color-surface-status-neutral)); // OUDS mod
-  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-200)); // OUDS mod
+  // OUDS mod: no border-left
 
   h4 {
     margin-bottom: .25rem;
@@ -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);
+    // OUDS mod: no --bd-callout-border
   }
 }

site/assets/scss/_component-examples.scss

@@ -288,6 +288,7 @@
 .bd-example-border-utils {
   [class^="border"] {
     display: inline-block;
+    flex-shrink: 0;
     width: 5rem;
     height: 5rem;
     margin: .25rem;
@@ -472,10 +473,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);
 }

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-emphasized border-medium opacity-medium">
+<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