@dialpad/dialtone-css 8.52.1 → 8.54.0

package/lib/build/less/components/root-layout.less

@@ -16,23 +16,16 @@
   position: relative;
   display: grid;
   grid-template-areas:
-    'header header'
-    'sidebar body'
-    'footer footer';
-  grid-template-rows: min-content 1fr min-content;
-  grid-template-columns: min-content 1fr;
+    'header'
+    'sidebar'
+    'body'
+    'footer';
+  grid-template-rows: min-content auto 1fr min-content;
+  grid-template-columns: 1fr;
   min-height: 100vh;
 
-  &--inverted {
-    grid-template-areas:
-      'header header'
-      'body sidebar'
-      'footer footer';
-    grid-template-columns: 1fr min-content;
-  }
-
   &--fixed {
-    height: 100vh;
+    height: auto;
   }
 
   &__header {
@@ -71,59 +64,92 @@
   }
 }
 
-@media (max-width: 480px) {
+.d-root-layout__responsive--default {
+  grid-template-areas:
+    'header header'
+    'sidebar body'
+    'footer footer';
+  grid-template-rows: min-content 1fr min-content;
+  grid-template-columns: min-content 1fr;
 
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--sm {
-    height: auto;
+  &.d-root-layout--inverted {
+    grid-template-areas:
+      'header header'
+      'body sidebar'
+      'footer footer';
+    grid-template-columns: 1fr min-content;
   }
 
-  .d-root-layout__responsive--sm {
-    grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
+  &.d-root-layout--fixed{
+    height: 100vh;
   }
 }
 
-@media (max-width: 640px) {
+@media (min-width: 480px) {
+  .d-root-layout__responsive--sm {
+    grid-template-areas:
+      'header header'
+      'sidebar body'
+      'footer footer';
+    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: min-content 1fr;
+
+    &.d-root-layout--inverted {
+      grid-template-areas:
+        'header header'
+        'body sidebar'
+        'footer footer';
+      grid-template-columns: 1fr min-content;
+    }
 
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--md {
-    height: auto;
+    &.d-root-layout--fixed {
+      height: 100vh;
+    }
   }
+}
 
+@media (min-width: 640px) {
   .d-root-layout__responsive--md {
     grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 980px) {
+      'header header'
+      'sidebar body'
+      'footer footer';
+    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: min-content 1fr;
+
+    &.d-root-layout--inverted {
+      grid-template-areas:
+        'header header'
+        'body sidebar'
+        'footer footer';
+      grid-template-columns: 1fr min-content;
+    }
 
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--lg {
-    height: auto;
+    &.d-root-layout--fixed {
+      height: 100vh;
+    }
   }
+}
 
+@media (min-width: 980px) {
   .d-root-layout__responsive--lg {
     grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
+      'header header'
+      'sidebar body'
+      'footer footer';
+    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: min-content 1fr;
+
+    &.d-root-layout--inverted {
+      grid-template-areas:
+        'header header'
+        'body sidebar'
+        'footer footer';
+      grid-template-columns: 1fr min-content;
+    }
+
+    &.d-root-layout--fixed {
+      height: 100vh;
+    }
   }
 }

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

@@ -119,3 +119,138 @@
 .d-toast--viewing {
   --toast-color-background: var(--dt-color-surface-secondary);
 }
+
+//  ============================================================================
+//  @   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-toast-alternate {
+  //  Component CSS Vars
+  //  ------------------------------------------------------------------------
+  --toast-alternate-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
+  --toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
+  --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);
+  --toast-alternate-font-color: var(--dt-color-foreground-tertiary);
+  --toast-alternate-font-size: var(--dt-font-size-200);
+  --toast-alternate-line-height: var(--dt-font-line-height-300);
+  --toast-alternate-border-radius: var(--dt-size-500);
+  --toast-alternate-border-color: var(--dt-color-border-subtle);
+  --toast-alternate-border-style: solid;
+  --toast-alternate-border-width: var(--dt-size-100);
+
+  z-index: var(--zi-notification);
+
+  //  Base Styles
+  //  ------------------------------------------------------------------------
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--dt-size-925);
+  padding: var(--dt-space-350) var(--dt-space-350) var(--dt-space-450) var(--dt-space-450);
+  color: var(--toast-alternate-color-text);
+  font-size: var(--toast-alternate-font-size);
+  line-height: var(--toast-alternate-line-height);
+  word-break: normal;
+  background-color: var(--toast-alternate-color-background);
+  border: var(--toast-alternate-border-width) var(--toast-alternate-border-style) var(--toast-alternate-border-color);
+  border-radius: var(--toast-alternate-border-radius);
+  box-shadow: var(--toast-alternate-box-shadow);
+  pointer-events: all;
+
+  //  If there's a link in a toast, break the url so it wraps
+  > a {
+    word-break: break-all;
+  }
+
+  // If you want to hide and reveal the toast
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: var(--dt-opacity-0);
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: var(--dt-opacity-1300);
+  }
+
+  .d-toast-layout-alternate__icon {
+    display: flex;
+    flex: 0 auto;
+    margin-right: var(--dt-space-300);
+    color: var(--toast-alternate-color-icon);
+  }
+
+  .d-notice__title {
+    color: var(--dt-color-foreground-tertiary);
+    font-weight: var(--dt-font-weight-normal);
+    font-size: var(--dt-font-size-100);
+  }
+
+  .d-notice__actions .base-button__button {
+    color: var(--dt-action-color-foreground-muted-default);
+  }
+}
+
+//  ============================================================================
+//  $   CONTENT CONTAINER
+//  ----------------------------------------------------------------------------
+.d-toast-alternate__content {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  margin-right: var(--dt-space-500);
+  color: var(--dt-color-foreground-primary);
+  font-weight: var(--dt-font-weight-normal);
+  font-size: var(--dt-font-size-200);
+}
+
+.d-toast-alternate__dialog {
+  position: relative;
+  align-items: center;
+  width: var(--dt-size-100-percent);
+
+
+  .d-notice__actions button:first-child {
+    margin-left: var(--dt-space-600); // 32
+  }
+}
+
+.d-toast-alternate__header {
+  display: flex;
+  gap: var(--dt-space-200);
+  align-items: center;
+  color: var(--toast-alternate-font-color);
+}
+
+//  $$  ERROR
+//  ----------------------------------------------------------------------------
+.d-toast-alternate--error {
+  --toast-alternate-border-color: var(--dt-color-border-critical-subtle);
+}
+
+//  $$  INFO
+//  ----------------------------------------------------------------------------
+
+.d-toast-alternate--info {
+  --toast-alternate-border-color: var(--dt-color-border-subtle);
+}
+
+//  $$  SUCCESS
+//  ----------------------------------------------------------------------------
+.d-toast-alternate--success {
+  --toast-alternate-border-color: var(--dt-color-border-success-subtle);
+}
+
+//  $$  GRADIENT
+//  ----------------------------------------------------------------------------
+.d-toast-alternate--gradient {
+  background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
+  var(--dt-color-border-ai) border-box;
+}
+
+//  $$  warning
+//  ----------------------------------------------------------------------------
+.d-toast-alternate--warning {
+  --toast-alternate-border-color: var(--dt-color-border-warning-subtle);
+}