@dialpad/dialtone-css 8.67.0 → 8.68.0

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

@@ -592,7 +592,7 @@
 
   &:hover:not([disabled]),
   &:active:not([disabled]) {
-    --button-color-text: hsla(var(--dt-color-neutral-white-hsl) ~" / " 90%);
+    --button-color-text: hsl(var(--dt-color-neutral-white-hsl) ~" / " 90%);
     --button-color-background: hsl(
       var(--brand-color-h) calc(var(--brand-color-s) + 2.5%)
         calc(var(--brand-color-l) - 5%)
@@ -603,7 +603,7 @@
     box-shadow:
       0 0 0 var(--dt-space-100) var(--dt-color-neutral-white),
       0 0 0 0.25em
-        hsla(
+        hsl(
           var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~" / " 90%
         );
   }

package/lib/build/less/components/forms.less

@@ -39,7 +39,6 @@ fieldset {
   margin-bottom: var(--dt-space-300);
   color: var(--dt-color-foreground-secondary);
   font: var(--dt-typography-label-md);
-  word-break: break-word;
   overflow-wrap: break-word;
 
   legend & { cursor: default; }

package/lib/build/less/components/image-viewer.less

@@ -31,5 +31,5 @@
 .d-image-viewer__close-button {
   --fco: 100%;
 
-  color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
+  color: hsl(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
 }

package/lib/build/less/components/keyboard-shortcut.less

@@ -38,7 +38,6 @@
     height: 1px;
     overflow: hidden;
     white-space: nowrap;
-    clip: rect(0 0 0 0);
     clip-path: inset(50%);
   }
 

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

@@ -33,7 +33,7 @@
 
     &:hover {
         color: var(--dt-color-foreground-primary);
-        background-color: hsla(var(--dt-color-purple-400-hsl) ~' / ' 85%);
+        background-color: hsl(var(--dt-color-purple-400-hsl) ~' / ' 85%);
     }
 
     &-selected {

package/lib/build/less/components/pagination.less

@@ -15,7 +15,7 @@
 .d-pagination {
   display: flex;
   flex-direction: row;
-  grid-gap: var(--dt-space-300);
+  gap: var(--dt-space-300);
   align-items: center;
 }
 

package/lib/build/less/components/radio-checkbox.less

@@ -121,7 +121,6 @@
         font-size: var(--dt-font-size-200);
         font-family: inherit;
         line-height: var(--dt-font-line-height-300);
-        word-break: break-word;
         overflow-wrap: break-word;
     }
 }

package/lib/build/less/components/rich-text-editor.less

@@ -73,6 +73,7 @@
 .d-mention-suggestion__container {
   width: 100%;
 }
+
 .d-mention-suggestion__details-container {
   width: 90%;
 }
@@ -83,11 +84,11 @@
 }
 
 .d-mention-suggestion__status {
+  margin-left: var(--dt-space-100);
   overflow: hidden;
+  color: var(--dt-color-foreground-tertiary);
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--dt-color-foreground-tertiary);
-  margin-left: var(--dt-space-100);
 }
 
 .d-mention-suggestion__divider {

package/lib/build/less/components/table.less

@@ -112,7 +112,7 @@
     &.d-table--inverted {
         // Row Styles
         tr:nth-child(even) {
-            background-color: hsla(var(--bgc-primary-hsl) / 0.1);
+            background-color: hsl(var(--bgc-primary-hsl) / 0.1);
         }
     }
 }

package/lib/build/less/components/toast.less

@@ -126,7 +126,7 @@
 .d-toast-alternate {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --toast-alternate-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
+  --toast-alternate-color-shadow: hsl(var(--dt-color-black-900-hsl) / 0.15);
   --toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
   --toast-alternate-color-background: var(--dt-color-surface-primary);
   --toast-alternate-color-text: var(--dt-color-foreground-primary);

package/lib/build/less/dialtone.less

@@ -89,6 +89,7 @@
 @import 'recipes/ivr_node';
 @import 'recipes/leftbar_row';
 @import 'recipes/message_input';
+@import 'recipes/motion_text';
 @import 'recipes/settings_menu_button';
 @import 'recipes/time_pill';
 @import 'recipes/top_banner_info';

package/lib/build/less/recipes/motion_text.less

@@ -0,0 +1,277 @@
+//
+//  DIALTONE
+//  RECIPES: MOTION TEXT
+//
+//  TABLE OF CONTENTS
+//  • CSS CUSTOM PROPERTIES
+//  • BASE STYLE
+//  • CHILD ELEMENTS
+//  • ANIMATION KEYFRAMES
+//  • TRANSITION CLASSES - GRADIENT IN
+//  • TRANSITION CLASSES - FADE IN
+//  • TRANSITION CLASSES - SLIDE IN
+//  • GRADIENT SWEEP & SHIMMER
+//  • MODIFIERS
+//  • ACCESSIBILITY
+//
+//  ============================================================================
+//  $   CSS CUSTOM PROPERTIES
+//  ----------------------------------------------------------------------------
+@property --dt-recipe-motion-text-mask-pos {
+  inherits: true;
+  initial-value: 0%;
+  syntax: '<percentage>';
+}
+
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text {
+  /* Theme variables - can be overridden by design system */
+  --dt-recipe-motion-text-duration: 1000ms;
+  --dt-recipe-motion-text-char-duration: var(--dt-recipe-motion-text-duration);
+  --dt-recipe-motion-text-word-duration: calc(var(--dt-recipe-motion-text-duration) * 2);
+  --dt-recipe-motion-text-highlight-color: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 80%, var(--dt-color-brand-gold) 100%);
+  --dt-recipe-motion-text-gradient: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 20%,
+    black 40%,
+    black 60%,
+    transparent 80%,
+    transparent 100%
+  ) 0% 0% / 500% 100%;
+  --dt-recipe-motion-text-shimmer-gradient: linear-gradient(
+    90deg,
+    black 0%,
+    black 20%,
+    #0005 40%,
+    #0005 60%,
+    black 80%,
+    black 100%
+  ) 0% 0% / 500% 100%;
+
+  position: relative;
+}
+
+//  ============================================================================
+//  $   CHILD ELEMENTS
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.dt-recipe-motion-text__content {
+  display: contents;
+}
+
+.dt-recipe-motion-text__fallback {
+  display: contents;
+}
+
+.dt-recipe-motion-text__char {
+  display: inline-block;
+  white-space: pre;
+}
+
+.dt-recipe-motion-text__word {
+  position: relative;
+  display: inline;
+  white-space: nowrap;
+}
+
+//  ============================================================================
+//  $   ANIMATION KEYFRAMES
+//  ----------------------------------------------------------------------------
+
+// Gradient-in mode animations
+@keyframes dt-recipe-motion-text-gradient-in-char-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dt-recipe-motion-text-gradient-in-word-reveal {
+  from {
+    --dt-recipe-motion-text-mask-pos: 100%;
+  }
+
+  to {
+    --dt-recipe-motion-text-mask-pos: 0%;
+  }
+}
+
+// Fade-in mode animations
+@keyframes dt-recipe-motion-text-fade-in-char-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dt-recipe-motion-text-fade-in-word-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Slide-in mode animations
+@keyframes dt-recipe-motion-text-slide-in-char-appear {
+  from {
+    transform: translateY(0.3em);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes dt-recipe-motion-text-slide-in-word-appear {
+  from {
+    transform: translateY(0.5em);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - GRADIENT IN
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text-char-gradient-in-enter-active {
+  animation: dt-recipe-motion-text-gradient-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-in-out);
+}
+
+.dt-recipe-motion-text-char-gradient-in-leave-active {
+  animation: dt-recipe-motion-text-gradient-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.dt-recipe-motion-text-word-gradient-in-enter-active {
+  animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-out-quint);
+}
+
+.dt-recipe-motion-text-word-gradient-in-leave-active {
+  animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - FADE IN
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text-char-fade-in-enter-active {
+  animation: dt-recipe-motion-text-fade-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+}
+
+.dt-recipe-motion-text-char-fade-in-leave-active {
+  animation: dt-recipe-motion-text-fade-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.dt-recipe-motion-text-word-fade-in-enter-active {
+  animation: dt-recipe-motion-text-fade-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+}
+
+.dt-recipe-motion-text-word-fade-in-leave-active {
+  animation: dt-recipe-motion-text-fade-in-word-appear calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - SLIDE IN
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text-char-slide-in-enter-active {
+  animation: dt-recipe-motion-text-slide-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+}
+
+.dt-recipe-motion-text-char-slide-in-leave-active {
+  animation: dt-recipe-motion-text-slide-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.dt-recipe-motion-text-word-slide-in-enter-active {
+  animation: dt-recipe-motion-text-slide-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+}
+
+.dt-recipe-motion-text-word-slide-in-leave-active {
+  animation: dt-recipe-motion-text-slide-in-word-appear calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   GRADIENT SWEEP & SHIMMER
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text--gradient-sweep,
+.dt-recipe-motion-text--shimmer {
+  position: relative;
+  display: inline-block;
+  animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-in-out) 1;
+}
+
+.dt-recipe-motion-text--gradient-in .dt-recipe-motion-text__word::before,
+.dt-recipe-motion-text--gradient-sweep::before {
+  position: absolute;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  background: var(--dt-recipe-motion-text-highlight-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  content: attr(data-text-content);
+  pointer-events: none;
+  -webkit-text-fill-color: transparent;
+  mask: var(--dt-recipe-motion-text-gradient);
+  mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+}
+
+.dt-recipe-motion-text--shimmer {
+  content: attr(data-text-content);
+  mask: var(--dt-recipe-motion-text-shimmer-gradient);
+  mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+}
+
+//  ============================================================================
+//  $   MODIFIERS
+//  ----------------------------------------------------------------------------
+.dt-recipe-motion-text--none .dt-recipe-motion-text__word,
+.dt-recipe-motion-text--none .dt-recipe-motion-text__char {
+  transform: none;
+  opacity: 1;
+}
+
+.dt-recipe-motion-text--paused {
+  animation-play-state: paused !important;
+}
+
+.dt-recipe-motion-text--looped {
+  animation-iteration-count: infinite !important;
+}
+
+//  ============================================================================
+//  $   ACCESSIBILITY
+//  ----------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .dt-recipe-motion-text {
+    --dt-recipe-motion-text-duration: 0ms;
+    --dt-recipe-motion-text-char-duration: 0ms;
+    --dt-recipe-motion-text-word-duration: 0ms;
+
+    transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+  }
+}

package/lib/build/less/recipes/settings_menu_button.less

@@ -19,12 +19,12 @@
 .d-recipe-settings-menu-button-update {
   height: var(--dt-size-600);
   color: var(--dt-color-blue-500);
-  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
-  border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
+  background-color: hsl(var(--dt-color-blue-200-hsl) / 0.25);
+  border-color: hsl(var(--dt-color-blue-200-hsl) / 0.25);
   border-radius: var(--dt-size-radius-pill);
 
   &:hover {
     color: var(--dt-shell-action-color-foreground-primary-hover);
-    background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
+    background-color: hsl(var(--dt-color-blue-200-hsl) / 0.5);
   }
 }

package/lib/build/less/utilities/flex.less

@@ -150,9 +150,7 @@
 //  $$$  FLEX EQUAL
 //       Equally distributes children out within a parent container
 .d-fl-equal {
-  flex-basis: 0 !important;
-  flex-grow: 1 !important;
-  flex-shrink: 1 !important;
+  flex: 1 1 0 !important;
 }
 
 //  $$  FLEX GROW

package/lib/build/less/utilities/grid.less

@@ -40,9 +40,9 @@
 //      each defined spacing unit.
 //      TODO: Deprecated classes, remove on our next migration. https://dialpad.atlassian.net/browse/DLT-1763
 //  ----------------------------------------------------------------------------
-.d-gcg-unset { grid-column-gap: unset !important; }
-.d-grg-unset { grid-row-gap: unset !important; }
-.d-gg-unset { grid-gap: unset !important; }
+.d-gcg-unset { column-gap: unset !important; }
+.d-grg-unset { row-gap: unset !important; }
+.d-gg-unset { gap: unset !important; }
 
 
 //  ============================================================================
@@ -96,11 +96,11 @@
 }
 
 .d-gl-header {
+    grid-auto-rows: 1fr;
+    grid-auto-columns: minmax(min-content, auto);
     grid-template-areas: 'header'
                          'content';
     grid-template-rows: [header-start] var(--header-height) [header-end content-start] var(--content-height) [content-end];
-    grid-auto-rows: 1fr;
-    grid-auto-columns: minmax(min-content, auto);
 }
 
 //  $   GRID AREAS

package/lib/build/less/utilities/layout.less

@@ -120,9 +120,8 @@
   margin: var(--dt-space-100-negative);
   padding: var(--dt-space-0);
   overflow: hidden;
-  word-wrap: normal;
+  overflow-wrap: normal;
   border: none;
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
 }
 

package/lib/build/less/utilities/typography.less

@@ -407,7 +407,6 @@ ul {
   &-unset {
     display: initial !important;
     overflow: initial !important;
-    -webkit-box-orient: initial !important;
     -webkit-line-clamp: initial !important;
   }
 }
@@ -461,18 +460,18 @@ ul {
 //  ----------------------------------------------------------------------------
 .d-wb-normal { word-break: normal !important; }
 .d-wb-break-all { word-break: break-all !important; }
-.d-wb-break-word { word-break: break-word !important; }
+.d-wb-break-word { overflow-wrap: break-word !important; }
 .d-wb-keep-all { word-break: keep-all !important; }
 .d-wb-unset { word-break: unset !important; }
 
 //  ============================================================================
 //  $$  WORD WRAP
 //  ----------------------------------------------------------------------------
-.d-ww-normal { word-wrap: normal !important; }
-.d-ww-break-word { word-wrap: break-word !important; }
-.d-ww-anywhere { word-wrap: anywhere !important; }
-.d-ww-initial { word-wrap: initial !important; }
-.d-ww-inherit { word-wrap: inherit !important; }
+.d-ww-normal { overflow-wrap: normal !important; }
+.d-ww-break-word { overflow-wrap: break-word !important; }
+.d-ww-anywhere { overflow-wrap: anywhere !important; }
+.d-ww-initial { overflow-wrap: initial !important; }
+.d-ww-inherit { overflow-wrap: inherit !important; }
 
 
 // Unsure what to do with this