@dialpad/dialtone 6.8.0 → 6.11.0

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+# [6.11.0](https://github.com/dialpad/dialtone/compare/v6.10.0...v6.11.0) (2022-01-04)
+
+
+### Bug Fixes
+
+* generate missing hover/focus classes ([#522](https://github.com/dialpad/dialtone/issues/522)) ([0cc761b](https://github.com/dialpad/dialtone/commit/0cc761b5b6ee86746dfbd54e48400652b819348c))
+* responsive variations not working ([#526](https://github.com/dialpad/dialtone/issues/526)) ([c29d53d](https://github.com/dialpad/dialtone/commit/c29d53dc1c3c89a839d3c9724380f5b2e27e0cc2))
+* svg sizes showing up as NaN in svg utility class page ([#525](https://github.com/dialpad/dialtone/issues/525)) ([67c2b26](https://github.com/dialpad/dialtone/commit/67c2b26704e0bfe1209f578cfcec222645cfc549))
+
+
+### Features
+
+* add file upload spot illustration ([#527](https://github.com/dialpad/dialtone/issues/527)) ([e1533e8](https://github.com/dialpad/dialtone/commit/e1533e856f570688aa5ffc3dd37ae05c3a842987))
+
+# [6.10.0](https://github.com/dialpad/dialtone/compare/v6.9.0...v6.10.0) (2021-12-15)
+
+
+### Bug Fixes
+
+* add important to padding ([#518](https://github.com/dialpad/dialtone/issues/518)) ([2a7b0a5](https://github.com/dialpad/dialtone/commit/2a7b0a5d0ff700f9bf24369701f0dd4c93988ec3))
+
+
+### Features
+
+* **button:** add muted styles ([#516](https://github.com/dialpad/dialtone/issues/516)) ([5bea155](https://github.com/dialpad/dialtone/commit/5bea155057620865174e596c539660185029f499))
+
+# [6.9.0](https://github.com/dialpad/dialtone/compare/v6.8.1...v6.9.0) (2021-12-07)
+
+
+### Features
+
+* add foundational a11y documentation ([#512](https://github.com/dialpad/dialtone/issues/512)) ([fd7d771](https://github.com/dialpad/dialtone/commit/fd7d77197576ad1506bd1dda71051aa841bcb412))
+* add responsive variations ([#474](https://github.com/dialpad/dialtone/issues/474)) ([7d7aaa4](https://github.com/dialpad/dialtone/commit/7d7aaa4b9f47bfdf48162cfa0013cb8be33ded67)), closes [#478](https://github.com/dialpad/dialtone/issues/478) [#479](https://github.com/dialpad/dialtone/issues/479) [#480](https://github.com/dialpad/dialtone/issues/480) [#486](https://github.com/dialpad/dialtone/issues/486) [#489](https://github.com/dialpad/dialtone/issues/489)
+* add windows logo as system icon ([#517](https://github.com/dialpad/dialtone/issues/517)) ([3ee2445](https://github.com/dialpad/dialtone/commit/3ee24455842b379328409a1ca30399174be46402))
+* button group css classes ([#514](https://github.com/dialpad/dialtone/issues/514)) ([edb75d7](https://github.com/dialpad/dialtone/commit/edb75d7bb672223d4faaeae5e59b1e77d7644191))
+
+## [6.8.1](https://github.com/dialpad/dialtone/compare/v6.8.0...v6.8.1) (2021-11-23)
+
+
+### Bug Fixes
+
+* rename thumb down and thumb up to filename conventions ([9a22ad0](https://github.com/dialpad/dialtone/commit/9a22ad01b4b0bda24f7cd76a4465a76fce1ebbc9))
+
 # [6.8.0](https://github.com/dialpad/dialtone/compare/v6.7.0...v6.8.0) (2021-11-19)
 
 

package/lib/build/less/components/banner.less

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/button.less

@@ -1,4 +1,4 @@
-@import (reference) '../variables/icons.less';
+//@import (reference) '../variables/icons.less';
 
 //
 //  DIALTONE
@@ -260,11 +260,11 @@
 //  $$  MUTED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--muted {
-    --button--fc: var(--black-700);
+    --button--fc: var(--muted-color);
 
     &:hover {
-      --button--fc: var(--black-800);
-      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 10%);
+      --button--fc: var(--muted-color-hover);
+      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 7.5%);
     }
 
     &:focus {
@@ -443,3 +443,22 @@
         content: '';
     }
 }
+
+//  ============================================================================
+//  $   BUTTON GROUP
+//  ----------------------------------------------------------------------------
+.d-btn-group {
+    display: flex;
+
+    &.d-btn-group--start {
+        justify-content: start;
+    }
+
+    &.d-btn-group--end {
+        justify-content: end;
+    }
+
+    &.d-btn-group--space-between {
+        justify-content: space-between;
+    }
+}

package/lib/build/less/components/forms.less

@@ -1,4 +1,4 @@
-@import (reference) '../variables/typography.less';
+//@import (reference) '../variables/typography.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/input.less

@@ -1,5 +1,5 @@
-@import (reference) '../variables/icons.less';
-@import (reference) '../variables/sizes.less';
+//@import (reference) '../variables/icons.less';
+//@import (reference) '../variables/sizes.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/modal.less

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/notice.less

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/selects.less

@@ -1,6 +1,6 @@
-@import (reference) '../variables/sizes.less';
-@import (reference) '../variables/icons.less';
-@import (reference) 'input.less';
+//@import (reference) '../variables/sizes.less';
+//@import (reference) '../variables/icons.less';
+//@import (reference) 'input.less';
 
 //
 //  DIALTONE
@@ -100,7 +100,7 @@
 //  ----------------------------------------------------------------------------
 .d-select__input {
   height: 100%; // Fill the height of its parent
-  padding: 0.7rem 2em 0.7rem 0.8rem;
+  padding: 0.7rem 2em 0.7rem 0.8rem !important;
   color: var(--select--fc);
   background-color: var(--select--bgc);
   border-color: var(--select--bc);

package/lib/build/less/components/table.less

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/typography.less';
+//@import (reference) '../utilities/typography.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/toast.less

@@ -1,5 +1,5 @@
-@import (reference) '../utilities/spacing.less';
-@import (reference) '../utilities/effects.less';
+//@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/effects.less';
 
 //
 //  DIALTONE

package/lib/build/less/dialtone.less

@@ -29,6 +29,9 @@
 @import 'components/tabs';
 @import 'components/tooltip';
 
+//  --  CONFIG
+@import 'utilities/internals';
+
 //  --  UTILITIES
 @import 'utilities/backgrounds';
 @import 'utilities/borders';
@@ -38,32 +41,11 @@
 @import 'utilities/grid';
 @import 'utilities/interactivity';
 @import 'utilities/layout';
-@import 'utilities/responsive';
 @import 'utilities/sizing';
 @import 'utilities/spacing';
 @import 'utilities/svg';
 @import 'utilities/typography';
 
-
 //  --  THEMES & GLOBAL SETTINGS
 @import 'dialtone-globals';
 @import 'themes/default';
-
-//stylelint-disable
-//  --  RESPONSIVE CLASSES
-#d-internals #screen-xl({
-    #d-internals-collect-xl();
-});
-#d-internals #screen-lg({
-    #d-internals-collect-lg();
-});
-#d-internals #screen-md({
-    #d-internals-collect-md();
-});
-#d-internals #screen-sm({
-    #d-internals-collect-sm();
-});
-//stylelint-enable
-
-//  --  CONFIG
-@import 'utilities/internals';

package/lib/build/less/themes/default.less

@@ -1,12 +1,12 @@
-@import (reference) '../variables/colors.less';
-@import (reference) '../variables/layout.less';
-@import (reference) '../variables/borders.less';
-@import (reference) '../variables/visual-styles.less';
-@import (reference) '../variables/icons.less';
-@import (reference) '../variables/sizes.less';
-@import (reference) '../variables/typography.less';
-@import (reference) '../utilities/internals.less';
-@import (reference) '../utilities/grid.less';
+//@import (reference) '../variables/colors.less';
+//@import (reference) '../variables/layout.less';
+//@import (reference) '../variables/borders.less';
+//@import (reference) '../variables/visual-styles.less';
+//@import (reference) '../variables/icons.less';
+//@import (reference) '../variables/sizes.less';
+//@import (reference) '../variables/typography.less';
+//@import (reference) '../utilities/internals.less';
+//@import (reference) '../utilities/grid.less';
 
 //
 //  DIALTONE

package/lib/build/less/utilities/backgrounds.less

@@ -1,5 +1,5 @@
-@import (reference) '../variables/colors.less';
-@import (reference) '../utilities/internals.less';
+//@import (reference) '../variables/colors.less';
+//@import (reference) '../utilities/internals.less';
 
 //
 //  DIALTONE
@@ -10,7 +10,6 @@
 //  visit https://dialpad.design/utilities/borders
 //
 //  TABLE OF CONTENTS
-//  • INTERNALS/MIXINS
 //  • BACKGROUND ATTACHMENT
 //  • BACKGROUND CLIP
 //  • BACKGROUND POSITION
@@ -19,57 +18,6 @@
 //  • GRADIENTS
 //  • PATTERNS
 //
-//  ============================================================================
-//  $   MIXINS
-//  ----------------------------------------------------------------------------
-#d-internals() {
-    #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;
-        })
-    }
-
-    #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');
-    }
-}
-
 //  ----------------------------------------------------------------------------
 //  --  Create background stops for most colors
 #d-internals #gradient-stops(black);
@@ -169,7 +117,9 @@
 .d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
 .d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
 .d-bgg-none { background-image: none !important; }
+#d-internals #generate-hover-focus(d-bgg-none, {.d-bgg-none();});
 .d-bgg-unset { background-image: unset !important; }
+#d-internals #generate-hover-focus(d-bgg-unset, {.d-bgg-unset();});
 
 
 //  ============================================================================

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

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

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/internals.less';
+//@import (reference) '../utilities/internals.less';
 
 //
 //  DIALTONE
@@ -9,199 +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
 //  ----------------------------------------------------------------------------
@@ -229,70 +38,85 @@
 #d-internals #color-classes(green-700);
 #d-internals #color-classes(red-700);
 
-//  --  We can't use the mixin for this one class :(
-.d-fc-primary,
-.h\:d-fc-primary:hover,
-.f\:d-fc-primary:focus {
+.d-fc-primary {
     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;
-}
+#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});
 
 //  $$  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-internals #generate-hover-focus(d-fc-dark, {.d-fc-dark();});
 
 .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-internals #generate-hover-focus(d-fc-medium, {.d-fc-medium();});
 
 .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-internals #generate-hover-focus(d-fc-light, {.d-fc-light();});
 
 .d-fc-lighter { &:extend(.d-fc-black-600); }
+#d-internals #generate-hover-focus(d-fc-lighter, {.d-fc-lighter();});
+
 .d-fc-purple { &:extend(.d-fc-purple-500); }
+#d-internals #generate-hover-focus(d-fc-purple, {.d-fc-purple();});
+
 .d-fc-orange { &:extend(.d-fc-orange-600); }
+#d-internals #generate-hover-focus(d-fc-orange, {.d-fc-orange();});
+
 .d-fc-pink { &:extend(.d-fc-pink-600); }
+#d-internals #generate-hover-focus(d-fc-pink, {.d-fc-pink();});
 
 .d-fc-green,
 .d-fc-success { &:extend(.d-fc-green-600); }
+#d-internals #generate-hover-focus(d-fc-green, {.d-fc-green();});
+#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
 
 .d-fc-yellow,
 .d-fc-warning { &:extend(.d-fc-yellow-600); }
+#d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
+#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 
 .d-fc-red,
 .d-fc-error,
 .d-fc-danger { &:extend(.d-fc-red-600); }
+#d-internals #generate-hover-focus(d-fc-red, {.d-fc-red();});
+#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
+#d-internals #generate-hover-focus(d-fc-danger, {.d-fc-danger();});
 
 .d-fc-current { color: currentColor !important; }
+#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
 .d-fc-transparent { color: transparent !important; }
+#d-internals #generate-hover-focus(d-fc-transparent, {.d-fc-transparent();});
 .d-fc-unset { color: unset !important; }
+#d-internals #generate-hover-focus(d-fc-unset, {.d-fc-unset();});
 
 
 //  $$  BACKGROUND COLORS
 //  ----------------------------------------------------------------------------
 .d-bgc-success { &:extend(.d-bgc-green-500); }
+#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
 .d-bgc-warning { &:extend(.d-bgc-yellow-500); }
+#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
 
 .d-bgc-error,
 .d-bgc-danger { &:extend(.d-bgc-red-500); }
+#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
+#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
+
 .d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
+#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
 .d-bgc-unset { background-color: unset !important; background-image: unset !important; }
+#d-internals #generate-hover-focus(d-bgc-unset, {.d-bgc-unset();});
 
 
 //  $$  BORDER COLORS
 //  ----------------------------------------------------------------------------
 .d-bc-transparent { border-color: transparent !important; }
+#d-internals #generate-hover-focus(d-bc-transparent, {.d-bc-transparent();});
 .d-bc-current { border-color: currentColor !important; }
+#d-internals #generate-hover-focus(d-bc-current , {.d-bc-current();});
 .d-bc-unset { border-color: unset !important; }
+#d-internals #generate-hover-focus(d-bc-unset, {.d-bc-unset();});
 
 
 //  $   OPACITY CLASSES

package/lib/build/less/utilities/effects.less

@@ -1,4 +1,4 @@
-@import (reference) '../variables/spacing.less';
+//@import (reference) '../variables/spacing.less';
 
 //
 //  DIALTONE
@@ -138,17 +138,23 @@
   }
 }
 
-
 //  ============================================================================
 //  $   BOX SHADOW
 //  ----------------------------------------------------------------------------
 .d-bs-sm { box-shadow: var(--bs-sm) !important; }
+#d-internals #generate-hover-focus(d-bs-sm, {.d-bs-sm();});
 .d-bs-md { box-shadow: var(--bs-md) !important; }
+#d-internals #generate-hover-focus(d-bs-md, {.d-bs-md ();});
 .d-bs-lg { box-shadow: var(--bs-lg) !important; }
+#d-internals #generate-hover-focus(d-bs-lg, {.d-bs-lg();});
 .d-bs-xl { box-shadow: var(--bs-xl) !important; }
+#d-internals #generate-hover-focus(d-bs-xl, {.d-bs-xl();});
 .d-bs-card { box-shadow: var(--bs-card) !important; }
+#d-internals #generate-hover-focus(d-bs-card, {.d-bs-card();});
 .d-bs-none { box-shadow: none !important; }
+#d-internals #generate-hover-focus(d-bs-none, {.d-bs-none();});
 .d-bs-unset { box-shadow: unset !important; }
+#d-internals #generate-hover-focus(d-bs-unset, {.d-bs-unset();});
 
 
 //  ============================================================================