✨ feat(modifiers.scss): Add border color and opacity utility classes

Spiderpig86 · Sep 28, 2022 · ae26f16 · ae26f16
1 parent eff211e
commit ae26f16
Show file tree

Hide file tree

Showing 12 changed files with 1,467 additions and 277 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/modifiers.scss b/src/base/modifiers.scss
@@ -74,9 +74,12 @@
             }
 
             .text-#{$name}-#{$level} {
-                border-color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
                 color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
             }
+
+            .border-#{$name}-#{$level} {
+                border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) !important;
+            }
         }
     }
 }
diff --git a/src/cirrus-all.scss b/src/cirrus-all.scss
@@ -13,6 +13,7 @@
             OPACITY: true,
             BACKGROUND-OPACITY: true,
             COLOR-OPACITY: true,
+            BORDER-OPACITY: true,
             WIDTHS: true,
             HEIGHTS: true,
             ZINDEX: true,

diff --git a/src/cirrus-ext.scss b/src/cirrus-ext.scss
@@ -1,4 +1,6 @@
 @forward "internal";
 
+// Uses default config in _config.scss
+
 @forward "builds/core.scss";
 @forward "builds/ext.scss";
diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -45,6 +45,7 @@ $default-config: (
             flags.$OPACITY: true,
             flags.$BACKGROUND-OPACITY: false,
             flags.$COLOR-OPACITY: false,
+            flags.$BORDER-OPACITY: false,
             flags.$WIDTHS: true,
             flags.$HEIGHTS: true,
             flags.$ZINDEX: false,

diff --git a/src/internal/_flags.scss b/src/internal/_flags.scss
@@ -51,6 +51,7 @@ $TEXT: 'TEXT';
 $OPACITY: 'OPACITY';
 $BACKGROUND-OPACITY: 'BACKGROUND-OPACITY';
 $COLOR-OPACITY: 'COLOR-OPACITY';
+$BORDER-OPACITY: 'BORDER-OPACITY';
 $ZINDEX: 'ZINDEX';
 $ABSOLUTES: 'ABSOLUTES';
 $GAP: 'GAP';

diff --git a/src/utils/opacity.scss b/src/utils/opacity.scss
@@ -31,3 +31,14 @@ $generate-utility: should-generate-classes($COLOR-OPACITY);
         $include-important: false
     );
 }
+
+$generate-utility: should-generate-classes($BORDER-OPACITY);
+@if $generate-utility {
+    @include generate-classes-for-viewport-with-map(
+        $opacities,
+        '--border-opacity',
+        'u-border-opacity-',
+        $generate-viewports: #{get-viewport-flag($BORDER-OPACITY)},
+        $include-important: false
+    );
+}