@dialpad/dialtone-css 8.53.0 → 8.55.0

package/lib/build/less/components/stack.less

@@ -162,37 +162,37 @@
 //  ============================================================================
 //  $   RESPONSIVE
 //  ----------------------------------------------------------------------------
-//  $$  EXTRA LARGE
+//  $$ SMALL
 //  ----------------------------------------------------------------------------
-.d-stack--xl {
-  @media screen and (max-width: 1264px) {
+.d-stack--sm {
+  @media screen and (min-width: 480px) {
     .direction-options();
     .gap-options();
   }
 }
 
-//  $$  LARGE
-//  ----------------------------------------------------------------------------
-.d-stack--lg {
-  @media screen and (max-width: 980px) {
+//  $$  MEDIUM
+//  ----------------
+.d-stack--md {
+  @media screen and (min-width: 640px) {
     .direction-options();
     .gap-options();
   }
 }
 
-//  $$  MEDIUM
-//  ----------------
-.d-stack--md {
-  @media screen and (max-width: 640px) {
+//  $$  LARGE
+//  ----------------------------------------------------------------------------
+.d-stack--lg {
+  @media screen and (min-width: 980px) {
     .direction-options();
     .gap-options();
   }
 }
 
-//  $$ SMALL
+//  $$  EXTRA LARGE
 //  ----------------------------------------------------------------------------
-.d-stack--sm {
-  @media screen and (max-width: 480px) {
+.d-stack--xl {
+  @media screen and (min-width: 1264px) {
     .direction-options();
     .gap-options();
   }

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

@@ -26,7 +26,7 @@
 .d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
+    --toast-color-shadow: var(--dt-color-border-subtle);
     --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
 
     z-index: var(--zi-notification);
@@ -75,7 +75,7 @@
 .d-toast--chat {
   .d-notice__icon,
   .d-toast__meta {
-    color: var(--dt-color-black-500);
+    color: var(--dt-color-foreground-tertiary);
   }
 
   .d-toast__meta {

package/lib/build/less/components/toggle.less

@@ -24,7 +24,7 @@
   //  ------------------------------------------------------------------------
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
-  --toggle-color-background: var(--dt-color-black-400);
+  --toggle-color-background: hsl(var(--dt-color-surface-bold-h), var(--dt-color-surface-bold-s), 66.6666%);
   --toggle-size-height: var(--dt-size-550); // 24
   --toggle-size-width: var(--dt-size-650); // 48
   --toggle-size-icon: var(--dt-size-500); // 16
@@ -64,10 +64,13 @@
       display: none;
     }
 
-    color: var(--dt-color-neutral-white);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM4MTI4IDUuMzgxMjhDNS43MjI5OSA1LjAzOTU3IDYuMjc3MDEgNS4wMzk1NyA2LjYxODcyIDUuMzgxMjhMMTIgMTAuNzYyNkwxNy4zODEzIDUuMzgxMjhDMTcuNzIzIDUuMDM5NTcgMTguMjc3IDUuMDM5NTcgMTguNjE4NyA1LjM4MTI4QzE4Ljk2MDQgNS43MjI5OSAxOC45NjA0IDYuMjc3MDEgMTguNjE4NyA2LjYxODcyTDEzLjIzNzQgMTJMMTguNjE4NyAxNy4zODEzQzE4Ljk2MDQgMTcuNzIzIDE4Ljk2MDQgMTguMjc3IDE4LjYxODcgMTguNjE4N0MxOC4yNzcgMTguOTYwNCAxNy43MjMgMTguOTYwNCAxNy4zODEzIDE4LjYxODdMMTIgMTMuMjM3NEw2LjYxODcyIDE4LjYxODdDNi4yNzcwMSAxOC45NjA0IDUuNzIyOTkgMTguOTYwNCA1LjM4MTI4IDE4LjYxODdDNS4wMzk1NyAxOC4yNzcgNS4wMzk1NyAxNy43MjMgNS4zODEyOCAxNy4zODEzTDEwLjc2MjYgMTJMNS4zODEyOCA2LjYxODcyQzUuMDM5NTcgNi4yNzcwMSA1LjAzOTU3IDUuNzIyOTkgNS4zODEyOCA1LjM4MTI4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
+    background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M3.05806 3.05806C3.30214 2.81398 3.69786 2.81398 3.94194 3.05806L7 6.11612L10.0581 3.05806C10.3021 2.81398 10.6979 2.81398 10.9419 3.05806C11.186 3.30214 11.186 3.69786 10.9419 3.94194L7.88388 7L10.9419 10.0581C11.186 10.3021 11.186 10.6979 10.9419 10.9419C10.6979 11.186 10.3021 11.186 10.0581 10.9419L7 7.88388L3.94194 10.9419C3.69786 11.186 3.30214 11.186 3.05806 10.9419C2.81398 10.6979 2.81398 10.3021 3.05806 10.0581L6.11612 7L3.05806 3.94194C2.81398 3.69786 2.81398 3.30214 3.05806 3.05806Z' fill='white'/> </svg>");
     background-repeat: no-repeat;
     background-size: cover;
+
+    [data-dt-theme="dark"] & {
+      background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M3.05806 3.05806C3.30214 2.81398 3.69786 2.81398 3.94194 3.05806L7 6.11612L10.0581 3.05806C10.3021 2.81398 10.6979 2.81398 10.9419 3.05806C11.186 3.30214 11.186 3.69786 10.9419 3.94194L7.88388 7L10.9419 10.0581C11.186 10.3021 11.186 10.6979 10.9419 10.9419C10.6979 11.186 10.3021 11.186 10.0581 10.9419L7 7.88388L3.94194 10.9419C3.69786 11.186 3.30214 11.186 3.05806 10.9419C2.81398 10.6979 2.81398 10.3021 3.05806 10.0581L6.11612 7L3.05806 3.94194C2.81398 3.69786 2.81398 3.30214 3.05806 3.05806Z' fill='black'/> </svg>");
+    }
   }
 
   &::after {
@@ -76,7 +79,7 @@
     left: var(--dt-space-100); // 1
     width: calc(var(--toggle-size-icon) + var(--dt-size-300));
     height: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    background-color: var(--dt-color-neutral-white);
+    background-color: var(--dt-color-surface-primary);
     border-radius: var(--dt-size-radius-circle);
     cursor: pointer;
     transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
@@ -105,11 +108,15 @@
   //  $$  CHECKED TOGGLE
   //  ----------------------------------------------------------------------------
   &--checked {
-    --toggle-color-background: var(--dt-color-brand-purple);
+    --toggle-color-background: var(--dt-checkbox-color-background-checked);
 
     .d-toggle__inner {
       left: var(--dt-space-350); // 6
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
+
+      [data-dt-theme="dark"] & {
+        background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='black'/> </svg>");
+      }
     }
 
     &.d-toggle--small .d-toggle__inner {

package/lib/build/less/components/tooltip.less

@@ -47,7 +47,7 @@
 }
 
 .tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
-  fill: var(--dt-color-surface-moderate);
+  fill: var(--dt-color-surface-contrast-inverted);
 }
 
 .tippy-box[data-animation='fade'][data-state='hidden'] {
@@ -91,8 +91,8 @@
 .d-tooltip--inverted {
   //  --  COMPONENT CSS VARS
   //  -----------------------
-  --tooltip-color-background: var(--dt-color-surface-moderate);
-  --tooltip-color-text: var(--dt-color-foreground-secondary);
+  --tooltip-color-background: var(--dt-color-surface-contrast-inverted);
+  --tooltip-color-text: var(--dt-color-foreground-primary);
 }
 
 //  ============================================================================

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

@@ -20,23 +20,23 @@
 
 @font-face {
   font-weight: 400;
-  font-family: Archivo;
+  font-family: "Season Mix";
   font-style: normal;
-  src: url('../fonts/Archivo-Regular.woff2') format('woff2');
+  src: url('../fonts/SeasonMix-Regular.woff2') format('woff2');
 }
 
 @font-face {
-  font-weight: 700;
-  font-family: Archivo;
+  font-weight: 600;
+  font-family: "Season Mix";
   font-style: normal;
-  src: url('../fonts/Archivo-Bold.woff2') format('woff2');
+  src: url('../fonts/SeasonMix-SemiBold.woff2') format('woff2');
 }
 
 @font-face {
-  font-weight: 600;
-  font-family: Archivo;
+  font-weight: 700;
+  font-family: "Season Mix";
   font-style: normal;
-  src: url('../fonts/Archivo-SemiBold.woff2') format('woff2');
+  src: url('../fonts/SeasonMix-Bold.woff2') format('woff2');
 }
 
 // Define custom font: "Segoe UI Adjusted" to fix some visual issues with the Segoe UI font

package/lib/build/less/recipes/leftbar_row.less

@@ -296,7 +296,7 @@
   }
 
   &__container--off-duty {
-    background-color: var(--dt-badge-color-background-critical);
+    background-color: var(--dt-color-surface-critical);
     border: var(--dt-size-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-500);
 

package/lib/build/less/utilities/backgrounds.less

@@ -137,3 +137,11 @@
 .d-bgg-pattern-slanted-stripes-light { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
 .d-bgg-pattern-steps-light { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
 .d-bgg-pattern-stripe-light { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }
+
+//  ============================================================================
+//  $ Background linear gradient
+//  ----------------------------------------------------------------------------
+
+.d-bgc-ai {
+    background-image: var(--dt-color-surface-ai) !important;
+}

package/lib/build/less/utilities/borders.less

@@ -224,3 +224,19 @@
     border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid !important;
 }
 .d-divide-x-reverse > * + * { --divide-x-reverse: 1; }
+
+
+//  $$ Border linear gradient
+//  ----------------------------------------------------------------------------
+
+/*
+ * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
+ * https://dev.to/afif/border-with-gradient-and-radius-387f
+ */
+.d-bc-ai {
+  border-image: var(--dt-color-border-ai) 1 !important;
+}
+
+.d-divide-ai > * + * {
+  border-image: var(--dt-color-border-ai) 1 !important;
+}

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

@@ -11,6 +11,9 @@
 //  • BACKGROUND/SURFACE COLORS
 //  • BORDER COLORS
 //
+// TODO: Remove `*-transparent` classes in favor of `*-neutral-transparent` classes.
+//  Both are existing and that's not ok, a migration will be needed on product.
+//
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
 .d-fc-current { color: currentColor !important; }