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

package/lib/dist/dialtone-default-theme.css

@@ -4002,6 +4002,7 @@
   }
   .d-btn__leading,
   .d-btn__trailing {
+    z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
     align-self: stretch;
@@ -4036,6 +4037,7 @@
     flex-direction: column;
   }
   .d-btn__icon {
+    z-index: var(--zi-base1);
     display: flex;
   }
   :where(.d-btn--disabled) .d-btn__icon,
@@ -5176,11 +5178,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;
   }
   .d-recipe-leftbar-row--selected .d-presence {
@@ -5190,11 +5195,13 @@
     --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
   }
   .d-presence__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;
   }
   .d-presence__inner--active {
     background-color: var(--presence-color-background-active);
@@ -5210,6 +5217,18 @@
     border-style: solid;
     border-width: var(--presence-border-inner-width);
   }
+  .d-presence__inner--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);
+  }
+  .d-presence__icon {
+    display: block;
+    color: var(--presence-icon-color);
+    block-size: var(--presence-icon-size);
+    inline-size: var(--presence-icon-size);
+  }
 }
 @layer dialtone.components {
   .d-icon {
@@ -6491,6 +6510,8 @@
   }
   .d-validation-message {
     --validation-color-text: var(--dt-color-foreground-tertiary);
+    --validation-size-icon: var(--dt-layout-25);
+    --validation-icon: initial;
     display: flex;
     gap: var(--dt-spacing-50);
     align-items: flex-start;
@@ -6502,44 +6523,46 @@
     font-family: inherit;
     line-height: var(--dt-font-line-height-300);
   }
-  .d-validation-message::before {
+  .d-validation-message:not(:has(.d-icon))::before {
     display: block;
     -webkit-margin-before: var(--dt-spacing-25);
             margin-block-start: var(--dt-spacing-25);
-    inline-size: var(--dt-layout-25);
-    min-inline-size: var(--dt-layout-25);
-    block-size: var(--dt-layout-25);
+    inline-size: var(--validation-size-icon);
+    min-inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
     background-color: var(--validation-color-text);
+    -webkit-mask: var(--validation-icon);
+            mask: var(--validation-icon);
     content: '';
   }
   .d-validation-message__container {
     display: flex;
     flex-direction: column;
   }
+  .d-validation-message__icon {
+    -webkit-margin-before: calc(var(--dt-spacing-25) / 2);
+            margin-block-start: calc(var(--dt-spacing-25) / 2);
+    color: var(--validation-color-text);
+    inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
+  }
   .d-validation-message--warning {
     --validation-color-text: var(--dt-color-foreground-warning);
-  }
-  .d-validation-message--warning::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
   }
   .d-validation-message--critical,
   .d-validation-message--error {
     --validation-color-text: var(--dt-color-foreground-critical);
-  }
-  .d-validation-message--critical::before,
-  .d-validation-message--error::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
   }
   .d-validation-message--positive,
   .d-validation-message--success {
     --validation-color-text: var(--dt-color-foreground-positive);
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
   }
-  .d-validation-message--positive::before,
-  .d-validation-message--success::before {
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-            mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+  .d-validation-message--info {
+    --validation-color-text: var(--dt-color-foreground-info);
+    --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFptNS0yYS41LjUgMCAwIDEgLjUtLjVoLjAwNWEuNS41IDAgMCAxIDAgMUg2YS41LjUgMCAwIDEtLjUtLjVaTTYgNS41YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwVjZhLjUuNSAwIDAgMSAuNS0uNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPiA8L2c+IDxkZWZzPiA8Y2xpcFBhdGggaWQ9ImEiPiA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDEydjEySDB6Ii8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+') no-repeat;
   }
 }
 .tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
@@ -6964,7 +6987,7 @@
   .d-modal {
     --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);
@@ -7004,7 +7027,7 @@
     background: transparent;
   }
   .d-modal--transparent {
-    --modal-backdrop-color-background: var(--d-bgc-transparent);
+    --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
     -webkit-app-region: no-drag;
   }
   .d-modal--transparent:is([aria-hidden='false'], [open]) {
@@ -7014,6 +7037,9 @@
     inline-size: 100%;
     min-block-size: 100%;
   }
+  .d-modal--transparent-backdrop {
+    --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
+  }
   .d-modal__dialog {
     position: relative;
     z-index: var(--zi-hide);
@@ -7252,6 +7278,9 @@
     display: flex;
     align-items: start;
   }
+  .d-toast {
+    --notice-color-background: var(--dt-color-surface-overlay);
+  }
   .d-notice__content {
     display: flex;
     flex: 1 auto;
@@ -7651,7 +7680,7 @@
 }
 @layer dialtone.components {
   .d-popover__dialog {
-    --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);
@@ -9061,7 +9090,7 @@
     flex-direction: column;
     inline-size: var(--dt-layout-550);
     block-size: 100%;
-    background-color: var(--dt-color-surface-primary);
+    background-color: var(--dt-color-surface-overlay);
     border-radius: var(--dt-size-radius-300);
   }
   .d-emoji-picker--header {
@@ -9072,8 +9101,8 @@
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: var(--dt-size-border-200);
-    background-color: var(--dt-color-surface-moderate) !important;
+    block-size: var(--dt-size-border-100);
+    background-color: var(--dt-color-border-subtle) !important;
     content: '';
   }
   .d-emoji-picker__alignment {
@@ -9089,7 +9118,6 @@
     justify-content: space-between;
     block-size: calc(var(--dt-layout-100) - var(--dt-spacing-75));
     padding: 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-secondary);
     -webkit-border-before: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
             border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
@@ -9101,7 +9129,7 @@
     gap: var(--dt-spacing-0);
   }
   .d-emoji-picker__tabset-list::after {
-    background-color: var(--dt-color-surface-moderate) !important;
+    background-color: var(--dt-color-neutral-transparent) !important;
   }
   .d-emoji-picker__tabset-list .d-tablist__item {
     --button-padding-y: var(--dt-spacing-75);
@@ -9125,8 +9153,8 @@
     margin: 0;
     padding: 0;
     background: none;
-    border: var(--dt-size-border-100) solid transparent;
-    border-radius: var(--dt-size-radius-350);
+    border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
+    border-radius: var(--dt-size-radius-circle);
     outline: none;
     cursor: pointer;
   }
@@ -9135,7 +9163,7 @@
   }
   .d-emoji-picker__skin-list button:active,
   .d-emoji-picker__skin-list button.selected {
-    border-color: var(--dt-color-border-bold);
+    border-color: var(--dt-color-border-moderate);
   }
   .d-emoji-picker__skin-selected button {
     display: inline-block;
@@ -9144,13 +9172,13 @@
     margin: 0;
     padding: calc(var(--dt-spacing-75) + var(--dt-spacing-1));
     background: var(--dt-color-surface-moderate-opaque);
-    border: none;
+    border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
     border-radius: var(--dt-size-radius-circle);
     outline: none;
     cursor: pointer;
   }
   .d-emoji-picker__skin-selected button:hover {
-    background: var(--dt-color-surface-bold);
+    border-color: var(--dt-color-border-subtle);
   }
   .d-emoji-picker__selector {
     min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
@@ -9168,7 +9196,7 @@
     inline-size: 100%;
     margin: 0;
     padding: var(--dt-spacing-200) var(--dt-spacing-200) 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-primary);
+    background: var(--dt-color-surface-overlay);
   }
   .d-emoji-picker__list {
     position: relative;
@@ -10524,6 +10552,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);
   }
   .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover,
   .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within {
@@ -16050,6 +16079,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -18579,6 +18609,9 @@
   .d-bgc-indigo-1000, .h\:d-bgc-indigo-1000:hover, .f\:d-bgc-indigo-1000:focus, .f\:d-bgc-indigo-1000:focus-within, .fv\:d-bgc-indigo-1000:focus-visible{
     background-color: oklch(from var(--dt-color-indigo-1000) l c h / var(--bgo, alpha)) !important;
   }
+  .d-bgc-overlay, .h\:d-bgc-overlay:hover, .f\:d-bgc-overlay:focus, .f\:d-bgc-overlay:focus-within, .fv\:d-bgc-overlay:focus-visible{
+    background-color: oklch(from var(--dt-color-surface-overlay) l c h / var(--bgo, alpha)) !important;
+  }
   .d-bgc-primary, .h\:d-bgc-primary:hover, .f\:d-bgc-primary:focus, .f\:d-bgc-primary:focus-within, .fv\:d-bgc-primary:focus-visible{
     background-color: oklch(from var(--dt-color-surface-primary) l c h / var(--bgo, alpha)) !important;
   }