✨ feat(border.scss): Add border width utilities

dist/cirrus-all.css

@@ -16485,6 +16485,127 @@ ul .divider::after {
     filter: var(--cirrus-blur);
   }
 }
+/* Documented as part of Colors, not as util */
+.u-border-0 {
+  border-width: 0px;
+}
+
+.u-border-1 {
+  border-width: 1px;
+}
+
+.u-border-2 {
+  border-width: 2px;
+}
+
+.u-border-4 {
+  border-width: 4px;
+}
+
+.u-border-8 {
+  border-width: 8px;
+}
+
+@media screen and (min-width: 640px) {
+  .u-border-0-sm {
+    border-width: 0px;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-border-1-sm {
+    border-width: 1px;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-border-2-sm {
+    border-width: 2px;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-border-4-sm {
+    border-width: 4px;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-border-8-sm {
+    border-width: 8px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-border-0-md {
+    border-width: 0px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-border-1-md {
+    border-width: 1px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-border-2-md {
+    border-width: 2px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-border-4-md {
+    border-width: 4px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-border-8-md {
+    border-width: 8px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-border-0-lg {
+    border-width: 0px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-border-1-lg {
+    border-width: 1px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-border-2-lg {
+    border-width: 2px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-border-4-lg {
+    border-width: 4px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-border-8-lg {
+    border-width: 8px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-border-0-xl {
+    border-width: 0px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-border-1-xl {
+    border-width: 1px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-border-2-xl {
+    border-width: 2px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-border-4-xl {
+    border-width: 4px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-border-8-xl {
+    border-width: 8px;
+  }
+}
 .u-clear-left {
   clear: left !important;
 }

dist/cirrus-core.css

@@ -12780,6 +12780,27 @@ ul .divider::after {
   filter: var(--cirrus-blur);
 }
 
+/* Documented as part of Colors, not as util */
+.u-border-0 {
+  border-width: 0px;
+}
+
+.u-border-1 {
+  border-width: 1px;
+}
+
+.u-border-2 {
+  border-width: 2px;
+}
+
+.u-border-4 {
+  border-width: 4px;
+}
+
+.u-border-8 {
+  border-width: 8px;
+}
+
 .u-clear-left {
   clear: left !important;
 }

dist/cirrus.css

@@ -12781,6 +12781,27 @@ ul .divider::after {
   filter: var(--cirrus-blur);
 }
 
+/* Documented as part of Colors, not as util */
+.u-border-0 {
+  border-width: 0px;
+}
+
+.u-border-1 {
+  border-width: 1px;
+}
+
+.u-border-2 {
+  border-width: 2px;
+}
+
+.u-border-4 {
+  border-width: 4px;
+}
+
+.u-border-8 {
+  border-width: 8px;
+}
+
 .u-clear-left {
   clear: left !important;
 }

src/builds/core.scss

@@ -20,6 +20,7 @@
 // Utilities
 @use "../utils/absolute";
 @use "../utils/blur";
+@use "../utils/border";
 @use "../utils/clearfix";
 @use "../utils/display";
 @use "../utils/flex";

src/cirrus-all.scss

@@ -30,6 +30,7 @@
             BLUR: true,
             TRANSITION-DURATION: true,
             LINE-HEIGHT: true,
+            BORDER-WIDTH: true,
         ),
     ),
 );

src/internal/_config.scss

@@ -59,6 +59,7 @@ $default-config: (
             flags.$BLUR: false,
             flags.$TRANSITION-DURATION: false,
             flags.$LINE-HEIGHT: false,
+            flags.$BORDER-WIDTH: false,
         ),
     // Extend all existing styles here
     extend:
@@ -609,7 +610,7 @@ $default-config: (
                 constants.$xl: constants.$font-size-xl,
             ),
         ),
-    // UTILITIES //
+    // UTILITIES / Non-components //
     absolute: functions.map-multi-merge(
     (
         auto: auto,
@@ -618,6 +619,15 @@ $default-config: (
         (functions.get-negative-value-map(defaults.$default-quartile-percentages)),
         (functions.get-negative-value-map(functions.map-range(defaults.$default-sizing-system, 0, defaults.$default-absolutes-max)))
     ),
+    border: (
+        width: (
+            0: 0px,
+            1: 1px,
+            2: 2px,
+            4: 4px,
+            8: 8px,
+        )
+    ),
     blurs: (
         'none': (
             --cirrus-blur: blur(0),
@@ -806,6 +816,7 @@ $tag-font-sizes: functions.get-with-extend($all-config, tags, font-sizes);
 // UTILS
 $absolute: functions.get-with-extend($all-config, absolute);
 $blurs: functions.get-with-extend($all-config, blurs);
+$border-widths: functions.get-with-extend($all-config, border, width);
 
 $heights: functions.get-with-extend($all-config, heights);
 $widths: functions.get-with-extend($all-config, widths);

src/internal/_flags.scss

@@ -61,3 +61,4 @@ $LETTER-SPACING: 'LETTER-SPACING';
 $BLUR: 'BLUR';
 $TRANSITION-DURATION: 'TRANSITION-DURATION';
 $LINE-HEIGHT: 'LINE-HEIGHT';
+$BORDER-WIDTH: 'BORDER-WIDTH';

src/utils/border.scss

@@ -0,0 +1,13 @@
+@use '../internal' as *;
+
+/* Documented as part of Colors, not as util */
+$generate-utility: should-generate-classes($BORDER-WIDTH);
+@if $generate-utility {
+    @include generate-classes-for-viewport-with-map(
+        $border-widths,
+        'border-width',
+        'u-border-',
+        $generate-viewports: #{get-viewport-flag($BORDER-WIDTH)},
+        $include-important: false
+    );
+}