@dialpad/dialtone-css 8.56.0 → 8.57.1

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

@@ -127,6 +127,23 @@
   }
 }
 
+.d-btn--unstyled {
+  /* stylelint-disable */
+  all: unset; // Must be first!
+  /* stylelint-enable */
+  display: inline-flex;
+  align-content: center;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--dt-shadow-focus);
+  }
+}
+
 //  ============================================================================
 //  $   SIZES
 //  ----------------------------------------------------------------------------

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/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.
@@ -1509,6 +1511,21 @@ template {
   cursor: not-allowed;
   transition: none;
 }
+.d-btn--unstyled {
+  /* stylelint-disable */
+  all: unset;
+  /* stylelint-enable */
+  display: inline-flex;
+  align-content: center;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.d-btn--unstyled:focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
+}
 .d-btn--xs {
   --button-typography: var(--dt-typography-button-xs);
   --button-padding-y: var(--button-padding-y-xs);
@@ -2320,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 {
@@ -2351,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%;
@@ -7487,18 +7504,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;
 }
@@ -9206,7 +9262,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 {
@@ -10008,6 +10064,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%;
@@ -11423,7 +11480,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);
@@ -32245,6 +32301,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);
@@ -32634,6 +32691,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);
@@ -32865,6 +32923,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%;
@@ -33679,7 +33738,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);
@@ -34177,8 +34235,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%;