@dialpad/dialtone 6.21.0 → 6.22.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
 
 

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/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));