@dialpad/dialtone-css 8.74.0-next.2 → 8.74.0-next.4

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

@@ -24,7 +24,6 @@
     inset-inline: 0;
     z-index: var(--zi-navigation-fixed);
     max-inline-size: 100%;
-    min-block-size: var(--dt-size-650); // 48
     padding: 0;
     line-height: var(--banner-line-height);
     border-block-end: 1px solid var(--banner-color-border);
@@ -55,19 +54,22 @@
     display: flex;
     align-items: center;
     inline-size: 100%;
-    max-inline-size: 128rem;
-    min-block-size: 100%;
+    min-block-size: calc(var(--dt-size-650) + var(--dt-size-200));
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
 
+    .d-notice__icon {
+        margin-block-start: var(--dt-size-0);
+    }
+
     .d-notice__content {
         flex-direction: row;
-        gap: var(--dt-size-300);
+        gap: var(--dt-size-350);
         align-items: baseline;
     }
 
     .d-notice__message {
-        font-size: var(--dt-font-size-200) !important;
+        font: var(--dt-text-body-sm);
     }
 }
 

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

@@ -13,7 +13,7 @@
 
 @layer dialtone.components {
 .d-breadcrumbs {
-    --breadcrumbs-font-size: var(--dt-font-size-200);
+    --breadcrumbs-font-size: var(--dt-font-size-150);
     --breadcrumbs-line-height: var(--dt-font-line-height-300);
     --breadcrumbs-color-separator: var(--dt-color-foreground-muted);
     --breadcrumbs-color-text: var(--dt-color-link-muted);
@@ -30,15 +30,13 @@
     //  $  WRAPPER
     //  ----------------------------------------------------------------------------
 
-    > ol {
+    &__list {
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         box-sizing: border-box;
         margin: 0;
         padding: 0;
-        font-size: var(--breadcrumbs-font-size);
-        line-height: var(--breadcrumbs-line-height);
         list-style: none;
     }
 
@@ -47,10 +45,12 @@
     //  ----------------------------------------------------------------------------
     &__item {
         position: relative;
-        margin-inline: var(--dt-size-400) 0;
-        margin-block: 0;
         padding: 0;
+        font-size: var(--breadcrumbs-font-size);
+        line-height: var(--breadcrumbs-line-height);
         list-style: none;
+        margin-inline: var(--dt-size-400) 0;
+        margin-block: 0;
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
@@ -58,21 +58,13 @@
 
             &::before {
                 position: absolute;
-                inset-inline-end: var(--dt-size-450-negative);
-                margin-block-start: var(--dt-size-100-negative);
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
+                inset-inline-end: var(--dt-size-450-negative);
+                margin-block-start: var(--dt-size-100-negative);
             }
         }
 
-        .d-link {
-            color: var(--breadcrumbs-color-text);
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
 
         //  --  SELECTED STATE (CURRENT PAGE)
         &--selected {
@@ -86,5 +78,14 @@
             }
         }
     }
+
+    &__link {
+        color: var(--breadcrumbs-color-text);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }
 }

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

@@ -27,7 +27,7 @@
   --button-border-width: var(--dt-size-border-100);
   --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(
-    calc(var(--dt-size-400) - var(--dt-size-100)) - var(--button-border-width)
+    calc(var(--dt-size-350) - var(--dt-size-100)) - var(--button-border-width)
   ); // ((8 - 1) - border-width)
 
   --button-padding-x-xs: calc(
@@ -35,7 +35,7 @@
   ); // 8 minus border-width
 
   --button-padding-y-sm: calc(
-    var(--dt-size-400) - var(--button-border-width)
+    var(--dt-size-350) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-x-sm: calc(
@@ -78,6 +78,7 @@
   padding: var(--button-padding-y) var(--button-padding-x);
   color: var(--button-color-text);
   font: var(--button-typography);
+  font-weight: var(--dt-font-weight-medium);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
@@ -95,14 +96,14 @@
 
   //  --  STATES
   //  ------------------------------------------------------------------------
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-hover);
     --button-color-background: var(--dt-action-color-background-base-hover);
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-active);
     --button-color-background: var(--dt-action-color-background-base-active);
   }
@@ -112,17 +113,30 @@
     box-shadow: var(--dt-shadow-focus);
   }
 
-  &[disabled] {
-    --button-color-border: transparent !important;
-    --button-color-text: var(
-      --dt-action-color-foreground-disabled-default
-    ) !important;
-    --button-color-background: var(
-      --dt-action-color-background-disabled-default
-    ) !important;
+  &--disabled,
+  &:disabled {
+    --chroma-adjust-text: .08;
+    --chroma-adjust-background: .08;
+    --chroma-adjust-border: .08;
+    --opacity-adjust-text: 65%;
+    --opacity-adjust-background: 65%;
+    --opacity-adjust-border: 40%;
 
+    color:            color-mix(in oklch, oklch( from var(--button-color-text)       l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
+    background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
+    border-color:     color-mix(in oklch, oklch( from var(--button-color-border)     l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
     cursor: not-allowed;
     transition: none;
+    pointer-events: none;
+
+    &.d-btn--primary {
+      --opacity-adjust-text: 80%;
+    }
+
+    &.d-btn--muted {
+      --opacity-adjust-text: 50%;
+      --opacity-adjust-border: 50%;
+    }
   }
 }
 
@@ -132,14 +146,14 @@
   --button-color-text: var(--dt-action-color-foreground-muted-default);
   --button-border-radius: var(--dt-size-radius-circle);
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-active);
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
@@ -255,6 +269,36 @@
   --button-border-radius: var(--dt-button-size-radius-xl);
 }
 
+//  ============================================================================
+//  $   BUTTON LEADING/TRAILING
+//  ----------------------------------------------------------------------------
+.d-btn__leading,
+.d-btn__trailing {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  margin-block: calc(-1 * var(--button-padding-y));
+
+  .d-btn:disabled &,
+  .d-btn--disabled & {
+    opacity: .6;
+  }
+}
+
+.d-btn__leading {
+  order: -1;
+  margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-size-200);
+  border-start-start-radius: calc(var(--button-border-radius) - 1px);
+  border-end-start-radius: calc(var(--button-border-radius) - 1px);
+}
+
+.d-btn__trailing {
+  margin-inline: var(--dt-size-200) calc(-1 * var(--button-padding-x));
+  border-start-end-radius: calc(var(--button-border-radius) - 1px);
+  border-end-end-radius: calc(var(--button-border-radius) - 1px);
+  order: 2;
+}
+
 //  ============================================================================
 //  $   BUTTON LABEL
 //  ----------------------------------------------------------------------------
@@ -325,16 +369,16 @@
     --dt-action-color-background-base-primary-default
   );
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-primary-default);
     --button-color-background: var(
       --dt-action-color-background-base-primary-hover
     );
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-primary-default);
     --button-color-background: var(
       --dt-action-color-background-base-primary-active
@@ -348,14 +392,14 @@
   --button-color-text: var(--dt-action-color-foreground-muted-default);
   --button-color-border: var(--dt-action-color-border-muted-default);
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-active);
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
@@ -372,14 +416,14 @@
   --button-color-background: var(--dt-action-color-background-critical-default);
   --button-color-border: var(--dt-action-color-border-critical-default);
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-hover);
     --button-color-background: var(--dt-action-color-background-critical-hover);
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-active);
     --button-color-background: var(
       --dt-action-color-background-critical-active
@@ -400,7 +444,7 @@
       --dt-action-color-background-critical-primary-default
     );
 
-    &:hover:not([disabled]) {
+    &:hover:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-critical-primary-default
       );
@@ -409,9 +453,9 @@
       );
     }
 
-    &:active:not([disabled]),
-    &.d-btn--active:not([disabled]),
-    &.d-btn--active:active:not([disabled]) {
+    &:active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-critical-primary-default
       );
@@ -429,14 +473,14 @@
   --button-color-background: var(--dt-action-color-background-positive-default);
   --button-color-border: var(--dt-action-color-border-positive-default);
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--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]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-positive-active);
     --button-color-background: var(
       --dt-action-color-background-positive-active
@@ -457,7 +501,7 @@
       --dt-action-color-background-positive-primary-default
     );
 
-    &:hover:not([disabled]) {
+    &:hover:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-positive-primary-default
       );
@@ -466,9 +510,9 @@
       );
     }
 
-    &:active:not([disabled]),
-    &.d-btn--active:not([disabled]),
-    &.d-btn--active:active:not([disabled]) {
+    &:active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-positive-primary-default
       );
@@ -487,14 +531,14 @@
   --button-color-background: var(--dt-action-color-background-inverted-default);
   --button-color-border: var(--dt-action-color-border-inverted-default);
 
-  &:hover:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-hover);
     --button-color-background: var(--dt-action-color-background-inverted-hover);
   }
 
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:not(:disabled, .d-btn--disabled),
+  &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-active);
     --button-color-background: var(
       --dt-action-color-background-inverted-active
@@ -517,7 +561,7 @@
       --dt-action-color-background-inverted-primary-default
     );
 
-    &:hover:not([disabled]) {
+    &:hover:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-inverted-primary-hover
       );
@@ -526,9 +570,9 @@
       );
     }
 
-    &:active:not([disabled]),
-    &.d-btn--active:not([disabled]),
-    &.d-btn--active:active:not([disabled]) {
+    &:active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:not(:disabled, .d-btn--disabled),
+    &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
       --button-color-text: var(
         --dt-action-color-foreground-inverted-primary-active
       );
@@ -582,22 +626,6 @@
   .d-btn-loading();
 }
 
-//  $$  DISABLED STATE
-//  ----------------------------------------------------------------------------
-.d-btn--disabled {
-  --button-color-text: var(
-    --dt-action-color-foreground-disabled-default
-  ) !important;
-  --button-color-background: var(
-    --dt-action-color-background-disabled-default
-  ) !important;
-  --button-color-border: transparent !important;
-
-  cursor: not-allowed;
-  transition: none;
-  pointer-events: none;
-}
-
 //  $$  BRAND BUTTONS
 //  ----------------------------------------------------------------------------
 .d-btn--brand {
@@ -606,8 +634,7 @@
 
   display: flex;
 
-  &:hover:not([disabled]),
-  &:active:not([disabled]) {
+  &:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: oklch(from var(--dt-color-neutral-white) l c h / 0.9);
     --button-color-background: oklch(from var(--brand-color) calc(l - 0.05) c h);
   }
@@ -618,7 +645,7 @@
       0 0 0 0.25em oklch(from var(--brand-color) l c h / 0.9);
   }
 
-  &:active:not([disabled]) {
+  &:active:not(:disabled, .d-btn--disabled) {
     --button-color-background: oklch(from var(--brand-color) calc(l - 0.1) c h);
   }
 
@@ -692,12 +719,15 @@
 
   .d-popover,
   .d-popover div,
-  .d-popover &__omega {
+  .d-popover &__omega,
+  .d-popover &__end {
     block-size: 100%;
   }
 
   &__alpha,
-  &__omega {
+  &__omega,
+  &__start,
+  &__end {
     position: relative;
 
     &:focus-visible {
@@ -705,12 +735,27 @@
     }
   }
 
-  &__alpha {
+  &__alpha,
+  &__start {
     flex-grow: 1;
     padding-inline-end: calc(var(--button-padding-x) + var(--dt-size-200));
+
+    &:not(.d-btn--outlined) {
+      border-inline-end: 0;
+    }
+
+    &:disabled:not(.d-btn--outlined),
+    &:disabled:not(.d-btn--primary),
+    &.d-btn--primary,
+    &.d-btn--outlined {
+      border-inline-end: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
   }
 
-  &__omega {
+  &__omega,
+  &__end {
     // vertical divider between the two buttons
     &::before {
       position: absolute;
@@ -724,20 +769,27 @@
       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) & {
+      // 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) & {
+      .d-split-btn:has(:focus-visible,
+      :hover,
+      .d-btn--active) & {
         opacity: 0;
       }
 
       // DO NOT hide divider line for primary, outlined, or disabled buttons
       .d-split-btn:has(:disabled) &,
-      .d-split-btn:has(.d-btn--outlined:focus-visible, .d-btn--outlined:hover, .d-btn--outlined.d-btn--active) &,
-      .d-split-btn:has(.d-btn--primary:focus-visible, .d-btn--primary:hover, .d-btn--primary.d-btn--active) & {
+      .d-split-btn:has(.d-btn--outlined:focus-visible,
+      .d-btn--outlined:hover,
+      .d-btn--outlined.d-btn--active) &,
+      .d-split-btn:has(.d-btn--primary:focus-visible,
+      .d-btn--primary:hover,
+      .d-btn--primary.d-btn--active) & {
         opacity: var(--dt-opacity-600);
       }
     }
@@ -752,59 +804,51 @@
     &.d-btn--outlined::before {
       inset-block: var(--dt-size-50-negative);
     }
-  }
-
-  &__alpha:disabled:not(.d-btn--outlined),
-  &__alpha:disabled:not(.d-btn--primary),
-  &__alpha.d-btn--primary,
-  &__alpha.d-btn--outlined {
-    border-inline-end: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  &__alpha:not(.d-btn--outlined) {
-    border-inline-end: 0;
-  }
 
-  &__omega:not(.d-btn--outlined) {
-    border-inline-start: 0;
-  }
+    &:not(.d-btn--outlined) {
+      border-inline-start: 0;
+    }
 
-  &__omega:not(.d-btn--outlined, .d-btn--primary) > * {
-    // yes, I'm pushing a half-pixel over just for this variant
-    // to ensure icon is centered
-    transform: translateX(var(--dt-size-50));
-  }
+    &:not(.d-btn--outlined, .d-btn--primary) > * {
+      // yes, I'm pushing a half-pixel over just for this variant
+      // to ensure icon is centered
+      transform: translateX(var(--dt-size-50));
+    }
 
-  &__omega:disabled:not(.d-btn--outlined),
-  &__omega:disabled:not(.d-btn--primary),
-  &__omega.d-btn--primary,
-  &__omega.d-btn--outlined {
-    border-inline-start: 0;
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+    &:disabled:not(.d-btn--outlined),
+    &:disabled:not(.d-btn--primary),
+    &.d-btn--primary,
+    &.d-btn--outlined {
+      border-inline-start: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
   }
 
   // adjust x-padding for icon-only button at each size
-  &__omega--xs.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-300);
+  &__omega--xs,
+  &__end--xs {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
   }
 
-  &__omega--sm.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-300);
+  &__omega--sm,
+  &__end--sm {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
   }
 
-  &__omega--md.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-350);
+  &__omega--md,
+  &__end--md {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-350); }
   }
 
-  &__omega--lg.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-400);
+  &__omega--lg,
+  &__end--lg {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-400); }
   }
 
-  &__omega--xl.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-450);
+  &__omega--xl,
+  &__end--xl {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-450); }
   }
 }
 

package/lib/build/less/components/card.less

@@ -53,6 +53,7 @@
 //  ----------------------------------------------------------------------------
 .d-card__footer {
   display: flex;
+  gap: var(--dt-size-400);
   align-items: center;
   padding: 0 var(--dt-size-500) var(--dt-size-500);
 }

package/lib/build/less/components/codeblock.less

@@ -13,16 +13,40 @@
 
 @layer dialtone.components {
 .d-codeblock {
-    display: block;
-    padding: var(--dt-size-400);
-    color: var(--dt-color-foreground-secondary);
-    font-size: var(--dt-font-size-200);
-    font-family: var(--dt-font-family-mono);
-    line-height: var(--dt-font-line-height-400);
-    white-space: pre-wrap;
-    background-color: var(--dt-color-surface-secondary);
-    border: var(--dt-size-100) solid;
-    border-color: var(--dt-color-border-subtle);
-    border-radius: var(--dt-size-radius-400);
+    margin: 0;
+    color: var(--dt-color-foreground-tertiary);
+    font: inherit;
+
+    &--bordered {
+        padding: var(--dt-size-450);
+        background-color: var(--dt-color-surface-secondary);
+        border: var(--dt-size-100) solid;
+        border-color: var(--dt-color-border-subtle);
+        border-radius: var(--dt-size-radius-400);
+    }
+
+    &__code {
+        display: block;
+        font: var(--dt-text-code-sm);
+        line-height: var(--dt-text-line-height-300);
+        white-space: pre-wrap;
+        text-box-trim: trim-both;
+
+        &--xs {
+            font: var(--dt-text-code-xs);
+        }
+
+        &--sm {
+            font: var(--dt-text-code-sm);
+        }
+
+        &--md {
+            font: var(--dt-text-code-md);
+        }
+
+        &--lg {
+            font: var(--dt-text-code-lg);
+        }
+    }
 }
 }