@dialpad/dialtone 6.6.1 → 6.9.0

package/lib/build/less/utilities/borders.less

@@ -1,7 +1,6 @@
-@import (reference) "../variables/spacing.less";
-@import (reference) "../utilities/internals.less";
-@import (reference) "../variables/borders.less";
-
+//@import (reference) '../variables/spacing.less';
+//@import (reference) '../variables/borders.less';
+//@import (reference) '../utilities/internals.less';
 //
 //  DIALTONE
 //  UTILITIES: BORDERS
@@ -26,22 +25,22 @@
 //  ============================================================================
 //  $$  COLOR
 //  ----------------------------------------------------------------------------
-.d-bc-transparent               { border-color: transparent !important; }
-.d-bc-current                   { border-color: currentColor !important; }
-.d-bc-unset                     { border-color: unset !important; }
+.d-bc-transparent { border-color: transparent !important; }
+.d-bc-current { border-color: currentColor !important; }
+.d-bc-unset { border-color: unset !important; }
 
 
 //  $$ DIRECTION
 //  ----------------------------------------------------------------------------
-.d-ba               { border: var(--su1) solid currentColor !important; }
-.d-bt               { border-top: var(--su1) solid currentColor !important; }
-.d-br               { border-right: var(--su1) solid currentColor !important; }
-.d-bb               { border-bottom: var(--su1) solid currentColor !important; }
-.d-bl               { border-left: var(--su1) solid currentColor !important; }
-.d-bx               { .d-br(); .d-bl(); }
-.d-by               { .d-bt(); .d-bb(); }
-.d-ba-none          { border: none !important; }
-.d-ba-unset         { border: unset !important; }
+.d-ba { border: var(--su1) solid currentColor !important; }
+.d-bt { border-top: var(--su1) solid currentColor !important; }
+.d-br { border-right: var(--su1) solid currentColor !important; }
+.d-bb { border-bottom: var(--su1) solid currentColor !important; }
+.d-bl { border-left: var(--su1) solid currentColor !important; }
+.d-bx { .d-br(); .d-bl(); }
+.d-by { .d-bt(); .d-bb(); }
+.d-ba-none { border: none !important; }
+.d-ba-unset { border: unset !important; }
 
 
 //  ============================================================================
@@ -54,8 +53,8 @@
     { .template(@value) { border-radius: @value !important; } },
     @su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32 unset
 );
-.d-bar-circle       { border-radius: @br-circle !important; }
-.d-bar-pill         { border-radius: @br-pill !important; }
+.d-bar-circle { border-radius: @br-circle !important; }
+.d-bar-pill { border-radius: @br-pill !important; }
 
 //  $$ TOP
 //  ----------------------------------------------------------------------------
@@ -64,8 +63,8 @@
     { .template(@value) { border-top-left-radius: @value !important; border-top-right-radius: @value !important; } },
     @su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
 );
-.d-btr-circle       { border-top-left-radius: @br-circle !important; border-top-right-radius: @br-circle !important; }
-.d-btr-pill         { border-top-left-radius: @br-pill !important;  border-top-right-radius: @br-pill !important; }
+.d-btr-circle { border-top-left-radius: @br-circle !important; border-top-right-radius: @br-circle !important; }
+.d-btr-pill { border-top-left-radius: @br-pill !important; border-top-right-radius: @br-pill !important; }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
@@ -74,8 +73,8 @@
     { .template(@value) { border-top-right-radius: @value !important; border-bottom-right-radius: @value !important; } },
     @su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
 );
-.d-brr-circle       { border-top-right-radius: @br-circle !important; border-bottom-right-radius: @br-circle !important; }
-.d-brr-pill         { border-top-right-radius: @br-pill !important;  border-bottom-right-radius: @br-pill !important; }
+.d-brr-circle { border-top-right-radius: @br-circle !important; border-bottom-right-radius: @br-circle !important; }
+.d-brr-pill { border-top-right-radius: @br-pill !important; border-bottom-right-radius: @br-pill !important; }
 
 //  $$ TOP
 //  ----------------------------------------------------------------------------
@@ -84,8 +83,8 @@
     { .template(@value) { border-bottom-left-radius: @value !important; border-bottom-right-radius: @value !important; } },
     @su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
 );
-.d-bbr-circle       { border-bottom-left-radius: @br-circle !important; border-bottom-right-radius: @br-circle !important; }
-.d-bbr-pill         { border-bottom-left-radius: @br-pill !important;  border-bottom-right-radius: @br-pill !important; }
+.d-bbr-circle { border-bottom-right-radius: @br-circle !important; border-bottom-left-radius: @br-circle !important; }
+.d-bbr-pill { border-bottom-right-radius: @br-pill !important; border-bottom-left-radius: @br-pill !important; }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
@@ -94,76 +93,76 @@
     { .template(@value) { border-top-left-radius: @value !important; border-bottom-left-radius: @value !important; } },
     @su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
 );
-.d-blr-circle       { border-top-left-radius: @br-circle !important; border-bottom-left-radius: @br-circle !important; }
-.d-blr-pill         { border-top-left-radius: @br-pill !important;  border-bottom-left-radius: @br-pill !important; }
+.d-blr-circle { border-top-left-radius: @br-circle !important; border-bottom-left-radius: @br-circle !important; }
+.d-blr-pill { border-top-left-radius: @br-pill !important; border-bottom-left-radius: @br-pill !important; }
 
 
 //  $$ STYLE
 //  ----------------------------------------------------------------------------
-.d-bas-dashed       { border-style: dashed !important; }
-.d-bts-dashed       { border-top-style: dashed !important; }
-.d-brs-dashed       { border-right-style: dashed !important; }
-.d-bbs-dashed       { border-bottom-style: dashed !important; }
-.d-bls-dashed       { border-left-style: dashed !important; }
+.d-bas-dashed { border-style: dashed !important; }
+.d-bts-dashed { border-top-style: dashed !important; }
+.d-brs-dashed { border-right-style: dashed !important; }
+.d-bbs-dashed { border-bottom-style: dashed !important; }
+.d-bls-dashed { border-left-style: dashed !important; }
 
-.d-bas-dotted       { border-style: dotted !important; }
-.d-bts-dotted       { border-top-style: dotted !important; }
-.d-brs-dotted       { border-right-style: dotted !important; }
-.d-bbs-dotted       { border-bottom-style: dotted !important; }
-.d-bls-dotted       { border-left-style: dotted !important; }
+.d-bas-dotted { border-style: dotted !important; }
+.d-bts-dotted { border-top-style: dotted !important; }
+.d-brs-dotted { border-right-style: dotted !important; }
+.d-bbs-dotted { border-bottom-style: dotted !important; }
+.d-bls-dotted { border-left-style: dotted !important; }
 
-.d-bas-unset        { border-style: unset !important; }
+.d-bas-unset { border-style: unset !important; }
 
 
 //  $$ WIDTH
 //  ----------------------------------------------------------------------------
-.d-baw0             { border-width: var(--su0) !important; }
-.d-baw1             { border-width: var(--su1) !important; }
-.d-baw2             { border-width: var(--su2) !important; }
-.d-baw4             { border-width: var(--su4) !important; }
-.d-baw6             { border-width: var(--su6) !important; }
+.d-baw0 { border-width: var(--su0) !important; }
+.d-baw1 { border-width: var(--su1) !important; }
+.d-baw2 { border-width: var(--su2) !important; }
+.d-baw4 { border-width: var(--su4) !important; }
+.d-baw6 { border-width: var(--su6) !important; }
 
 //  --  Top Border Width
-.d-btw0             { border-top-width: var(--su0) !important; }
-.d-btw1             { border-top-width: var(--su1) !important; }
-.d-btw2             { border-top-width: var(--su2) !important; }
-.d-btw4             { border-top-width: var(--su4) !important; }
-.d-btw6             { border-top-width: var(--su6) !important; }
+.d-btw0 { border-top-width: var(--su0) !important; }
+.d-btw1 { border-top-width: var(--su1) !important; }
+.d-btw2 { border-top-width: var(--su2) !important; }
+.d-btw4 { border-top-width: var(--su4) !important; }
+.d-btw6 { border-top-width: var(--su6) !important; }
 
 //  --  Right Border Width
-.d-brw0             { border-right-width: var(--su0) !important; }
-.d-brw1             { border-right-width: var(--su1) !important; }
-.d-brw2             { border-right-width: var(--su2) !important; }
-.d-brw4             { border-right-width: var(--su4) !important; }
-.d-brw6             { border-right-width: var(--su6) !important; }
+.d-brw0 { border-right-width: var(--su0) !important; }
+.d-brw1 { border-right-width: var(--su1) !important; }
+.d-brw2 { border-right-width: var(--su2) !important; }
+.d-brw4 { border-right-width: var(--su4) !important; }
+.d-brw6 { border-right-width: var(--su6) !important; }
 
 //  --  Bottom Border Width
-.d-bbw0             { border-bottom-width: var(--su0) !important; }
-.d-bbw1             { border-bottom-width: var(--su1) !important; }
-.d-bbw2             { border-bottom-width: var(--su2) !important; }
-.d-bbw4             { border-bottom-width: var(--su4) !important; }
-.d-bbw6             { border-bottom-width: var(--su6) !important; }
+.d-bbw0 { border-bottom-width: var(--su0) !important; }
+.d-bbw1 { border-bottom-width: var(--su1) !important; }
+.d-bbw2 { border-bottom-width: var(--su2) !important; }
+.d-bbw4 { border-bottom-width: var(--su4) !important; }
+.d-bbw6 { border-bottom-width: var(--su6) !important; }
 
 //  --  Left Border Width
-.d-blw0             { border-left-width: var(--su0) !important; }
-.d-blw1             { border-left-width: var(--su1) !important; }
-.d-blw2             { border-left-width: var(--su2) !important; }
-.d-blw4             { border-left-width: var(--su4) !important; }
-.d-blw6             { border-left-width: var(--su6) !important; }
+.d-blw0 { border-left-width: var(--su0) !important; }
+.d-blw1 { border-left-width: var(--su1) !important; }
+.d-blw2 { border-left-width: var(--su2) !important; }
+.d-blw4 { border-left-width: var(--su4) !important; }
+.d-blw6 { border-left-width: var(--su6) !important; }
 
 //  --  X Border Width
-.d-bxw0             { .d-brw0(); .d-blw0(); }
-.d-bxw1             { .d-brw1(); .d-blw1(); }
-.d-bxw2             { .d-brw2(); .d-blw2(); }
-.d-bxw4             { .d-brw4(); .d-blw4(); }
-.d-bxw6             { .d-brw6(); .d-blw6(); }
+.d-bxw0 { .d-brw0(); .d-blw0(); }
+.d-bxw1 { .d-brw1(); .d-blw1(); }
+.d-bxw2 { .d-brw2(); .d-blw2(); }
+.d-bxw4 { .d-brw4(); .d-blw4(); }
+.d-bxw6 { .d-brw6(); .d-blw6(); }
 
 //  --  Y Border Width
-.d-byw0             { .d-btw0(); .d-bbw0(); }
-.d-byw1             { .d-btw1(); .d-bbw1(); }
-.d-byw2             { .d-btw2(); .d-bbw2(); }
-.d-byw4             { .d-btw4(); .d-bbw4(); }
-.d-byw6             { .d-btw6(); .d-bbw6(); }
+.d-byw0 { .d-btw0(); .d-bbw0(); }
+.d-byw1 { .d-btw1(); .d-bbw1(); }
+.d-byw2 { .d-btw2(); .d-bbw2(); }
+.d-byw4 { .d-btw4(); .d-bbw4(); }
+.d-byw6 { .d-btw6(); .d-bbw6(); }
 
 
 //  ============================================================================
@@ -173,23 +172,30 @@
 //  ----------------------------------------------------------------------------
 .d-divide-y > * + * {
     --divide-y-reverse: 0;
-    border-top: calc(~"1px * (1 - var(--divide-y-reverse))") solid currentColor !important;
-    border-bottom: calc(~"1px * var(--divide-y-reverse)") solid currentColor !important;
+
+    border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid currentColor !important;
+    border-bottom: calc(~'1px * var(--divide-y-reverse)') solid currentColor !important;
 }
+
 .d-divide-y0 > * + * {
     --divide-y-reverse: 0;
-    border-top: calc(~"0 * (1 - var(--divide-y-reverse))") solid currentColor !important;
-    border-bottom: calc(~"0 * var(--divide-y-reverse)") solid currentColor !important;
+
+    border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid currentColor !important;
+    border-bottom: calc(~'0 * var(--divide-y-reverse)') solid currentColor !important;
 }
+
 .d-divide-y2 > * + * {
     --divide-y-reverse: 0;
-    border-top: calc(~"2px * (1 - var(--divide-y-reverse))") solid currentColor !important;
-    border-bottom: calc(~"2px * var(--divide-y-reverse)") solid currentColor !important;
+
+    border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid currentColor !important;
+    border-bottom: calc(~'2px * var(--divide-y-reverse)') solid currentColor !important;
 }
+
 .d-divide-y4 > * + * {
     --divide-y-reverse: 0;
-    border-top: calc(~"4px * (1 - var(--divide-y-reverse))") solid currentColor !important;
-    border-bottom: calc(~"4px * var(--divide-y-reverse)") solid currentColor !important;
+
+    border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid currentColor !important;
+    border-bottom: calc(~'4px * var(--divide-y-reverse)') solid currentColor !important;
 }
 .d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
 
@@ -197,22 +203,29 @@
 //  ----------------------------------------------------------------------------
 .d-divide-x > * + * {
     --divide-x-reverse: 0;
-    border-left: calc(~"1px * (1 - var(--divide-x-reverse))") solid currentColor !important;
-    border-right: calc(~"1px * var(--divide-x-reverse)") solid currentColor !important;
+
+    border-right: calc(~'1px * var(--divide-x-reverse)') solid currentColor !important;
+    border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid currentColor !important;
 }
+
 .d-divide-x0 > * + * {
     --divide-x-reverse: 0;
-    border-left: calc(~"0 * (1 - var(--divide-x-reverse))") solid currentColor !important;
-    border-right: calc(~"0 * var(--divide-x-reverse)") solid currentColor !important;
+
+    border-right: calc(~'0 * var(--divide-x-reverse)') solid currentColor !important;
+    border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid currentColor !important;
 }
+
 .d-divide-x2 > * + * {
     --divide-x-reverse: 0;
-    border-left: calc(~"2px * (1 - var(--divide-x-reverse))") solid currentColor !important;
-    border-right: calc(~"2px * var(--divide-x-reverse)") solid currentColor !important;
+
+    border-right: calc(~'2px * var(--divide-x-reverse)') solid currentColor !important;
+    border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid currentColor !important;
 }
+
 .d-divide-x4 > * + * {
     --divide-x-reverse: 0;
-    border-left: calc(~"4px * (1 - var(--divide-x-reverse))") solid currentColor !important;
-    border-right: calc(~"4px * var(--divide-x-reverse)") solid currentColor !important;
+
+    border-right: calc(~'4px * var(--divide-x-reverse)') solid currentColor !important;
+    border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid currentColor !important;
 }
 .d-divide-x-reverse > * + * { --divide-x-reverse: 1; }

package/lib/build/less/utilities/colors.less

@@ -1,4 +1,4 @@
-@import (reference) "../utilities/internals.less";
+//@import (reference) '../utilities/internals.less';
 
 //
 //  DIALTONE
@@ -9,192 +9,8 @@
 //  documentation pages at https://dialpad.design
 //
 //  TABLE OF CONTENTS
-//  • MIXINS
 //  • UTILITY CLASSES
 //
-//  ============================================================================
-//  $   MIXINS
-//  ----------------------------------------------------------------------------
-#d-internals() {
-    //  ========================================================================
-    //  $   COLOR CLASS GENERATOR
-    //      Create a mixin to generate all the utility classes required. By doing it
-    //      this way, we are disabling the ability to use Dialtone utility classes as
-    //      a mixin. Previously we had allowed for utility classes to be used as
-    //      mixins, but because our overall CSS bundle size is growing exponentially,
-    //      Dialtone v6 removed this ability. It is now recommended to use CSS
-    //      variables (var(--color)). Less variables (@color) are also available,
-    //      but their use is discouraged.
-    //
-    //      USAGE:
-    //      #d-internals #color-classes(purple-500);
-    //
-    //  ------------------------------------------------------------------------
-    #color-classes(@color-name) {
-        //  --  FONT STYLES
-        .d-fc-@{color-name},
-        .h\:d-fc-@{color-name}:hover,
-        .f\:d-fc-@{color-name}:focus {
-            --fco: 100%;
-            color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--fco)) !important;
-        }
-        .f\:d-fc-@{color-name}:focus-within {
-            --fco: 100%;
-            color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--fco)) !important;
-        }
-        #d-internals #dark-mode('.d\:d-fc-@{color-name}', {
-            --fco: 100%;
-            color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--fco)) !important;
-        });
-
-
-        //  --  BORDER STYLES
-        .d-bc-@{color-name},
-        .h\:d-bc-@{color-name}:hover,
-        .f\:d-bc-@{color-name}:focus {
-            --bco: 100%;
-            border-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bco)) !important;
-        }
-        .f\:d-bc-@{color-name}:focus-within {
-            --bco: 100%;
-            border-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bco)) !important;
-        }
-        #d-internals #dark-mode('.d\:d-bc-@{color-name}', {
-            --bco: 100%;
-            border-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bco)) !important;
-        });
-
-        //  --  DIVIDER COLORS
-        .d-divide-@{color-name} > * + * {
-            --dco: 100%;
-            border-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--dco)) !important;
-        }
-        #d-internals #dark-mode('.d\:d-divide-@{color-name} > * + *', {
-            --dco: 100%;
-            border-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--dco)) !important;
-        });
-
-        //  --  BACKGROUND STYLES
-        .d-bgc-@{color-name},
-        .h\:d-bgc-@{color-name}:hover,
-        .f\:d-bgc-@{color-name}:focus {
-            --bgo: 100%;
-            background-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bgo)) !important;
-        }
-        .f\:d-bgc-@{color-name}:focus-within {
-            --bgo: 100%;
-            background-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bgo)) !important;
-        }
-        #d-internals #dark-mode('.d\:d-bgc-@{color-name}', {
-            --bgo: 100%;
-            background-color: hsla(var(~"--@{color-name}-h") var(~"--@{color-name}-s") var(~"--@{color-name}-l") ~" / " var(--bgo)) !important;
-        });
-    }
-
-    //  ========================================================================
-    //  $   STANDARD WEIGHT LOOP GENERATOR
-    //      Since most of our colors have similar stops (100 - 600), we'll save
-    //      ourselves the need to call the mixin for each color and create a
-    //      loop that will create most of the colors for us.
-    //
-    //      USAGE:
-    //      #d-internals #standard-stops(purple);
-    //
-    //  ------------------------------------------------------------------------
-    #standard-stops(@color) {
-        #d-internals #color-classes(~"@{color}-600");
-        #d-internals #color-classes(~"@{color}-500");
-        #d-internals #color-classes(~"@{color}-400");
-        #d-internals #color-classes(~"@{color}-300");
-        #d-internals #color-classes(~"@{color}-200");
-        #d-internals #color-classes(~"@{color}-100");
-    }
-
-    //  ========================================================================
-    //  $   OPACITY CLASS GENERATOR
-    //      Creates opacity classes for font, background, and border colors.
-    //
-    //      USAGE:
-    //      #d-internals #opacity-classes(50);
-    //
-    //  ------------------------------------------------------------------------
-    #opacity-classes(@opacity) {
-        //  --  FONT OPACITY
-        .d-fco@{opacity},
-        .h\:d-fco@{opacity}:hover,
-        .f\:d-fco@{opacity}:focus {
-            --fco: ~"@{opacity}%" !important;
-        }
-        .f\:d-fco@{opacity}:focus-within {
-            --fco: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-fco@{opacity}', {
-            --fco: ~"@{opacity}%" !important;
-        });
-
-
-        //  --  BORDER OPACITY
-        .d-bco@{opacity},
-        .h\:d-bco@{opacity}:hover,
-        .f\:d-bco@{opacity}:focus {
-            --bco: ~"@{opacity}%" !important;
-        }
-        .f\:d-bco@{opacity}:focus-within {
-            --bco: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-bco@{opacity}', {
-            --bco: ~"@{opacity}%" !important;
-        });
-
-        //  --  DIVIDER OPACITY
-        .d-dco@{opacity} > * + * {
-            --dco: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-dco@{opacity} > * + *', {
-            --dco: ~"@{opacity}%" !important;
-        });
-
-        //  --  BACKGROUND COLOR OPACITY
-        .d-bgo@{opacity},
-        .h\:d-bgo@{opacity}:hover,
-        .f\:d-bgo@{opacity}:focus {
-            --bgo: ~"@{opacity}%" !important;
-        }
-        .f\:d-bgo@{opacity}:focus-within {
-            --bgo: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-bgo@{opacity}', {
-            --bgo: ~"@{opacity}%" !important;
-        });
-
-        //  --  BACKGROUND GRADIENT STARTING STOP
-        .d-bgg-from-o@{opacity},
-        .h\:d-bgg-from-@{opacity}:hover,
-        .f\:d-bgg-from-@{opacity}:focus {
-            --bgg-from-opacity: ~"@{opacity}%" !important;
-        }
-        .f\:d-bgg-from-@{opacity}:focus-within {
-            --bgg-from-opacity: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-bgg-from-@{opacity}', {
-            --bgg-from-opacity: ~"@{opacity}%" !important;
-        });
-
-        //  --  BACKGROUND GRADIENT ENDING STOP
-        .d-bgg-to-o@{opacity},
-        .h\:d-bgg-to-@{opacity}:hover,
-        .f\:d-bgg-to-@{opacity}:focus {
-            --bgg-to-opacity: ~"@{opacity}%" !important;
-        }
-        .f\:d-bgg-to-@{opacity}:focus-within {
-            --bgg-to-opacity: ~"@{opacity}%" !important;
-        }
-        #d-internals #dark-mode('.d\:d-bgg-to-@{opacity}', {
-            --bgg-to-opacity: ~"@{opacity}%" !important;
-        });
-    }
-}
-
 //  ============================================================================
 //  $   UTILITY CLASSES
 //  ----------------------------------------------------------------------------
@@ -226,62 +42,66 @@
 .d-fc-primary,
 .h\:d-fc-primary:hover,
 .f\:d-fc-primary:focus {
-    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  ~" / " var(--fco)) !important;
+    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  ~' / ' var(--fco)) !important;
 }
+
 .f\:d-fc-primary:focus-within {
-    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~" / " var(--fco)) !important;
+    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
 }
 
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
-.d-fc-dark                      { &:extend(.d-fc-black-900); }
-.h\:d-fc-dark:hover             { &:extend(.h\:d-fc-black-900:hover); }
-.f\:d-fc-dark:focus             { &:extend(.f\:d-fc-black-900:focus); }
-.f\:d-fc-dark:focus-within      { &:extend(.f\:d-fc-black-900:focus-within); }
-
-.d-fc-medium                    { &:extend(.d-fc-black-800); }
-.h\:d-fc-medium:hover           { &:extend(.h\:d-fc-black-800:hover); }
-.f\:d-fc-medium:focus           { &:extend(.f\:d-fc-black-800:focus); }
-.f\:d-fc-medium:focus-within    { &:extend(.f\:d-fc-black-800:focus-within); }
-
-.d-fc-light                      { &:extend(.d-fc-black-700); }
-.h\:d-fc-light:hover             { &:extend(.h\:d-fc-black-700:hover); }
-.f\:d-fc-light:focus             { &:extend(.f\:d-fc-black-700:focus); }
-.f\:d-fc-light:focus-within      { &:extend(.f\:d-fc-black-700:focus-within); }
-
-.d-fc-lighter                   { &:extend(.d-fc-black-600); }
-.d-fc-purple                    { &:extend(.d-fc-purple-500); }
-.d-fc-orange                    { &:extend(.d-fc-orange-600); }
-.d-fc-pink                      { &:extend(.d-fc-pink-600); }
+.d-fc-dark { &:extend(.d-fc-black-900); }
+.h\:d-fc-dark:hover { &:extend(.h\:d-fc-black-900:hover); }
+.f\:d-fc-dark:focus { &:extend(.f\:d-fc-black-900:focus); }
+.f\:d-fc-dark:focus-within { &:extend(.f\:d-fc-black-900:focus-within); }
+
+.d-fc-medium { &:extend(.d-fc-black-800); }
+.h\:d-fc-medium:hover { &:extend(.h\:d-fc-black-800:hover); }
+.f\:d-fc-medium:focus { &:extend(.f\:d-fc-black-800:focus); }
+.f\:d-fc-medium:focus-within { &:extend(.f\:d-fc-black-800:focus-within); }
+
+.d-fc-light { &:extend(.d-fc-black-700); }
+.h\:d-fc-light:hover { &:extend(.h\:d-fc-black-700:hover); }
+.f\:d-fc-light:focus { &:extend(.f\:d-fc-black-700:focus); }
+.f\:d-fc-light:focus-within { &:extend(.f\:d-fc-black-700:focus-within); }
+
+.d-fc-lighter { &:extend(.d-fc-black-600); }
+.d-fc-purple { &:extend(.d-fc-purple-500); }
+.d-fc-orange { &:extend(.d-fc-orange-600); }
+.d-fc-pink { &:extend(.d-fc-pink-600); }
 
 .d-fc-green,
-.d-fc-success                   { &:extend(.d-fc-green-600); }
+.d-fc-success { &:extend(.d-fc-green-600); }
+
 .d-fc-yellow,
-.d-fc-warning                   { &:extend(.d-fc-yellow-600); }
+.d-fc-warning { &:extend(.d-fc-yellow-600); }
+
 .d-fc-red,
 .d-fc-error,
-.d-fc-danger                    { &:extend(.d-fc-red-600); }
+.d-fc-danger { &:extend(.d-fc-red-600); }
 
-.d-fc-current                   { color: currentColor !important; }
-.d-fc-transparent               { color: transparent !important; }
-.d-fc-unset                     { color: unset !important; }
+.d-fc-current { color: currentColor !important; }
+.d-fc-transparent { color: transparent !important; }
+.d-fc-unset { color: unset !important; }
 
 
 //  $$  BACKGROUND COLORS
 //  ----------------------------------------------------------------------------
-.d-bgc-success                  { &:extend(.d-bgc-green-500); }
-.d-bgc-warning                  { &:extend(.d-bgc-yellow-500); }
+.d-bgc-success { &:extend(.d-bgc-green-500); }
+.d-bgc-warning { &:extend(.d-bgc-yellow-500); }
+
 .d-bgc-error,
-.d-bgc-danger                   { &:extend(.d-bgc-red-500); }
-.d-bgc-transparent              { background-color: transparent !important; background-image: none !important; }
-.d-bgc-unset                    { background-color: unset !important; background-image: unset !important; }
+.d-bgc-danger { &:extend(.d-bgc-red-500); }
+.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
+.d-bgc-unset { background-color: unset !important; background-image: unset !important; }
 
 
 //  $$  BORDER COLORS
 //  ----------------------------------------------------------------------------
-.d-bc-transparent               { border-color: transparent !important; }
-.d-bc-current                   { border-color: currentColor !important; }
-.d-bc-unset                     { border-color: unset !important; }
+.d-bc-transparent { border-color: transparent !important; }
+.d-bc-current { border-color: currentColor !important; }
+.d-bc-unset { border-color: unset !important; }
 
 
 //  $   OPACITY CLASSES