@dialpad/dialtone 6.20.2 → 6.22.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [6.22.0](https://github.com/dialpad/dialtone/compare/v6.21.0...v6.22.0) (2022-04-08)
+
+
+### Bug Fixes
+
+* badge alignment (min-width and vertical alignment) ([#566](https://github.com/dialpad/dialtone/issues/566)) ([946186c](https://github.com/dialpad/dialtone/commit/946186cc7e6a38c5d5e8986acd284cffe9b100ce))
+* typo in spacing ([#565](https://github.com/dialpad/dialtone/issues/565)) ([729be23](https://github.com/dialpad/dialtone/commit/729be23e5d5c197e3c868b2ae5e65aecb25442b6))
+
+
+### Features
+
+* **button:** add active styles ([#564](https://github.com/dialpad/dialtone/issues/564)) ([1d4a962](https://github.com/dialpad/dialtone/commit/1d4a962833e2031daf9f9fa1a23092b244fbc34e))
+* **button:** add d-btn--active class ([#567](https://github.com/dialpad/dialtone/issues/567)) ([2a89e25](https://github.com/dialpad/dialtone/commit/2a89e253ddd7f7c15d6de7af0ef13c293dba0a86))
+
+# [6.21.0](https://github.com/dialpad/dialtone/compare/v6.20.3...v6.21.0) (2022-04-04)
+
+
+### Features
+
+* **input:** support different icon sizes ([#563](https://github.com/dialpad/dialtone/issues/563)) ([0ad3c02](https://github.com/dialpad/dialtone/commit/0ad3c02db72d586bc39883aa6476bd8676e5c893))
+
+## [6.20.3](https://github.com/dialpad/dialtone/compare/v6.20.2...v6.20.3) (2022-03-31)
+
+
+### Bug Fixes
+
+* **popover:** remove d-popover__anchor--modal-opened class ([d62cde0](https://github.com/dialpad/dialtone/commit/d62cde09cb2827f8ccbde0f20c19edcdf6c1397f))
+
 ## [6.20.2](https://github.com/dialpad/dialtone/compare/v6.20.1...v6.20.2) (2022-03-29)
 
 

package/lib/build/less/components/badge.less

@@ -19,11 +19,13 @@
   --badge--bgc: var(--black-050);
 
   display: inline-block;
-  padding: var(--su2) var(--su6) var(--su1);
+  min-width: calc(var(--su6) + var(--su1));
+  padding: calc(var(--su6) / 4) var(--su6);
   color: var(--badge--fc);
   font-weight: bold;
   font-size: var(--fs10);
   line-height: var(--lh6);
+  text-align: center;
   text-transform: uppercase;
   background-color: var(--badge--bgc);
   border-radius: var(--su4);

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

@@ -51,13 +51,19 @@
 
     //  --  STATES
     //  ------------------------------------------------------------------------
+    &:hover {
+        --button--fc: var(--primary-color-hover);
+        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+    }
 
     &:active,
-    &:hover {
+    &.d-btn--active,
+    &.d-btn--active:active {
         --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
+        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
     }
 
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--bs-focus-ring);
@@ -213,11 +219,6 @@
     padding: calc(var(--su8) + var(--su1));
     transition-duration: 150ms;
 
-    &:hover {
-        --button--fc: var(--black-800);
-        --button--bgc: var(--black-100);
-    }
-
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
@@ -234,11 +235,6 @@
         --button--bc: var(--black-700);
     }
 
-    // &:active {
-    //     border-color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) ~" / " 50%);
-    //     background-color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) ~" / " 10%);
-    // }
-
     //  Adjust padding based on sizes
     &.d-btn--xs {
         padding: calc(var(--su8) - var(--su1));
@@ -278,8 +274,15 @@
     --button--bgc: var(--primary-color);
 
     &:hover {
-        --button--fc: var(--white);
-        --button--bgc: var(--primary-color-hover);
+      --button--fc: var(--white);
+      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+      --button--fc: var(--white);
+      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
     }
 }
 
@@ -288,9 +291,14 @@
 .d-btn--muted {
     --button--fc: var(--muted-color);
 
-    &:hover {
+    &:hover,
+    &:active {
       --button--fc: var(--muted-color-hover);
-      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 7.5%);
+      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    }
+
+    &:active {
+      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {
@@ -308,8 +316,15 @@
     --button--fc: var(--error-color);
 
     &:hover {
-        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 10%);
         --button--fc: var(--error-color-hover);
+        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 6%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--error-color-hover);
+        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 20%);
     }
 
     &:focus-visible {
@@ -325,8 +340,14 @@
         --button--bgc: var(--error-color);
 
         &:hover {
+            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 40%);
+        }
+
+        &:active,
+        &.d-btn--active,
+        &.d-btn--active:active {
             --button--fc: var(--white);
-            --button--bgc: var(--error-color-hover);
+            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 27%);
         }
     }
 }
@@ -343,6 +364,13 @@
         --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--white);
+        --button--bgc: hsla(var(--white-hsl) ~' / ' 30%);
+    }
+
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-inverted);
     }
@@ -355,11 +383,18 @@
     //  --  PRIMARY
     &.d-btn--primary {
         --button--fc: var(--primary-color);
-        --button--bgc: var(--white);
+        --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
             --button--fc: var(--primary-color-hover);
-            --button--bgc: hsla(var(--white-hsl) ~' / ' 90%);
+            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
+        }
+
+        &:active,
+        &.d-btn--active,
+        &.d-btn--active:active {
+            --button--fc: var(--primary-color-hover);
+            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }
 }

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

@@ -112,7 +112,7 @@
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
-.d-input--xs {
+.d-input.d-input--xs {
     .input-button-xs();
 
     &.d-input-icon--right {
@@ -124,7 +124,7 @@
     }
 }
 
-.d-input--sm {
+.d-input.d-input--sm {
     .input-button-sm();
 
     &.d-input-icon--right {
@@ -136,7 +136,7 @@
     }
 }
 
-.d-input--lg {
+.d-input.d-input--lg {
     .input-button-lg();
 
     &.d-input-icon--right {
@@ -148,7 +148,7 @@
     }
 }
 
-.d-input--xl {
+.d-input.d-input--xl {
     .input-button-xl();
 
     &.d-input-icon--right {
@@ -268,14 +268,11 @@
     --input-icon-size: @icon16;
 
     position: absolute;
-    top: 0;
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
-    width: var(--input-icon-size);
-    height: var(--input-icon-size);
+    height: 3.6rem;
     margin: 0;
-    margin-top: 1rem;
     line-height: 0;
 
     svg {
@@ -285,39 +282,34 @@
 
     &.d-input-icon--left {
         left: var(--su8);
+        // Update padding for d-input if d-input-icon--left is present
+        & ~ .d-input,
+        & ~ .d-textarea {
+            padding-left: @inputs-icon-spacing;
+        }
     }
 
     &.d-input-icon--right {
         right: var(--su8);
-    }
-}
 
-// For backwards compatibility purposes only.
-// be used instead of this.
-.d-input-icon--left {
-    // Update padding for d-input if d-input-icon--right is present
-    & ~ .d-input,
-    & ~ .d-textarea {
-        padding-left: @inputs-icon-spacing;
+        // Update padding for d-input if d-input-icon--right is present
+        & ~ .d-input {
+            padding-right: @inputs-icon-spacing;
+        }
     }
 }
 
-// For backwards compatibility purposes only.
-// be used instead of this.
-.d-input-icon--right {
-    // Update padding for d-input if d-input-icon--right is present
-    & ~ .d-input {
-        padding-right: @inputs-icon-spacing;
-    }
-}
+
 
 //  $$ SIZES
 //  ----------------------------------------------------------------------------
+.d-input-icon.d-input--xs {
+    height: 2.8rem;
+}
+
 .d-input-icon--xs {
     --input-icon-size: @icon12;
 
-    margin-top: 0.8rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -332,11 +324,13 @@
     }
 }
 
+.d-input-icon.d-input--sm {
+    height: 3.2rem;
+}
+
 .d-input-icon--sm {
     --input-icon-size: @icon14;
 
-    margin-top: 0.9rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -351,11 +345,13 @@
     }
 }
 
+.d-input-icon.d-input--lg {
+    height: 4.8rem;
+}
+
 .d-input-icon--lg {
     --input-icon-size: @icon20;
 
-    margin-top: 1.4rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -370,11 +366,13 @@
     }
 }
 
+.d-input-icon.d-input--xl {
+    height: 5.6rem;
+}
+
 .d-input-icon--xl {
     --input-icon-size: @icon24;
 
-    margin-top: 1.6rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,

package/lib/build/less/components/popover.less

@@ -41,11 +41,6 @@
   z-index: var(--zi-modal-element);
 }
 
-// to be set on the anchor container whenever the modal dialog is opened.
-.d-popover__anchor--modal-opened * {
-  z-index: 650;
-}
-
 //  $$  DIALOG CONTENT
 //  ----------------------------------------------------------------------------
 .d-popover__content {

package/lib/dist/css/dialtone.css

@@ -480,11 +480,13 @@ body {
   --badge--fc: var(--fc-dark);
   --badge--bgc: var(--black-050);
   display: inline-block;
-  padding: var(--su2) var(--su6) var(--su1);
+  min-width: calc(var(--su6) + var(--su1));
+  padding: calc(var(--su6) / 4) var(--su6);
   color: var(--badge--fc);
   font-weight: bold;
   font-size: var(--fs10);
   line-height: var(--lh6);
+  text-align: center;
   text-transform: uppercase;
   background-color: var(--badge--bgc);
   border-radius: var(--su4);
@@ -690,10 +692,15 @@ body {
   user-select: none;
   fill: currentColor;
 }
-.d-btn:active,
 .d-btn:hover {
   --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  10%);
+  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
+}
+.d-btn:active,
+.d-btn.d-btn--active,
+.d-btn.d-btn--active:active {
+  --button--fc: var(--primary-color-hover);
+  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
 }
 .d-btn.focus-visible {
   outline: none;
@@ -806,10 +813,6 @@ body {
   padding: calc(var(--su8) + var(--su1));
   transition-duration: 150ms;
 }
-.d-btn--circle:hover {
-  --button--fc: var(--black-800);
-  --button--bgc: var(--black-100);
-}
 .d-btn--circle.focus-visible {
   box-shadow: var(--bs-focus-ring-circle);
 }
@@ -850,14 +853,24 @@ body {
 }
 .d-btn--primary:hover {
   --button--fc: var(--white);
-  --button--bgc: var(--primary-color-hover);
+  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+}
+.d-btn--primary:active,
+.d-btn--primary.d-btn--active,
+.d-btn--primary.d-btn--active:active {
+  --button--fc: var(--white);
+  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
 }
 .d-btn--muted {
   --button--fc: var(--muted-color);
 }
-.d-btn--muted:hover {
+.d-btn--muted:hover,
+.d-btn--muted:active {
   --button--fc: var(--muted-color-hover);
-  --button--bgc: hsla(var(--muted-color-hsl)  /  7.5%);
+  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+}
+.d-btn--muted:active {
+  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-btn--muted.focus-visible {
   box-shadow: var(--bs-focus-ring-muted);
@@ -872,8 +885,14 @@ body {
   --button--fc: var(--error-color);
 }
 .d-btn--danger:hover {
-  --button--bgc: hsla(var(--error-color-hsl)  /  10%);
   --button--fc: var(--error-color-hover);
+  --button--bgc: hsla(var(--error-color-hsl)  /  6%);
+}
+.d-btn--danger:active,
+.d-btn--danger.d-btn--active,
+.d-btn--danger.d-btn--active:active {
+  --button--fc: var(--error-color-hover);
+  --button--bgc: hsla(var(--error-color-hsl)  /  20%);
 }
 .d-btn--danger.focus-visible {
   box-shadow: var(--bs-focus-ring-error);
@@ -889,8 +908,13 @@ body {
   --button--bgc: var(--error-color);
 }
 .d-btn--danger.d-btn--primary:hover {
+  --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 40%);
+}
+.d-btn--danger.d-btn--primary:active,
+.d-btn--danger.d-btn--primary.d-btn--active,
+.d-btn--danger.d-btn--primary.d-btn--active:active {
   --button--fc: var(--white);
-  --button--bgc: var(--error-color-hover);
+  --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 27%);
 }
 .d-btn--inverted {
   --button--fc: var(--white);
@@ -900,6 +924,12 @@ body {
   --button--fc: var(--white);
   --button--bgc: hsla(var(--white-hsl)  /  15%);
 }
+.d-btn--inverted:active,
+.d-btn--inverted.d-btn--active,
+.d-btn--inverted.d-btn--active:active {
+  --button--fc: var(--white);
+  --button--bgc: hsla(var(--white-hsl)  /  30%);
+}
 .d-btn--inverted.focus-visible {
   box-shadow: var(--bs-focus-ring-inverted);
 }
@@ -911,11 +941,17 @@ body {
 }
 .d-btn--inverted.d-btn--primary {
   --button--fc: var(--primary-color);
-  --button--bgc: var(--white);
+  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 }
 .d-btn--inverted.d-btn--primary:hover {
   --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--white-hsl)  /  90%);
+  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
+}
+.d-btn--inverted.d-btn--primary:active,
+.d-btn--inverted.d-btn--primary.d-btn--active,
+.d-btn--inverted.d-btn--primary.d-btn--active:active {
+  --button--fc: var(--primary-color-hover);
+  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
 }
 .d-btn--icon-only {
   padding: calc(var(--su8) + var(--su1));
@@ -1184,64 +1220,64 @@ legend .d-label {
 .d-input__wrapper {
   position: relative;
 }
-.d-input--xs {
+.d-input.d-input--xs {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-size: var(--fs12);
 }
-.d-input--xs .d-btn__icon {
+.d-input.d-input--xs .d-btn__icon {
   width: 1.4rem;
   height: 1.4rem;
 }
-.d-input--xs.d-input-icon--right {
+.d-input.d-input--xs.d-input-icon--right {
   padding-right: calc(var(--su4) + 1.2rem + var(--su8));
 }
-.d-input--xs.d-input-icon--left {
+.d-input.d-input--xs.d-input-icon--left {
   padding-left: calc(var(--su4) + 1.2rem + var(--su8));
 }
-.d-input--sm {
+.d-input.d-input--sm {
   padding-top: var(--su6);
   padding-bottom: var(--su6);
   font-size: var(--fs14);
 }
-.d-input--sm .d-btn__icon {
+.d-input.d-input--sm .d-btn__icon {
   width: 1.6rem;
   height: 1.6rem;
 }
-.d-input--sm.d-input-icon--right {
+.d-input.d-input--sm.d-input-icon--right {
   padding-right: calc(var(--su4) + 1.4rem + var(--su8));
 }
-.d-input--sm.d-input-icon--left {
+.d-input.d-input--sm.d-input-icon--left {
   padding-left: calc(var(--su4) + 1.4rem + var(--su8));
 }
-.d-input--lg {
+.d-input.d-input--lg {
   padding-top: 1.1rem;
   padding-bottom: 1.1rem;
   font-size: var(--fs20);
 }
-.d-input--lg .d-btn__icon {
+.d-input.d-input--lg .d-btn__icon {
   width: 2rem;
   height: 2rem;
 }
-.d-input--lg.d-input-icon--right {
+.d-input.d-input--lg.d-input-icon--right {
   padding-right: calc(var(--su4) + 2rem + var(--su8));
 }
-.d-input--lg.d-input-icon--left {
+.d-input.d-input--lg.d-input-icon--left {
   padding-left: calc(var(--su4) + 2rem + var(--su8));
 }
-.d-input--xl {
+.d-input.d-input--xl {
   padding-top: 1.3rem;
   padding-bottom: 1.3rem;
   font-size: var(--fs24);
 }
-.d-input--xl .d-btn__icon {
+.d-input.d-input--xl .d-btn__icon {
   width: 2.4rem;
   height: 2.4rem;
 }
-.d-input--xl.d-input-icon--right {
+.d-input.d-input--xl.d-input-icon--right {
   padding-right: calc(var(--su4) + 2.4rem + var(--su8));
 }
-.d-input--xl.d-input-icon--left {
+.d-input.d-input--xl.d-input-icon--left {
   padding-left: calc(var(--su4) + 2.4rem + var(--su8));
 }
 .d-textarea {
@@ -1342,14 +1378,11 @@ legend .d-label {
 .d-input-icon {
   --input-icon-size: 1.6rem;
   position: absolute;
-  top: 0;
   z-index: var(--zi-base1);
   display: inline-flex;
   align-items: center;
-  width: var(--input-icon-size);
-  height: var(--input-icon-size);
+  height: 3.6rem;
   margin: 0;
-  margin-top: 1rem;
   line-height: 0;
 }
 .d-input-icon svg {
@@ -1359,19 +1392,21 @@ legend .d-label {
 .d-input-icon.d-input-icon--left {
   left: var(--su8);
 }
+.d-input-icon.d-input-icon--left ~ .d-input,
+.d-input-icon.d-input-icon--left ~ .d-textarea {
+  padding-left: calc(var(--su4) + 1.6rem + var(--su8));
+}
 .d-input-icon.d-input-icon--right {
   right: var(--su8);
 }
-.d-input-icon--left ~ .d-input,
-.d-input-icon--left ~ .d-textarea {
-  padding-left: calc(var(--su4) + 1.6rem + var(--su8));
-}
-.d-input-icon--right ~ .d-input {
+.d-input-icon.d-input-icon--right ~ .d-input {
   padding-right: calc(var(--su4) + 1.6rem + var(--su8));
 }
+.d-input-icon.d-input--xs {
+  height: 2.8rem;
+}
 .d-input-icon--xs {
   --input-icon-size: 1.2rem;
-  margin-top: 0.8rem;
 }
 .d-input-icon--xs.d-input-icon--left ~ .d-input,
 .d-input-icon--xs.d-input-icon--left ~ .d-textarea {
@@ -1380,9 +1415,11 @@ legend .d-label {
 .d-input-icon--xs.d-input-icon--right ~ .d-input {
   padding-right: calc(var(--su4) + 1.2rem + var(--su8));
 }
+.d-input-icon.d-input--sm {
+  height: 3.2rem;
+}
 .d-input-icon--sm {
   --input-icon-size: 1.4rem;
-  margin-top: 0.9rem;
 }
 .d-input-icon--sm.d-input-icon--left ~ .d-input,
 .d-input-icon--sm.d-input-icon--left ~ .d-textarea {
@@ -1391,9 +1428,11 @@ legend .d-label {
 .d-input-icon--sm.d-input-icon--right ~ .d-input {
   padding-right: calc(var(--su4) + 1.4rem + var(--su8));
 }
+.d-input-icon.d-input--lg {
+  height: 4.8rem;
+}
 .d-input-icon--lg {
   --input-icon-size: 2rem;
-  margin-top: 1.4rem;
 }
 .d-input-icon--lg.d-input-icon--left ~ .d-input,
 .d-input-icon--lg.d-input-icon--left ~ .d-textarea {
@@ -1402,9 +1441,11 @@ legend .d-label {
 .d-input-icon--lg.d-input-icon--right ~ .d-input {
   padding-right: calc(var(--su4) + 2rem + var(--su8));
 }
+.d-input-icon.d-input--xl {
+  height: 5.6rem;
+}
 .d-input-icon--xl {
   --input-icon-size: 2.4rem;
-  margin-top: 1.6rem;
 }
 .d-input-icon--xl.d-input-icon--left ~ .d-input,
 .d-input-icon--xl.d-input-icon--left ~ .d-textarea {
@@ -2007,9 +2048,6 @@ legend .d-label {
 .d-popover__dialog--modal {
   z-index: var(--zi-modal-element);
 }
-.d-popover__anchor--modal-opened * {
-  z-index: 650;
-}
 .d-popover__content {
   overflow: auto;
 }