@dialpad/dialtone 6.8.1 → 6.9.0

package/lib/build/less/utilities/internals.less

@@ -26,6 +26,183 @@
 //      Various mixins used to build Dialtone
 //  ----------------------------------------------------------------------------
 #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;
+      });
+    }
     //  ========================================================================
     //  $   COLOR VARS
     //      #color-vars creates all our HSL CSS color vars for us from a set
@@ -39,8 +216,8 @@
         --@{name}-h: hue(@color);
         --@{name}-s: saturation(@color);
         --@{name}-l: lightness(@color);
-        --@{name}-hsl: ~'var(--@{name}-h) var(--@{name}-s) var(--@{name}-l)';
-        --@{name}: hsla(~'var(--@{name}-h) var(--@{name}-s) var(--@{name}-l) /  var(--alpha, 100%)');
+        --@{name}-hsl: ~"var(--@{name}-h) var(--@{name}-s) var(--@{name}-l)";
+        --@{name}: hsla(~"var(--@{name}-h) var(--@{name}-s) var(--@{name}-l) /  var(--alpha, 100%)");
     }
     #dark-color-vars(@name, @color) {
 
@@ -58,9 +235,9 @@
     //
     //  ------------------------------------------------------------------------
     #dark-mode(@class, @rules) {
-        @nodot-s: replace(@class, '^\.', '');
-        @nodot: ~'@{nodot-s}';
-        @classname: ~'@{class}';
+        @nodot-s: replace(@class, "^\.", "");
+        @nodot: ~"@{nodot-s}";
+        @classname: ~"@{class}";
 
         body.theme-system @{classname} {
             @media (prefers-color-scheme: dark) {
@@ -99,14 +276,14 @@
             //  ...and less than 0
             & when (@unitless < 0) {
                 @abs: abs(@unitless);
-                @class-name: ~'@{class-prefix}n@{abs}';
+                @class-name: ~"@{class-prefix}n@{abs}";
 
                 @{class-name} { @rules(); .template(@val); }
             }
 
             //  ...and equal to or greater than 0
             & when (@unitless >= 0) {
-                @class-name: ~'@{class-prefix}@{unitless}';
+                @class-name: ~"@{class-prefix}@{unitless}";
 
                 @{class-name} { @rules(); .template(@val); }
             }
@@ -114,7 +291,7 @@
 
         //  When our values aren't numeric...
         & when not (isnumber(@val)) {
-            @class-name: ~'@{class-prefix}-@{val}';
+            @class-name: ~"@{class-prefix}-@{val}";
 
             @{class-name} { @rules(); .template(@val); }
         }
@@ -131,14 +308,14 @@
 
         //  When our values are numeric...
         & when (isnumber(@val)) {
-            @class-name: ~'@{class-prefix}@{val}';
+            @class-name: ~"@{class-prefix}@{val}";
 
             @{class-name} { @rules(); .template(@val); }
         }
 
         //  When our values aren't numeric...
         & when not (isnumber(@val)) {
-            @class-name: ~'@{class-prefix}-@{val}';
+            @class-name: ~"@{class-prefix}-@{val}";
 
             @{class-name} { @rules(); .template(@val); }
         }
@@ -158,187 +335,84 @@
                 font-style: @style;
                 font-weight: @key;
                 font-family: @name;
-                src: url('@{define-font-path}@{value}.woff2') format('woff2');
+                src: url("@{define-font-path}@{value}.woff2") format("woff2");
             };
         }));
     }
 
-
-    //  ========================================================================
-    //  $   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;
-        });
+    #gradient-classes(@color) {
+      //  COLOR STOP 1, STARTING STOP
+      .d-bgg-from-@{color},
+      .h\:d-bgg-from-@{color}:hover,
+      .f\:d-bgg-from-@{color}:focus {
+        --bgg-from-opacity: 100%;
+        --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
+      }
+      .f\:d-bgg-from-@{color}:focus-within {
+        --bgg-from-opacity: 100%;
+        --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
+      }
+      #d-internals #dark-mode('.d\:d-bgg-from-@{color}', {
+        --bgg-from-opacity: 100%;
+        --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
+      });
+
+      //  COLOR STOP 2, ENDING STOP
+      .d-bgg-to-@{color},
+      .h\:d-bgg-to-@{color}:hover,
+      .f\:d-bgg-to-@{color}:focus {
+        --bgg-to-opacity: 100%;
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
+      }
+      .f\:d-bgg-to-@{color}:focus-within {
+        --bgg-to-opacity: 100%;
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
+      }
+      #d-internals #dark-mode('.d\:d-bgg-to-@{color}', {
+        --bgg-to-opacity: 100%;
+        --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !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');
+    #gradient-stops(@color) {
+      #d-internals #gradient-classes(~"@{color}-600");
+      #d-internals #gradient-classes(~"@{color}-500");
+      #d-internals #gradient-classes(~"@{color}-400");
+      #d-internals #gradient-classes(~"@{color}-300");
+      #d-internals #gradient-classes(~"@{color}-200");
+      #d-internals #gradient-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;
-        });
+    #build-flex-columns(@num, @count: 1) when (@count =< @num) {
+    .d-fl-col@{count} {
+      display: flex;
 
+      //  Automatically make all direct child to obey the parent class
+      > * {
+        --fl-gap: 0;
+        --fl-basis: calc(100% / @count);
 
-        //  --  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;
-        });
+        display: inline-flex;
+        margin: var(--fl-gap);
+        flex: 1 calc(var(--fl-basis) - ((var(--fl-gap) * 2)));
 
-        //  --  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;
+        //  Add in a gap to items after the first row
+        &:nth-child(-n + @{count}) {
+          margin-top: 0;
         }
-        .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;
-        });
+      }
+
+      //  If flex column is in a column direction (and became rows),
+      //  change the margin direction.
+      &.d-fd-column > * {
+        margin: var(--fl-gap) 0;
+      }
     }
+
+    //  Iterate our loop until we hit our grid column total
+    #d-internals #build-flex-columns(@num, @count + 1);
+  }
 }

package/lib/build/less/utilities/layout.less

@@ -1,6 +1,6 @@
-@import (reference) '../variables/spacing.less';
-@import (reference) '../utilities/internals.less';
-@import (reference) '../utilities/responsive.less';
+//@import (reference) '../variables/spacing.less';
+//@import (reference) '../utilities/internals.less';
+//@import (reference) '../utilities/responsive.less';
 
 //
 //  DIALTONE
@@ -26,7 +26,6 @@
 .d-box-content { box-sizing: content-box !important; }
 .d-box-unset { box-sizing: unset !important; }
 
-
 //  ============================================================================
 //  $  COORDINATES
 //  ============================================================================
@@ -121,15 +120,15 @@
 //  ============================================================================
 //  $   DISPLAY
 //  ----------------------------------------------------------------------------
-#d-internals #responsive('.d-d-block', { display: block !important; });;;;
-#d-internals #responsive('.d-d-flex', { display: flex !important; });;;;
-#d-internals #responsive('.d-d-grid', { display: grid !important; });;;;
-#d-internals #responsive('.d-d-inline', { display: inline !important; });;;;
-#d-internals #responsive('.d-d-inline-block', { display: inline-block !important; });;;;
-#d-internals #responsive('.d-d-inline-flex', { display: inline-flex !important; });;;;
-#d-internals #responsive('.d-d-inline-grid', { display: inline-grid !important; });;;;
-#d-internals #responsive('.d-d-none', { display: none !important; });;;;
-#d-internals #responsive('.d-d-unset', { display: unset !important; });;
+.d-d-block { display: block !important; };;;;
+.d-d-flex { display: flex !important; };;;;
+.d-d-grid { display: grid !important; };;;;
+.d-d-inline { display: inline !important; };;;;
+.d-d-inline-block { display: inline-block !important; };;;;
+.d-d-inline-flex { display: inline-flex !important; };;;;
+.d-d-inline-grid { display: inline-grid !important; };;;;
+.d-d-none { display: none !important; };;;;
+.d-d-unset { display: unset !important; };;
 
 
 //  ============================================================================
@@ -153,12 +152,12 @@
 //  ============================================================================
 //  $   POSITION
 //  ----------------------------------------------------------------------------
-#d-internals #responsive('.d-ps-static', { position: static !important; });;;;
-#d-internals #responsive('.d-ps-relative', { position: relative !important; });;;;
-#d-internals #responsive('.d-ps-absolute', { position: absolute !important; });;;;
-#d-internals #responsive('.d-ps-fixed', { position: fixed !important; });;;;
-#d-internals #responsive('.d-ps-sticky', { position: sticky !important; });;;;
-#d-internals #responsive('.d-ps-unset', { position: unset !important; });;
+.d-ps-static { position: static !important; };;;;
+.d-ps-relative { position: relative !important; };;;;
+.d-ps-absolute { position: absolute !important; };;;;
+.d-ps-fixed { position: fixed !important; };;;;
+.d-ps-sticky { position: sticky !important; };;;;
+.d-ps-unset { position: unset !important; };;
 
 
 //  ============================================================================