@dialpad/dialtone-css 8.75.0 → 8.75.1

package/lib/build/less/components/motion_text.less

@@ -0,0 +1,296 @@
+//
+//  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 IN
+//  • GRADIENT SWEEP & SHIMMER
+//  • MODIFIERS
+//  • ACCESSIBILITY
+//
+//  ============================================================================
+//  $   CSS CUSTOM PROPERTIES
+//  ----------------------------------------------------------------------------
+@property --d-motion-text-mask-pos {
+  inherits: true;
+  initial-value: 0%;
+  syntax: '<percentage>';
+}
+
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-motion-text {
+  /* Theme variables - can be overridden by design system */
+  --d-motion-text-duration: 1000ms;
+  --d-motion-text-char-duration: var(--d-motion-text-duration);
+  --d-motion-text-word-duration: calc(var(--d-motion-text-duration) * 2);
+  --d-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%);
+  --d-motion-text-gradient: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 20%,
+    black 40%,
+    black 60%,
+    transparent 80%,
+    transparent 100%
+  ) 0% 0% / 500% 100%;
+  --d-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
+//  ----------------------------------------------------------------------------
+.d-motion-text__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.d-motion-text__content {
+  display: contents;
+}
+
+.d-motion-text__fallback {
+  display: contents;
+}
+
+.d-motion-text__char {
+  display: inline;
+  white-space: pre;
+}
+
+.d-motion-text__word {
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+//  ============================================================================
+//  $   ANIMATION KEYFRAMES
+//  ----------------------------------------------------------------------------
+
+// Gradient-in mode animations
+@keyframes d-motion-text-gradient-in-char-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes d-motion-text-gradient-in-char-reveal {
+  from {
+    color: var(--dt-color-neutral-transparent);
+  }
+
+  to {
+    color: inherit;
+  }
+}
+
+@keyframes d-motion-text-gradient-in-word-reveal {
+  from {
+    --d-motion-text-mask-pos: 100%;
+  }
+
+  to {
+    --d-motion-text-mask-pos: 0%;
+  }
+}
+
+// Fade-in mode animations
+@keyframes d-motion-text-fade-in-char-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes d-motion-text-fade-in-word-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Slide-in mode animations
+@keyframes d-motion-text-slide-in-char-appear {
+  from {
+    transform: translateY(0.3em);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes d-motion-text-slide-in-word-appear {
+  from {
+    transform: translateY(0.5em);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - GRADIENT IN
+//  ----------------------------------------------------------------------------
+.d-motion-text-char-gradient-in-enter-active {
+  animation: d-motion-text-gradient-in-char-appear var(--d-motion-text-char-duration) var(--ttf-in-out);
+}
+
+.d-motion-text-char-gradient-in-leave-active {
+  animation: d-motion-text-gradient-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.d-motion-text-word-gradient-in-enter-active {
+  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 1.5) var(--ttf-out-quint);
+}
+
+.d-motion-text-word-gradient-in-leave-active {
+  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - FADE IN
+//  ----------------------------------------------------------------------------
+.d-motion-text-char-fade-in-enter-active {
+  animation: d-motion-text-fade-in-char-appear var(--d-motion-text-char-duration) var(--ttf-out-quint);
+}
+
+.d-motion-text-char-fade-in-leave-active {
+  animation: d-motion-text-fade-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.d-motion-text-word-fade-in-enter-active {
+  animation: d-motion-text-fade-in-word-appear var(--d-motion-text-word-duration) var(--ttf-out-quint);
+}
+
+.d-motion-text-word-fade-in-leave-active {
+  animation: d-motion-text-fade-in-word-appear calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   TRANSITION CLASSES - SLIDE IN
+//  ----------------------------------------------------------------------------
+.d-motion-text-char-slide-in-enter-active {
+  animation: d-motion-text-slide-in-char-appear var(--d-motion-text-char-duration) var(--ttf-out-quint);
+}
+
+.d-motion-text-char-slide-in-leave-active {
+  animation: d-motion-text-slide-in-char-appear calc(var(--d-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+.d-motion-text-word-slide-in-enter-active {
+  animation: d-motion-text-slide-in-word-appear var(--d-motion-text-word-duration) var(--ttf-out-quint);
+}
+
+.d-motion-text-word-slide-in-leave-active {
+  animation: d-motion-text-slide-in-word-appear calc(var(--d-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+
+//  ============================================================================
+//  $   GRADIENT IN
+//  ----------------------------------------------------------------------------
+//  Delay reveal of character text color to prevent a flash on the first letter
+.d-motion-text--gradient-in .d-motion-text__char {
+  animation: d-motion-text-gradient-in-char-reveal var(--d-motion-text-char-duration) var(--ttf-in-out);
+}
+
+//  ============================================================================
+//  $   GRADIENT SWEEP & SHIMMER
+//  ----------------------------------------------------------------------------
+.d-motion-text--gradient-sweep,
+.d-motion-text--shimmer {
+  position: relative;
+  display: inline-block;
+  animation: d-motion-text-gradient-in-word-reveal calc(var(--d-motion-text-word-duration) * 1.5) var(--ttf-in-out) 1;
+}
+
+.d-motion-text--gradient-in .d-motion-text__word::before,
+.d-motion-text--gradient-sweep::before {
+  position: absolute;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  background: var(--d-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(--d-motion-text-gradient);
+  mask-position: var(--d-motion-text-mask-pos) 0%;
+}
+
+.d-motion-text--shimmer {
+  content: attr(data-text-content);
+  mask: var(--d-motion-text-shimmer-gradient);
+  mask-position: var(--d-motion-text-mask-pos) 0%;
+}
+
+//  ============================================================================
+//  $   MODIFIERS
+//  ----------------------------------------------------------------------------
+.d-motion-text--none .d-motion-text__word,
+.d-motion-text--none .d-motion-text__char {
+  transform: none;
+  opacity: 1;
+}
+
+.d-motion-text--paused {
+  animation-play-state: paused !important;
+}
+
+.d-motion-text--looped {
+  animation-iteration-count: infinite !important;
+}
+
+//  ============================================================================
+//  $   ACCESSIBILITY
+//  ----------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .d-motion-text {
+    --d-motion-text-duration: 0ms;
+    --d-motion-text-char-duration: 0ms;
+    --d-motion-text-word-duration: 0ms;
+
+    transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+  }
+}

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

@@ -48,7 +48,6 @@
     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,9 +100,3 @@
     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.less

@@ -59,6 +59,9 @@
 @import 'components/emoji';
 @import 'components/emoji-text-wrapper';
 @import 'components/emoji-picker';
+@import 'components/motion_text';
+@import 'components/combobox-with-popover';
+@import 'components/combobox-multi-select';
 
 //  --  UTILITIES
 @import 'utilities/backgrounds';
@@ -79,8 +82,6 @@
 @import 'recipes/callbar_button_with_popover';
 @import 'recipes/callbar_button_with_dropdown';
 @import 'recipes/callbox';
-@import 'recipes/combobox_multi_select';
-@import 'recipes/combobox_with_popover';
 @import 'recipes/contact_info';
 @import 'recipes/editor';
 @import 'recipes/emoji_row';
@@ -90,7 +91,6 @@
 @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';