@dialpad/dialtone 6.21.0 → 6.23.1

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## [6.23.1](https://github.com/dialpad/dialtone/compare/v6.23.0...v6.23.1) (2022-04-19)
+
+
+### Bug Fixes
+
+* internal links not working after page switch ([8ff76cd](https://github.com/dialpad/dialtone/commit/8ff76cda55185bc662df8007725713fc23a2b75f))
+
+# [6.23.0](https://github.com/dialpad/dialtone/compare/v6.22.0...v6.23.0) (2022-04-18)
+
+
+### Bug Fixes
+
+* internal links when using <base> tag ([24b65fa](https://github.com/dialpad/dialtone/commit/24b65fa69a29c6cd7bb5264f70a78c3e508fa81d))
+
+
+### Features
+
+* add facebook, sentiment, reply icons ([#568](https://github.com/dialpad/dialtone/issues/568)) ([ff185d5](https://github.com/dialpad/dialtone/commit/ff185d51322adc630bbe8ffaeaead9275ce6b0c4))
+* add icons for new call workflow (Phase 2) ([#569](https://github.com/dialpad/dialtone/issues/569)) ([599852b](https://github.com/dialpad/dialtone/commit/599852b8b436a935df0cf7db2d8bb03c0723021c))
+
+# [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/build/svg/brand/facebook.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9776 11.9888C20.9776 7.02441 16.9531 3 11.9888 3C7.02441 3 3 7.02441 3 11.9888C3 16.4753 6.28706 20.194 10.5843 20.8684V14.5871H8.30198V11.9888H10.5843V10.0084C10.5843 7.75562 11.9262 6.51125 13.9795 6.51125C14.9629 6.51125 15.9916 6.6868 15.9916 6.6868V8.89889H14.8581C13.7415 8.89889 13.3933 9.59178 13.3933 10.3026V11.9888H15.8863L15.4877 14.5871H13.3933V20.8684C17.6905 20.194 20.9776 16.4753 20.9776 11.9888" fill="#1877F2"/><path d="M15.4877 14.5871L15.8862 11.9888H13.3932V10.3026C13.3932 9.59177 13.7415 8.89887 14.8581 8.89887H15.9916V6.68679C15.9916 6.68679 14.9629 6.51123 13.9794 6.51123C11.9262 6.51123 10.5843 7.75561 10.5843 10.0084V11.9888H8.30197V14.5871H10.5843V20.8683C11.0489 20.9412 11.5185 20.9777 11.9888 20.9775C12.4666 20.9775 12.9356 20.9401 13.3932 20.8683V14.5871H15.4877Z" fill="#fff"/></svg>

package/lib/build/svg/system/back-to-listen.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z" fill="#0D0C0F"/>
+<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z" fill="black"/>
+</svg>

package/lib/build/svg/system/barge.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#0D0C0F"/>
+<path d="M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="#E5E5E5"/>
+</svg>

package/lib/build/svg/system/emoticon-frown.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.88 17.5C7.68 15.45 9.67 14 12 14C14.33 14 16.32 15.45 17.12 17.5H15.45C14.75 16.31 13.48 15.5 12 15.5C10.52 15.5 9.24 16.31 8.55 17.5H6.88ZM2 12C2 6.48 6.47 2 11.99 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 11.99 22C6.47 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12ZM8.5 11C9.32843 11 10 10.3284 10 9.5C10 8.67157 9.32843 8 8.5 8C7.67157 8 7 8.67157 7 9.5C7 10.3284 7.67157 11 8.5 11ZM15.5 11C16.3284 11 17 10.3284 17 9.5C17 8.67157 16.3284 8 15.5 8C14.6716 8 14 8.67157 14 9.5C14 10.3284 14.6716 11 15.5 11Z" fill="#000"/></svg>

package/lib/build/svg/system/emoticon-neutral.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.48 6.47 2 11.99 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 11.99 22C6.47 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12ZM8.5 11C9.32843 11 10 10.3284 10 9.5C10 8.67157 9.32843 8 8.5 8C7.67157 8 7 8.67157 7 9.5C7 10.3284 7.67157 11 8.5 11ZM17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8C16.3284 8 17 8.67157 17 9.5ZM15 15.5V14H9V15.5H15Z" fill="#000"/></svg>

package/lib/build/svg/system/reply.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 9V5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9Z" fill="#000"/></svg>

package/lib/build/svg/system/takeover.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2848_38)">
+<path d="M6.6 15.6L8 17L13 12L8 7L6.6 8.4L9.2 11L0.999999 11L0.999999 13L9.2 13L6.6 15.6Z" fill="black"/>
+<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z" fill="#0D0C0F"/>
+</g>
+<defs>
+<clipPath id="clip0_2848_38">
+<rect width="24" height="24" fill="white" transform="translate(0 24) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/build/svg/system/whisper.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z" fill="#0D0C0F"/>
+<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z" fill="#0D0C0F"/>
+</svg>

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