@dialpad/dialtone 6.25.0 → 6.27.0

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

@@ -219,6 +219,18 @@
     padding: calc(var(--su8) + var(--su1));
     transition-duration: 150ms;
 
+    &:hover {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+    }
+
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
@@ -291,14 +303,16 @@
 .d-btn--muted {
     --button--fc: var(--muted-color);
 
-    &:hover,
-    &:active {
-      --button--fc: var(--muted-color-hover);
-      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    &:hover {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
     }
 
-    &:active {
-      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {

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

@@ -214,6 +214,17 @@
   }
 }
 
+// $$   SCROLLABLE
+//  ----------------------------------------------------------------------------
+.d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+
+  .d-modal__content {
+    overflow-y: auto;
+  }
+}
+
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {

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

@@ -71,8 +71,8 @@
 #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-fc-yellow { &:extend(.d-fc-yellow-600); }
+.d-fc-warning { color: var(--fc-warning) }
 #d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
 #d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 

package/lib/build/svg/system/fire.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="M13.5 1C13.5 1 14.24 3.65 14.24 5.8C14.24 7.86 12.89 9.53 10.83 9.53C8.76 9.53 7.2 7.86 7.2 5.8L7.23 5.44C5.21 7.84 4 10.95 4 14.33C4 18.75 7.58 22.33 12 22.33C16.42 22.33 20 18.75 20 14.33C20 8.94 17.41 4.13 13.5 1ZM11.71 19.33C9.93 19.33 8.49 17.93 8.49 16.19C8.49 14.57 9.54 13.43 11.3 13.07C13.07 12.71 14.9 11.86 15.92 10.49C16.31 11.78 16.51 13.14 16.51 14.53C16.51 17.18 14.36 19.33 11.71 19.33Z" fill="#0D0C0F"/></svg>

package/lib/build/svg/system/snooze.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="M21.5 17H11V14.6402L17.8549 7.51046H11V5H21.5V7.46025L14.7539 14.4895H21.5V17Z" fill="#0D0C0F"/><path d="M9.5 20H2V18.2301L6.89637 12.8828H2V11H9.5V12.8452L4.68135 18.1172H9.5V20Z" fill="#0D0C0F"/></svg>

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

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V12H20V5H4V17H16.5856L14.2928 14.7072L15.707 13.293L20.4141 18.0001L15.707 22.7072L14.2928 21.293L16.5858 19H4C2.89543 19 2 18.1046 2 17V5Z" fill="black"/>
+<path d="M6 9H18V7H6V9Z" fill="black"/>
+<path d="M14.5 12H6V10H14.5V12Z" fill="black"/>
+<path d="M6 15H11V13H6V15Z" fill="black"/>
+</svg>

package/lib/dist/css/dialtone.css

@@ -813,6 +813,16 @@ body {
   padding: calc(var(--su8) + var(--su1));
   transition-duration: 150ms;
 }
+.d-btn--circle:hover {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+}
+.d-btn--circle:active,
+.d-btn--circle.d-btn--active,
+.d-btn--circle.d-btn--active:active {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+}
 .d-btn--circle.focus-visible {
   box-shadow: var(--bs-focus-ring-circle);
 }
@@ -864,12 +874,14 @@ body {
 .d-btn--muted {
   --button--fc: var(--muted-color);
 }
-.d-btn--muted:hover,
-.d-btn--muted:active {
+.d-btn--muted:hover {
   --button--fc: var(--muted-color-hover);
   --button--bgc: hsla(var(--black-800-hsl)  /  3%);
 }
-.d-btn--muted:active {
+.d-btn--muted:active,
+.d-btn--muted.d-btn--active,
+.d-btn--muted.d-btn--active:active {
+  --button--fc: var(--muted-color-hover);
   --button--bgc: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-btn--muted.focus-visible {
@@ -1746,6 +1758,13 @@ legend .d-label {
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+}
+.d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -9475,15 +9494,10 @@ body.theme-dark .d\:d-bgc-pink-100 {
 .h\:d-fc-yellow-600:hover,
 .f\:d-fc-yellow-600:focus,
 .d-fc-yellow,
-.d-fc-warning,
 .h\:d-fc-yellow:hover,
 .f\:d-fc-yellow:focus,
 .f\:d-fc-yellow:focus-within,
-.fv\:d-fc-yellow.focus-visible,
-.h\:d-fc-warning:hover,
-.f\:d-fc-warning:focus,
-.f\:d-fc-warning:focus-within,
-.fv\:d-fc-warning.focus-visible {
+.fv\:d-fc-yellow.focus-visible {
   --fco: 100%;
   color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l)  /  var(--fco)) !important;
 }
@@ -9491,15 +9505,10 @@ body.theme-dark .d\:d-bgc-pink-100 {
 .h\:d-fc-yellow-600:hover,
 .f\:d-fc-yellow-600:focus,
 .d-fc-yellow,
-.d-fc-warning,
 .h\:d-fc-yellow:hover,
 .f\:d-fc-yellow:focus,
 .f\:d-fc-yellow:focus-within,
-.fv\:d-fc-yellow:focus-visible,
-.h\:d-fc-warning:hover,
-.f\:d-fc-warning:focus,
-.f\:d-fc-warning:focus-within,
-.fv\:d-fc-warning:focus-visible {
+.fv\:d-fc-yellow:focus-visible {
   --fco: 100%;
   color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l)  /  var(--fco)) !important;
 }
@@ -12721,6 +12730,24 @@ body.theme-dark .d\:d-bgc-red-700 {
 .fv\:d-fc-primary:focus-visible {
   color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
 }
+.d-fc-warning {
+  color: var(--fc-warning);
+}
+.h\:d-fc-warning:hover {
+  color: var(--fc-warning);
+}
+.f\:d-fc-warning:focus {
+  color: var(--fc-warning);
+}
+.f\:d-fc-warning:focus-within {
+  color: var(--fc-warning);
+}
+.fv\:d-fc-warning.focus-visible {
+  color: var(--fc-warning);
+}
+.fv\:d-fc-warning:focus-visible {
+  color: var(--fc-warning);
+}
 .d-fc-current {
   color: currentColor !important;
 }
@@ -20201,6 +20228,13 @@ body.theme-dark {
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.sm\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+}
+.sm\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .sm\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -20854,6 +20888,39 @@ body.theme-dark {
 .sm\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.sm\:d-w100p {
+  width: 100% !important;
+}
+.sm\:d-w100vw {
+  width: 100vw !important;
+}
+.sm\:d-jc-center {
+  justify-content: center !important;
+}
+.sm\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.sm\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.sm\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.sm\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.sm\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.sm\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.sm\:d-jc-normal {
+  justify-content: normal !important;
+}
+.sm\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 640px) {
 .md\:d-description {
@@ -21337,6 +21404,13 @@ body.theme-dark {
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.md\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+}
+.md\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .md\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -21990,6 +22064,39 @@ body.theme-dark {
 .md\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.md\:d-w100p {
+  width: 100% !important;
+}
+.md\:d-w100vw {
+  width: 100vw !important;
+}
+.md\:d-jc-center {
+  justify-content: center !important;
+}
+.md\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.md\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.md\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.md\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.md\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.md\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.md\:d-jc-normal {
+  justify-content: normal !important;
+}
+.md\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 980px) {
 .lg\:d-description {
@@ -22473,6 +22580,13 @@ body.theme-dark {
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.lg\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+}
+.lg\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .lg\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -23126,6 +23240,39 @@ body.theme-dark {
 .lg\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.lg\:d-w100p {
+  width: 100% !important;
+}
+.lg\:d-w100vw {
+  width: 100vw !important;
+}
+.lg\:d-jc-center {
+  justify-content: center !important;
+}
+.lg\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.lg\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.lg\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.lg\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.lg\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.lg\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.lg\:d-jc-normal {
+  justify-content: normal !important;
+}
+.lg\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 1264px) {
 .xl\:d-description {
@@ -23609,6 +23756,13 @@ body.theme-dark {
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.xl\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+}
+.xl\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .xl\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -24262,4 +24416,37 @@ body.theme-dark {
 .xl\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.xl\:d-w100p {
+  width: 100% !important;
+}
+.xl\:d-w100vw {
+  width: 100vw !important;
+}
+.xl\:d-jc-center {
+  justify-content: center !important;
+}
+.xl\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.xl\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.xl\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.xl\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.xl\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.xl\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.xl\:d-jc-normal {
+  justify-content: normal !important;
+}
+.xl\:d-jc-unset {
+  justify-content: unset !important;
+}
 }