@dialpad/dialtone 8.13.6 → 8.13.7

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

@@ -13,11 +13,7 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner-color-background: var(--dt-color-surface-secondary);
-    --banner-color-text: var(--dt-color-foreground-primary);
-    --notice-color-icon: var(--toast-color-text);
     --banner-color-border: var(--dt-color-border-subtle);
-    --banner-font-size: var(--dt-font-size-200);
     --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);
@@ -27,22 +23,15 @@
     right: 0;
     left: 0;
     z-index: var(--zi-navigation-fixed);
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
+    max-width: 100%;
     min-height: var(--dt-size-650); // 48
-    color: var(--banner-color-text);
-    font-size: var(--banner-font-size);
+    padding: 0;
     line-height: var(--banner-line-height);
-    background-color: var(--banner-color-background);
     border-bottom: 1px solid var(--banner-color-border);
     border-radius: 0;
     box-shadow: none;
 
-    // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: var(--dt-size-650);
-
         visibility: hidden;
         opacity: 0;
     }
@@ -52,17 +41,12 @@
         opacity: 1;
     }
 
-    //  If you want to put the banner above the topbar
-    &.d-banner--pinned {
+    &--pinned {
         z-index: calc(~'var(--zi-navigation-fixed) + 1');
         transform: translate3d(0, 0, 0);
     }
 }
 
-.d-banner--transform {
-    transform: translate3d(0, var(--topbar-height), 0);
-}
-
 //  ============================================================================
 //  $   CONTENT CONTAINER
 //  ----------------------------------------------------------------------------
@@ -89,52 +73,5 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
-    --banner-color-background: var(--dt-color-surface-strong);
-    --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    --notice-color-icon: var(--dt-color-foreground-primary-inverted);
     --banner-color-border: transparent;
 }
-
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.d-banner--error {
-    --banner-color-background: var(--dt-color-surface-critical);
-
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-critical-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.d-banner--info {
-    --banner-color-background: var(--dt-color-surface-info);
-
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-info-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-banner--success {
-    --banner-color-background: var(--dt-color-surface-success);
-
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-success-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-banner--warning {
-    --banner-color-background: var(--dt-color-surface-warning);
-
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-gold-200);
-        --banner-color-text: var(--dt-color-foreground-primary);
-    }
-}

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

@@ -10,7 +10,9 @@
 //  $   BASE WRAPPER
 //  ----------------------------------------------------------------------------
 
-.d-notice {
+.d-notice,
+.d-banner,
+.d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --notice-color-background: var(--dt-color-surface-secondary);
@@ -37,12 +39,6 @@
     background-color: var(--notice-color-background);
     border-radius: var(--notice-border-radius);
     box-shadow: var(--notice-box-shadow);
-
-    .d-toast & {
-        max-width: var(--dt-size-975);
-        box-shadow: var(--dt-shadow-small);
-        pointer-events: all;
-    }
 }
 
 //  ============================================================================
@@ -64,6 +60,10 @@
     flex: 0 auto;
     gap: var(--dt-space-400);
     align-items: center;
+
+    button {
+        color: var(--notice-color-text);
+    }
 }
 
 //  $$  ICON
@@ -98,11 +98,13 @@
 //  ============================================================================
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
-.d-notice.d-notice--important {
+.d-notice.d-notice--important,
+.d-banner.d-banner--important,
+.d-toast.d-toast--important {
     --notice-color-background: var(--dt-color-surface-strong);
     --notice-color-text: var(--dt-color-foreground-primary-inverted);
+    --notice-color-icon: var(--notice-color-text);
     --notice-color-shadow: transparent;
-    --notice-color-icon: var(--dt-color-foreground-primary-inverted);
 }
 
 //  $$  ERROR
@@ -117,7 +119,6 @@
     &.d-banner--important,
     &.d-toast--important {
         --notice-color-background: var(--dt-color-surface-critical-strong);
-        --notice-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }
 
@@ -164,8 +165,7 @@
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--dt-color-gold-200);
-        --notice-color-text: var(--dt-color-foreground-primary);
-        --notice-color-icon: var(--notice-color-text);
+        --notice-color-background: var(--dt-color-surface-warning-strong);
+        --notice-color-text: var(--dt-color-neutral-black);
     }
 }

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

@@ -53,6 +53,12 @@
   // Use shared style properties of d-input (<input>, <textarea>)
   .d-input();
 
+  // select options can be styled on windows
+  & option {
+    color: var(--dt-color-foreground-secondary);
+    background-color: var(--dt-color-surface-secondary);
+  }
+
   //  --  FOCUS STATE
   &:focus {
       --input-color-background: var(--dt-inputs-color-background-focus);

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

@@ -25,28 +25,15 @@
 .d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --toast-color-background: var(--dt-color-surface-secondary);
-    --toast-color-text: var(--dt-color-foreground-primary);
-    --notice-color-icon: var(--toast-color-text);
-    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) ~' / ' 15%);
-    --toast-padding: var(--dt-space-500);
-    --toast-border-radius: var(--dt-size-400);
+    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
     --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
-    --toast-font-size: var(--dt-font-size-200);
-    --toast-line-height: var(--dt-font-line-height-300);
 
     z-index: var(--zi-notification);
-    box-sizing: border-box;
-    width: 100%;
-    max-width: var(--dt-size-1020); // 628
-    padding: var(--toast-padding);
-    color: var(--toast-color-text);
-    font-size: var(--toast-font-size);
-    line-height: var(--toast-line-height);
+    display: block;
+    max-width: var(--dt-size-975);
     word-break: normal;
-    background-color: var(--toast-color-background);
-    border-radius: var(--toast-border-radius);
     box-shadow: var(--toast-box-shadow);
+    pointer-events: all;
 
     //  If there's a link in a toast, break the url so it wraps
     > a {
@@ -73,70 +60,11 @@
     display: flex;
     align-items: center;
 
-    .d-notice__content {
-        margin-right: var(--dt-space-500); // 16
-    }
-
     .d-notice__actions {
         margin-left: var(--dt-space-600); // 32
     }
 }
 
-//  ============================================================================
-//  $   STYLES
-//  ============================================================================
-//  $$  DEFAULT IMPORTANT
-//  ----------------------------------------------------------------------------
-.d-toast.d-toast--important {
-    --toast-color-background: var(--dt-color-surface-strong);
-    --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    --notice-color-icon: var(--toast-color-text);
-  }
-
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.d-toast--error {
-    --toast-color-background: var(--dt-color-surface-critical);
-
-    &.d-toast--important {
-      --toast-color-background: var(--dt-color-red-400);
-      --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.d-toast--info {
-    --toast-color-background: var(--dt-color-surface-info);
-
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-info-strong);
-        --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-toast--success {
-    --toast-color-background: var(--dt-color-surface-success);
-
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-success-strong);
-        --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-toast--warning {
-    --toast-color-background: var(--dt-color-surface-warning);
-
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-warning-strong);
-        --toast-color-text: var(--dt-color-foreground-primary);
-    }
-}
-
 //  ============================================================================
 //  $   UC Toast Shims
 //  ============================================================================

package/lib/build/less/dialtone.less

@@ -13,7 +13,6 @@
 //  --  COMPONENTS
 @import 'components/avatar';
 @import 'components/badge';
-@import 'components/banner';
 @import 'components/breadcrumbs';
 @import 'components/button';
 @import 'components/card';
@@ -25,8 +24,9 @@
 @import 'components/link';
 @import 'components/list-group'; // Dialtone 5 shim
 @import 'components/modal';
-@import 'components/toast'; // Needs to come before Notice styles
 @import 'components/notice';
+@import 'components/toast';
+@import 'components/banner';
 @import 'components/popover';
 @import 'components/radio-checkbox';
 @import 'components/selects';