@dialpad/dialtone-css 8.80.0-next.6 → 8.80.0-next.8

package/lib/build/less/components/modal.less

@@ -96,11 +96,11 @@
     //  ------------------------------------------------------------------------
     --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
     --modal-dialog-padding: var(--dt-spacing-400);
-    --modal-dialog-color-background: var(--dt-color-surface-primary);
+    --modal-dialog-color-background: var(--dt-color-surface-overlay);
     --modal-dialog-color-border: var(--dt-color-border-subtle);
     --modal-dialog-color-text: var(--dt-color-foreground-primary);
     --modal-header-color-text: var(--dt-color-foreground-primary);
-    --modal-dialog-shadow: var(--dt-shadow-large);
+    --modal-dialog-shadow: var(--dt-shadow-modal);
 
     // If we don't set this the native app header region will override all click events on the modal overlay
     -webkit-app-region: no-drag;
@@ -144,7 +144,7 @@
 }
 
 .d-modal--transparent {
-  --modal-backdrop-color-background: var(--d-bgc-transparent);
+  --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
 
   // If we don't set this the native app header region will override all click events on the modal overlay
   -webkit-app-region: no-drag;
@@ -158,6 +158,12 @@
   }
 }
 
+// Not to be confused with .d-modal--transparent above — that one is used
+// standalone (without .d-modal) by Popover/Tooltip.
+.d-modal--transparent-backdrop {
+  --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
+}
+
 //  $$  MODAL DIALOG
 //  ----------------------------------------------------------------------------
 .d-modal__dialog {

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

@@ -44,6 +44,10 @@
     align-items: start;
 }
 
+.d-toast {
+    --notice-color-background: var(--dt-color-surface-overlay);
+}
+
 //  ============================================================================
 //  $   NOTICE AREAS
 //  ============================================================================

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

@@ -25,11 +25,11 @@
   &__dialog {
     //  $$  CSS CUSTOM PROPERTIES
     //  ----------------------------------------------------------------------------
-    --popover-color-background: var(--dt-color-surface-secondary);
+    --popover-color-background: var(--dt-color-surface-overlay);
     --popover-border-width: var(--dt-size-border-100);
     --popover-border-radius: var(--dt-size-radius-400);
     --popover-color-border: var(--dt-color-border-subtle);
-    --popover-shadow: var(--dt-shadow-card);
+    --popover-shadow: var(--dt-shadow-overlay);
 
     // If we don't set this the native app header region will override all click events within the popover
     -webkit-app-region: no-drag;

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

@@ -12,11 +12,14 @@
   --presence-color-border-offline: var(--dt-presence-color-offline);
   --presence-color-background-active: var(--dt-presence-color-available);
   --presence-color-background-busy: var(--dt-presence-color-unavailable);
+  --presence-color-border-dnd: var(--dt-presence-color-unavailable);
   --presence-color-background-away: var(--dt-presence-color-busy);
   --presence-color-background-offline: var(--dt-color-surface-primary);
   --presence-border-radius: calc(var(--presence-size) * 0.208);
-  --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 2);
+  --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 3);
   --presence-size: var(--dt-spacing-150);
+  --presence-icon-size: var(--dt-layout-100-percent);
+  --presence-icon-color: var(--dt-color-foreground-primary-inverted);
 
   display: inline-block;
 
@@ -29,11 +32,13 @@
   }
 
   &__inner {
+    display: grid;
     box-sizing: border-box;
-    inline-size: var(--presence-size);
-    block-size: var(--presence-size);
     border: none;
     border-radius: var(--presence-border-radius);
+    inline-size: var(--presence-size);
+    block-size: var(--presence-size);
+    place-items: center;
 
     &--active {
       background-color: var(--presence-color-background-active);
@@ -52,6 +57,21 @@
       border-style: solid;
       border-width: var(--presence-border-inner-width);
     }
+
+    &--dnd {
+      --presence-icon-color: var(--presence-color-border-dnd);
+
+      border-color: var(--presence-color-border-dnd);
+      border-style: solid;
+      border-width: var(--presence-border-inner-width);
+    }
+  }
+
+  &__icon {
+    display: block;
+    color: var(--presence-icon-color);
+    block-size: var(--presence-icon-size);
+    inline-size: var(--presence-icon-size);
   }
 }
 }

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

@@ -28,7 +28,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --toast-color-shadow: var(--dt-color-border-subtle);
-    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-overlay);
 
     z-index: var(--zi-notification);
     display: block;
@@ -125,7 +125,7 @@
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
   --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
-  --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
+  --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-overlay);
   --toast-alternate-color-background: var(--dt-color-surface-primary);
   --toast-alternate-color-text: var(--dt-color-foreground-primary);
   --toast-alternate-color-icon: var(--dt-color-foreground-muted);

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

@@ -30,6 +30,7 @@
     --presence-color-background-active: var(--dt-shell-presence-color-available);
     --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
     --presence-color-background-away: var(--dt-shell-presence-color-busy);
+    --presence-color-border-dnd: var(--dt-shell-presence-color-unavailable);
   }
 
   //  ============================================================================

package/lib/build/less/recipes/unread_pill.less

@@ -9,7 +9,7 @@
   line-height: var(--dt-font-line-height-600);
   border: none;
   border-radius: var(--dt-size-radius-pill);
-  box-shadow: var(--dt-shadow-medium);
+  box-shadow: var(--dt-shadow-overlay);
   cursor: pointer;
 }
 

package/lib/build/less/utilities/effects.less

@@ -142,11 +142,17 @@
 //  ============================================================================
 //  $   BOX SHADOW
 //  ----------------------------------------------------------------------------
-.d-bs-sm { box-shadow: var(--dt-shadow-small) !important; }
-.d-bs-md { box-shadow: var(--dt-shadow-medium) !important; }
-.d-bs-lg { box-shadow: var(--dt-shadow-large) !important; }
-.d-bs-xl { box-shadow: var(--dt-shadow-extra-large) !important; }
-.d-bs-card { box-shadow: var(--dt-shadow-card) !important; }
+.d-bs-raised,
+.d-bs-sm,
+.d-bs-card { box-shadow: var(--dt-shadow-raised) !important; }
+
+.d-bs-overlay,
+.d-bs-md,
+.d-bs-lg { box-shadow: var(--dt-shadow-overlay) !important; }
+
+.d-bs-modal,
+.d-bs-xl { box-shadow: var(--dt-shadow-modal) !important; }
+
 .d-bs-none { box-shadow: none !important; }
 .d-bs-unset { box-shadow: unset !important; }