@dialpad/dialtone-css 8.54.0 → 8.56.0

package/lib/build/less/components/badge.less

@@ -95,9 +95,10 @@
   }
 
   &--ai {
-    --badge-color-text: var(--dt-badge-color-foreground-bulletin); // missing token or is ok to use this one?
-    --badge-color-background: var(--dt-color-magenta-300);
+    --badge-color-text: var(--dt-badge-color-foreground-ai);
+    --badge-color-background: var(--dt-color-brand-magenta); // fallback to gradient
 
+    text-shadow: var(--dt-size-50) var(--dt-size-50) 0 hsl(var(--dt-color-neutral-black-h), var(--dt-color-neutral-black-s), var(--dt-color-neutral-black-l), 0.6);
     background-image: var(--dt-badge-color-background-ai);
   }
 

package/lib/build/less/components/banner.less

@@ -13,7 +13,7 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner-color-border: var(--dt-color-border-subtle);
+    --banner-color-border: var(--dt-color-border-default);
     --banner-line-height: var(--dt-font-line-height-200);
     --banner-dialog-padding-y: var(--dt-space-400);
     --banner-dialog-padding-x: var(--dt-space-500);

package/lib/build/less/components/breadcrumbs.less

@@ -14,14 +14,14 @@
 .d-breadcrumbs {
     --breadcrumbs-font-size: var(--dt-font-size-200);
     --breadcrumbs-line-height: var(--dt-font-line-height-300);
-    --breadcrumbs-color-separator: var(--dt-color-black-500);
+    --breadcrumbs-color-separator: var(--dt-color-foreground-muted);
     --breadcrumbs-color-text: var(--dt-color-link-muted);
 
     //  ============================================================================
     //  $  INVERTED STYLE
     //  ----------------------------------------------------------------------------
     &--inverted {
-        --breadcrumbs-color-separator: var(--dt-color-black-400);
+        --breadcrumbs-color-separator: var(--dt-color-foreground-muted-inverted);
         --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
     }
 

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

@@ -389,6 +389,62 @@
   }
 }
 
+//  $$  POSITIVE BUTTON
+//  ----------------------------------------------------------------------------
+.d-btn--positive {
+  --button-color-text: var(--dt-action-color-foreground-positive-default);
+  --button-color-background: var(--dt-action-color-background-positive-default);
+
+  &:hover:not([disabled]) {
+    --button-color-text: var(--dt-action-color-foreground-positive-hover);
+    --button-color-background: var(--dt-action-color-background-positive-hover);
+  }
+
+  &:active:not([disabled]),
+  &.d-btn--active:not([disabled]),
+  &.d-btn--active:active:not([disabled]) {
+    --button-color-text: var(--dt-action-color-foreground-positive-active);
+    --button-color-background: var(
+      --dt-action-color-background-positive-active
+    );
+  }
+
+  &.d-btn--outlined {
+    --button-color-border: var(
+      --dt-action-color-border-positive-outlined-default
+    );
+  }
+
+  &.d-btn--primary {
+    --button-color-text: var(
+      --dt-action-color-foreground-positive-primary-default
+    );
+    --button-color-background: var(
+      --dt-action-color-background-positive-primary-default
+    );
+
+    &:hover:not([disabled]) {
+      --button-color-text: var(
+        --dt-action-color-foreground-positive-primary-default
+      );
+      --button-color-background: var(
+        --dt-action-color-background-positive-primary-hover
+      );
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+      --button-color-text: var(
+        --dt-action-color-foreground-positive-primary-default
+      );
+      --button-color-background: var(
+        --dt-action-color-background-positive-primary-active
+      );
+    }
+  }
+}
+
 //  $$  INVERTED BUTTON
 //  ----------------------------------------------------------------------------
 //  --  Base, clear inverted button
@@ -651,6 +707,11 @@
       opacity: var(--dt-opacity-600); // soften it
       content: "";
 
+       // soften divider for muted outlined
+      .d-split-btn:has(.d-btn--outlined.d-btn--muted, .d-btn--outlined.d-btn--inverted) & {
+        opacity: var(--dt-opacity-300);
+      }
+
       // hide divider line when hovering or focusing any button within the split button
       .d-split-btn:has(:focus-visible, :hover, .d-btn--active) & {
         opacity: 0;

package/lib/build/less/components/chip.less

@@ -79,7 +79,7 @@
   .d-avatar {
     --avatar-size-shape: var(--dt-size-550);
 
-    margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
+    margin: var(--dt-space-200-negative) var(--dt-space-350) var(--dt-space-200-negative) var(--dt-space-350-negative);
   }
 }
 
@@ -100,23 +100,23 @@
   }
 
   &:hover:not([disabled]) {
-    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 15%);
+    --button-color-background: var(--dt-action-color-background-muted-hover);
   }
 
   &:active:not([disabled]),
   &.d-btn--active:not([disabled]),
   &.d-btn--active:active:not([disabled]) {
-    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 25%);
+    --button-color-background: var(--dt-action-color-background-muted-active);
   }
 }
 
 .d-chip__icon {
-  padding-right: var(--dt-space-300);
-  line-height: 0;
+  padding-right: var(--dt-space-350);
+  line-height: 1;
 }
 
 .d-chip__label--active {
-  background-color: var(--dt-color-black-400);
+  background-color: var(--dt-color-surface-bold-opaque);
 }
 
 .d-chip__text {
@@ -146,7 +146,7 @@
   .d-avatar {
     --avatar-size-shape: var(--dt-size-500);
 
-    margin-right: var(--dt-space-300);
+    margin-right: var(--dt-space-350);
     margin-left: var(--dt-space-300-negative);
   }
 }

package/lib/build/less/components/datepicker.less

@@ -71,8 +71,8 @@
     font-variant-numeric: tabular-nums;
 
     &--selected {
-      color: var(--dt-color-neutral-white);
-      background: var(--dt-color-brand-purple);
+      color: var(--dt-action-color-foreground-base-primary-default);
+      background: var(--dt-action-color-background-base-primary-default);
     }
 
     &--disabled {

package/lib/build/less/components/empty-state.less

@@ -20,7 +20,7 @@
   text-align: center;
 
   &__icon {
-    color: var(--dt-color-foreground-tertiary);
+    color: var(--dt-color-foreground-muted);
     line-height: 0;
   }
 

package/lib/build/less/components/input.less

@@ -27,6 +27,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --input-color-border: var(--dt-inputs-color-border-default);
+    --input-color-border-hover: var(--dt-inputs-color-border-hover);
     --input-color-background: var(--dt-inputs-color-background-default);
     --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
     --input-color-text: var(--dt-inputs-color-foreground-default);
@@ -91,6 +92,12 @@
     &::-ms-clear {
         display: none;
     }
+    //  --  HOVER STATE
+
+    &:hover {
+        --input-color-border: var(--input-color-border-hover);
+    }
+
     //  --  FOCUS STATE
     &:focus,
     &:focus-within {

package/lib/build/less/components/link.less

@@ -53,7 +53,8 @@
     }
 
     &:active {
-        --link-text-decoration: underline;
+        // --link-text-decoration: underline;
+        color: var(--link-color-default);
     }
 
     &:focus-visible {
@@ -165,7 +166,7 @@
         --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
         --link-text-decoration: none;
         --link-padding: 0 var(--dt-space-200);
-        --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.2);
+        --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.3);
 
         line-height: var(--dt-font-line-height-200);
         border-radius: var(--dt-size-radius-200);
@@ -178,17 +179,21 @@
     &--mention {
         --link-text-decoration: none;
         --link-padding: 0 var(--dt-space-200);
-        --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.1);
+        --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.1);
 
         line-height: var(--dt-font-line-height-200);
         border-radius: var(--dt-size-radius-200);
 
         &:hover {
             --link-text-decoration: underline;
-            --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.2);
+            --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.25);
 
             text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
             text-decoration-thickness: var(--dt-size-border-50);
         }
+
+        &:active {
+            --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.1);
+        }
     }
 }

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

@@ -27,12 +27,12 @@
 }
 
 .d-list-group--link {
-    color: var(--dt-color-black-800);
+    color: var(--dt-color-foreground-secondary);
     font-size: var(--dt-font-size-200);
     text-decoration: none;
 
     &:hover {
-        color: var(--dt-color-black-900);
+        color: var(--dt-color-foreground-primary);
         background-color: hsla(var(--dt-color-purple-400-hsl) ~' / ' 85%);
     }
 

package/lib/build/less/components/notice.less

@@ -18,7 +18,7 @@
     --notice-color-background: var(--dt-color-surface-secondary);
     --notice-color-text: var(--dt-color-foreground-primary);
     --notice-color-icon: var(--notice-color-text);
-    --notice-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.06);
+    --notice-color-shadow: var(--dt-color-border-subtle);
     --notice-padding: var(--dt-space-500);
     --notice-font-size: var(--dt-font-size-200);
     --notice-line-height: var(--dt-font-line-height-300);
@@ -61,7 +61,7 @@
     gap: var(--dt-space-400);
     align-items: center;
 
-    button {
+    .d-btn {
         color: var(--notice-color-text);
     }
 }
@@ -113,7 +113,7 @@
 .d-banner--error,
 .d-toast--error {
     --notice-color-background: var(--dt-color-surface-critical);
-    --notice-color-icon: var(--dt-color-red-400);
+    --notice-color-icon: var(--dt-color-foreground-critical);
 
     &.d-notice--important,
     &.d-banner--important,
@@ -144,7 +144,7 @@
 .d-banner--success,
 .d-toast--success {
     --notice-color-background: var(--dt-color-surface-success);
-    --notice-color-icon: var(--dt-color-green-400);
+    --notice-color-icon: var(--dt-color-foreground-success);
 
     &.d-notice--important,
     &.d-banner--important,
@@ -160,7 +160,7 @@
 .d-banner--warning,
 .d-toast--warning {
     --notice-color-background: var(--dt-color-surface-warning);
-    --notice-color-icon: var(--dt-color-gold-400);
+    --notice-color-icon: var(--dt-color-foreground-warning);
 
     &.d-notice--important,
     &.d-banner--important,

package/lib/build/less/components/presence.less

@@ -8,7 +8,7 @@
 
 .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-color-background);
-  --presence-color-border-offline: var(--dt-color-black-600);
+  --presence-color-border-offline: var(--dt-color-border-bold);
   --presence-color-background-active: var(--dt-theme-presence-color-background-available);
   --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
   --presence-color-background-away: var(--dt-theme-presence-color-background-busy);

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

@@ -25,6 +25,7 @@
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
     --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
+    --check-radio-color-border-hover: var(--dt-checkbox-color-border-unchecked-hover);
     --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
     --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
     --check-radio-color-background: var(--dt-inputs-color-background-default);
@@ -55,10 +56,8 @@
             display: none;
         }
 
-        &:focus,
-        &:checked:focus {
-          outline: 0;
-          box-shadow: var(--dt-shadow-focus);
+        &:not(:disabled):hover {
+            border-color: var(--check-radio-color-border-hover);
         }
 
         &:checked {
@@ -182,9 +181,10 @@
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
         background-repeat: no-repeat;
         background-position: center center;
-        background-size: contain;
+        background-size: auto;
         border-radius: var(--dt-size-radius-300);
 
+        &:focus,
         &:focus-visible,
         &:checked:focus-visible {
             box-shadow: var(--dt-shadow-focus);
@@ -193,13 +193,18 @@
         &:checked {
             --check-radio-color-background: var(--check-radio-color-background-checked);
 
-            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/></svg>");
+            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>");
+            border: 0;
+
+            [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>");
+            }
 
             //  Disabled
             &[disabled] {
                 --check-radio-color-background: var(--check-radio-color-background-disabled);
 
-                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
+                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='gray'/> </svg>");
             }
         }
 
@@ -207,7 +212,7 @@
             --check-radio-color-background: var(--check-radio-color-background-disabled);
             --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
+            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='gray'/> </svg>");
         }
 
         &--indeterminate,
@@ -215,13 +220,18 @@
             --check-radio-color-background: var(--check-radio-color-background-checked);
             --check-radio-color-border: var(--check-radio-color-border-checked);
 
-            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='%23fff'/></svg>");
+            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 d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='white'/> </svg>");
+            border: 0;
+
+            [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 d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='black'/> </svg>");
+            }
 
             &[disabled] {
                 --check-radio-color-background: var(--check-radio-color-background-disabled);
                 --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
+                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 d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='gray'/> </svg>");
             }
         }
 
@@ -230,7 +240,7 @@
             --check-radio-color-background: var(--check-radio-color-background-disabled);
             --check-radio-color-border: var(--check-radio-color-border-disabled);
 
-            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
+            background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
         }
 
         //  Disabled
@@ -258,15 +268,11 @@
             --check-radio-color-background: var(--check-radio-color-background-disabled);
         }
 
-        &:focus-visible,
-        &:checked:focus-visible {
-          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
-        }
-
         &:checked {
             --check-radio-color-background: var(--check-radio-color-background-checked);
 
-            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
+            border-color: transparent;
+            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
 
             // Disabled
             &[disabled] {
@@ -274,6 +280,12 @@
             }
         }
 
+        &:focus,
+        &:focus-visible,
+        &:checked:focus-visible {
+          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
+        }
+
         &--disabled:checked {
             --check-radio-color-border: var(--check-radio-color-border-disabled);
             --check-radio-color-background: var(--check-radio-color-background-disabled);

package/lib/build/less/components/selects.less

@@ -35,16 +35,12 @@
     z-index: var(--zi-selected);
     width: var(--select-arrow-size);
     height: var(--select-arrow-size);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
+    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='M6.55798 1.89155C6.80205 1.64748 7.19778 1.64748 7.44186 1.89155L10.3585 4.80822C10.6026 5.0523 10.6026 5.44803 10.3585 5.6921C10.1144 5.93618 9.71872 5.93618 9.47464 5.6921L6.99992 3.21738L4.52519 5.6921C4.28112 5.93618 3.88539 5.93618 3.64131 5.6921C3.39723 5.44803 3.39723 5.0523 3.64131 4.80822L6.55798 1.89155ZM3.64131 8.30822C3.88539 8.06414 4.28112 8.06414 4.52519 8.30822L6.99992 10.7829L9.47464 8.30822C9.71872 8.06414 10.1144 8.06414 10.3585 8.30822C10.6026 8.5523 10.6026 8.94803 10.3585 9.1921L7.44186 12.1088C7.19778 12.3528 6.80205 12.3528 6.55798 12.1088L3.64131 9.1921C3.39723 8.94803 3.39723 8.5523 3.64131 8.30822Z' fill='gray'/> </svg>");
     background-repeat: no-repeat;
     background-size: 100%;
     transform: translateY(-50%);
     content: '';
     pointer-events: none;
-
-    .dialtone-theme-dark & {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjQUFBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDAgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
-    }
   }
 }
 
@@ -136,15 +132,18 @@
 
 //  $$  VALIDATION STATES
 //  ------------------------------------------------------------------------
-.d-select__input--success {
+.d-select__input--success,
+.d-select__input--success:hover {
   --input-color-border: var(--dt-inputs-color-border-success);
 }
 
-.d-select__input--error {
+.d-select__input--error,
+.d-select__input--error:hover {
   --input-color-border: var(--dt-inputs-color-border-critical);
 }
 
-.d-select__input--warning {
+.d-select__input--warning,
+.d-select__input--warning:hover {
   --input-color-border: var(--dt-inputs-color-border-warning);
 }
 

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);