@dialpad/dialtone-css 8.57.0 → 8.57.2

package/lib/build/less/components/description-list.less

@@ -3,8 +3,7 @@
   flex-flow: row wrap;
   gap: var(--description-list-gap);
   align-items: flex-start;
-  font-size: var(--dt-font-size-100);
-  line-height: var(--dt-font-line-height-300);
+  font: var(--dt-typography-body-sm);
 
   --description-list-gap: var(--dt-space-400);
   each(range(0, 600, 100), {
@@ -20,6 +19,7 @@
   &__term {
     flex: 0 1 40%;
     color: var(--dt-color-foreground-tertiary);
+    font: var(--dt-typography-label-sm);
   }
 
   &__description {

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

@@ -49,6 +49,7 @@
     border: var(--popover-border-width) solid var(--popover-color-border);
     border-radius: var(--popover-border-radius);
     box-shadow: var(--popover-shadow);
+    visibility: visible;
 
     // to be set on the dialog when it is modal
     &--modal {
@@ -101,3 +102,9 @@
     border-top: var(--popover-border-width) solid var(--popover-color-border);
   }
 }
+
+.tippy-box[data-popper-reference-hidden] {
+  .d-popover__dialog {
+    visibility: hidden;
+  }
+}

package/lib/build/less/dialtone-reset.less

@@ -186,6 +186,7 @@ optgroup,
 select,
 textarea {
   margin: 0; /* 2 */
+  color: inherit;
   font-size: 100%; /* 1 */
   font-family: inherit; /* 1 */
   line-height: 1.15; /* 1 */
@@ -282,6 +283,7 @@ progress {
 
 textarea {
   overflow: auto;
+  color: inherit;
 }
 
 /**

package/lib/build/less/recipes/ivr_node.less

@@ -103,7 +103,7 @@
   width: var(--dt-size-550);
   height: var(--dt-size-550);
   margin-bottom: var(--dt-space-450-negative);
-  color: var(--dt-color-neutral-white);
+  color: var(--dt-color-foreground-primary-inverted);
   font-size: var(--dt-font-size-200);
 
   .d-recipe-ivr-node__connector--selected {

package/lib/build/less/utilities/sizing.less

@@ -71,12 +71,21 @@
 .d-h100vh { height: 100vh !important; }
 .d-h-auto { height: auto !important; }
 .d-h-unset { height: unset !important; }
+.d-h-fit-content { height: fit-content !important; }
+.d-h-max-content { height: max-content !important; }
+.d-h-min-content { height: min-content !important; }
 
 .d-hmn-auto { min-height: auto !important; }
 .d-hmn-unset { min-height: unset !important; }
+.d-hmn-fit-content { min-height: fit-content !important; }
+.d-hmn-max-content { min-height: max-content !important; }
+.d-hmn-min-content { min-height: min-content !important; }
 
 .d-hmx-auto { max-height: auto !important; }
 .d-hmx-unset { max-height: unset !important; }
+.d-hmx-fit-content { max-height: fit-content !important; }
+.d-hmx-max-content { max-height: max-content !important; }
+.d-hmx-min-content { max-height: min-content !important; }
 
 
 //  ============================================================================

package/lib/dist/dialtone-default-theme.css

@@ -163,6 +163,7 @@ select,
 textarea {
   margin: 0;
   /* 2 */
+  color: inherit;
   font-size: 100%;
   /* 1 */
   font-family: inherit;
@@ -251,6 +252,7 @@ progress {
  */
 textarea {
   overflow: auto;
+  color: inherit;
 }
 /**
  * 1. Add the correct box sizing in IE 10.
@@ -2335,8 +2337,7 @@ template {
   flex-flow: row wrap;
   gap: var(--description-list-gap);
   align-items: flex-start;
-  font-size: var(--dt-font-size-100);
-  line-height: var(--dt-font-line-height-300);
+  font: var(--dt-typography-body-sm);
   --description-list-gap: var(--dt-space-400);
 }
 .d-description-list--gap-0 {
@@ -2366,6 +2367,7 @@ template {
 .d-description-list__term {
   flex: 0 1 40%;
   color: var(--dt-color-foreground-tertiary);
+  font: var(--dt-typography-label-sm);
 }
 .d-description-list__description {
   flex: 1 1 50%;
@@ -3898,6 +3900,7 @@ legend .d-label--md {
   border: var(--popover-border-width) solid var(--popover-color-border);
   border-radius: var(--popover-border-radius);
   box-shadow: var(--popover-shadow);
+  visibility: visible;
 }
 .d-popover__dialog,
 .d-popover__dialog *,
@@ -3944,6 +3947,9 @@ legend .d-label--md {
   grid-row: 3;
   border-top: var(--popover-border-width) solid var(--popover-color-border);
 }
+.tippy-box[data-popper-reference-hidden] .d-popover__dialog {
+  visibility: hidden;
+}
 .d-checkbox,
 .d-radio {
   --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
@@ -7502,18 +7508,57 @@ legend .d-label--md {
 .d-h-unset {
   height: unset !important;
 }
+.d-h-fit-content {
+  height: -webkit-fit-content !important;
+  height: -moz-fit-content !important;
+  height: fit-content !important;
+}
+.d-h-max-content {
+  height: -webkit-max-content !important;
+  height: max-content !important;
+}
+.d-h-min-content {
+  height: -webkit-min-content !important;
+  height: min-content !important;
+}
 .d-hmn-auto {
   min-height: auto !important;
 }
 .d-hmn-unset {
   min-height: unset !important;
 }
+.d-hmn-fit-content {
+  min-height: -webkit-fit-content !important;
+  min-height: -moz-fit-content !important;
+  min-height: fit-content !important;
+}
+.d-hmn-max-content {
+  min-height: -webkit-max-content !important;
+  min-height: max-content !important;
+}
+.d-hmn-min-content {
+  min-height: -webkit-min-content !important;
+  min-height: min-content !important;
+}
 .d-hmx-auto {
   max-height: auto !important;
 }
 .d-hmx-unset {
   max-height: unset !important;
 }
+.d-hmx-fit-content {
+  max-height: -webkit-fit-content !important;
+  max-height: -moz-fit-content !important;
+  max-height: fit-content !important;
+}
+.d-hmx-max-content {
+  max-height: -webkit-max-content !important;
+  max-height: max-content !important;
+}
+.d-hmx-min-content {
+  max-height: -webkit-min-content !important;
+  max-height: min-content !important;
+}
 .d-w10p {
   width: 10% !important;
 }
@@ -9221,7 +9266,7 @@ ul {
   width: var(--dt-size-550);
   height: var(--dt-size-550);
   margin-bottom: var(--dt-space-450-negative);
-  color: var(--dt-color-neutral-white);
+  color: var(--dt-color-foreground-primary-inverted);
   font-size: var(--dt-font-size-200);
 }
 .d-recipe-ivr-node__connector-dtmf .d-recipe-ivr-node__connector--selected {
@@ -10023,6 +10068,7 @@ body {
   --dt-color-brand-purple-hsl: var(--dt-color-brand-purple-h) var(--dt-color-brand-purple-s) var(--dt-color-brand-purple-l);
   --dt-color-brand-purple-hsla: hsl(var(--dt-color-brand-purple-h) var(--dt-color-brand-purple-s) var(--dt-color-brand-purple-l) / var(--alpha, 100%));
   --dt-color-brand-purple: #7C52FF; /* Primary brand color. */
+  --dt-color-gradient-gold-red-magenta-purple: linear-gradient(135deg, #471571 0%, #551B84 3.08%, #7C229E 14.48%, #9024A4 23.67%, #B02290 35.5%, #D32B86 48.3%, #E92F6F 60.29%, #F6484F 70.08%, #FB7328 90.02%, #F3960F 97.29%, #F3960F 100%); /* Gradient for Ai-oriented treatments. */
   --dt-color-indigo-1000-h: 203.2258064516129;
   --dt-color-indigo-1000-s: 100%;
   --dt-color-indigo-1000-l: 6.078431372549019%;
@@ -11438,7 +11484,6 @@ body {
   --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
   --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
   --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
-  --dt-color-gradient-gold-red-magenta-purple: linear-gradient(140deg, #FF5E2F 0%, var(--dt-color-brand-red) 25%, var(--dt-color-brand-magenta) 66%, #9D42EA 100%); /* Gradient for Ai-oriented treatments. */
   --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
   --dt-size-base: calc(1rem * 0.8);
   --dt-font-family-expressive: "Season Mix", var(--dt-font-family-body);
@@ -32260,6 +32305,7 @@ body {
   --dt-badge-color-foreground-default-hsl: var(--dt-color-black-1000-hsl);
   --dt-badge-color-foreground-default-hsla: var(--dt-color-black-1000-hsla);
   --dt-badge-color-foreground-default: var(--dt-color-black-1000);
+  --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-badge-color-background-bulletin-subtle-h: var(--dt-color-purple-200-h);
   --dt-badge-color-background-bulletin-subtle-s: var(--dt-color-purple-200-s);
   --dt-badge-color-background-bulletin-subtle-l: var(--dt-color-purple-200-l);
@@ -32649,6 +32695,7 @@ body {
   --dt-color-border-accent-hsl: var(--dt-color-brand-magenta-hsl);
   --dt-color-border-accent-hsla: var(--dt-color-brand-magenta-hsla);
   --dt-color-border-accent: var(--dt-color-brand-magenta);
+  --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-color-border-focus-h: var(--dt-color-blue-425-h);
   --dt-color-border-focus-s: var(--dt-color-blue-425-s);
   --dt-color-border-focus-l: var(--dt-color-blue-425-l);
@@ -32880,6 +32927,7 @@ body {
   --dt-color-border-subtle-hsl: var(--dt-color-border-subtle-h) var(--dt-color-border-subtle-s) var(--dt-color-border-subtle-l);
   --dt-color-border-subtle-hsla: hsl(var(--dt-color-border-subtle-h) var(--dt-color-border-subtle-s) var(--dt-color-border-subtle-l) / var(--alpha, 11%));
   --dt-color-border-subtle: hsl(0 0% 11% / 0.11);
+  --dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-color-surface-backdrop-h: 0;
   --dt-color-surface-backdrop-s: 0%;
   --dt-color-surface-backdrop-l: 0%;
@@ -33694,7 +33742,6 @@ body {
   --dt-badge-color-border-default-hsl: var(--dt-color-border-subtle-hsl);
   --dt-badge-color-border-default-hsla: var(--dt-color-border-subtle-hsla);
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
-  --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-badge-color-background-bulletin-h: var(--dt-color-surface-brand-strong-h);
   --dt-badge-color-background-bulletin-s: var(--dt-color-surface-brand-strong-s);
   --dt-badge-color-background-bulletin-l: var(--dt-color-surface-brand-strong-l);
@@ -34192,8 +34239,6 @@ body {
   --dt-typography-body-sm-font-size: var(--dt-font-size-100); /* Reduced small text style for less prominent or adjacent content. */
   --dt-typography-body-md-compact-font-size: var(--dt-font-size-200); /* A tighter-spaced version of medium body style. */
   --dt-typography-body-md-font-size: var(--dt-font-size-200); /* Base default medium text style for main content. */
-  --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
-  --dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
   --dt-color-surface-primary-opaque-inverted-h: 0;
   --dt-color-surface-primary-opaque-inverted-s: 0%;
   --dt-color-surface-primary-opaque-inverted-l: 0%;