@dialpad/dialtone-css 8.74.0-next.1 → 8.74.0-next.3

package/lib/build/js/dialtone_migration_helper/tests/base-to-semantic-test-examples.vue

@@ -150,7 +150,7 @@
 /* border-color longhand */
 .test-border-longhand {
   border-color: var(--dt-color-red-600);
-  border-top-color: var(--dt-color-green-700);
+  border-block-start-color: var(--dt-color-green-700);
 }
 
 /* border shorthand with size token before color */

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);
   }
 

package/lib/build/less/components/datepicker.less

@@ -32,7 +32,7 @@
 
   &__month-year-title {
     font-weight: var(--dt-font-weight-normal);
-    font-size: var(--dt-font-size-100);
+    font-size: var(--dt-font-size-150);
     line-height: var(--dt-font-line-height-300);
     text-transform: uppercase;
   }
@@ -40,11 +40,6 @@
   &__nav-btn {
     inline-size: var(--datepicker-button-size);
     block-size: var(--datepicker-button-size);
-
-    &:disabled {
-      background-color: var(--dt-color-neutral-transparent);
-      opacity: var(--dt-opacity-900);
-    }
   }
 
   &__weekday {
@@ -78,11 +73,6 @@
       color: var(--dt-action-color-foreground-base-primary-default);
       background: var(--dt-action-color-background-base-primary-default);
     }
-
-    &--disabled {
-      background-color: var(--dt-color-neutral-transparent);
-      opacity: var(--dt-opacity-900);
-    }
   }
 }
 }

package/lib/build/less/components/loader.less

@@ -19,5 +19,16 @@
 
 .d-loader__icon {
   animation: d-loading-circle 900ms infinite linear;
+
+  // Comet fade. Black is an intentional choice and only used for masking.
+  mask-image: conic-gradient(
+    from 270deg,
+    black 0deg,
+    black 105deg,
+    transparent 170deg,
+    transparent 180deg,
+    black 234deg,
+    black 360deg
+  );
 }
 }

package/lib/build/less/components/pagination.less

@@ -26,11 +26,6 @@
 //  ----------------------------------------------------------------------------
 .d-pagination__button {
   padding-inline: var(--dt-size-400);
-
-  &:disabled {
-    color: var(--dt-color-foreground-secondary-inverted);
-    background-color: var(--dt-color-neutral-transparent);
-  }
 }
 
 //  ============================================================================

package/lib/build/less/components/progress_circle.less

@@ -0,0 +1,60 @@
+//
+//  DIALTONE
+//  COMPONENTS: PROGRESS CIRCLE
+//
+//  https://dialtone.dialpad.com/components/progress-circle
+
+@layer dialtone.components {
+.d-progress-circle {
+  --progress-size: var(--dt-icon-size-500);
+  --progress-color: var(--dt-color-border-bold);
+  --progress-size-stroke: 3.25;
+
+  block-size: var(--progress-size);
+  inline-size: var(--progress-size);
+
+  &--size-100 { --progress-size: var(--dt-icon-size-100); }
+  &--size-200 { --progress-size: var(--dt-icon-size-200); }
+  &--size-300 { --progress-size: var(--dt-icon-size-300); }
+  &--size-400 { --progress-size: var(--dt-icon-size-400); }
+  &--size-500 { --progress-size: var(--dt-icon-size-500); }
+  &--size-600 { --progress-size: var(--dt-icon-size-600); }
+  &--size-700 { --progress-size: var(--dt-icon-size-700); }
+  &--size-800 { --progress-size: var(--dt-icon-size-800); }
+
+  &--brand { --progress-color: var(--dt-color-border-brand); }
+  &--critical { --progress-color: var(--dt-color-border-critical); }
+  &--positive { --progress-color: var(--dt-color-border-success); }
+  &--warning { --progress-color: var(--dt-color-border-warning); }
+  // AI fill gradient is an SVG <linearGradient> applied in the Vue component;
+  // the track intentionally keeps the default border color.
+  &--ai { --progress-color: var(--dt-color-border-bold); }
+  &--info { --progress-color: var(--dt-color-blue-600); } // TODO: I still have to create "info" design tokens
+}
+
+.d-progress-circle__bar {
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.d-progress-circle__shape {
+  &--track {
+    transition: stroke-dasharray var(--td200) linear, stroke-dashoffset var(--td200) linear;
+    stroke: color-mix(in oklch, var(--progress-color) 25%, var(--dt-color-surface-primary));
+    stroke-dasharray: var(--track-dasharray);
+    stroke-dashoffset: var(--track-dashoffset);
+    stroke-linecap: round;
+  }
+
+  &--fill {
+    transform: rotate(var(--fill-rotate));
+    transform-origin: center;
+    transition: stroke-dashoffset var(--td200) linear;
+    stroke: var(--progress-color);
+    stroke-dasharray: var(--stroke-dasharray);
+    stroke-dashoffset: var(--fill-dashoffset);
+    stroke-linecap: round;
+  }
+}
+}

package/lib/build/less/components/radio-checkbox.less

@@ -91,6 +91,7 @@
 .d-radio-group {
     display: inline-flex;
     gap: var(--dt-size-400); // 8
+    vertical-align: top;
     cursor: pointer;
 }
 //  --  Wrapper Disabled State
@@ -135,7 +136,7 @@
 .d-radio__input {
     display: flex;
     align-self: flex-start;
-    padding-block-start: var(--dt-size-300);
+    padding-block-start: calc(var(--dt-size-300) + var(--dt-size-50));
 }
 
 
@@ -155,9 +156,15 @@
     flex: 1 auto;
     flex-direction: column;
     align-items: flex-start;
+    align-self: flex-end;
     color: var(--dt-color-foreground-primary);
-    font: var(--dt-typography-label-md-plain);
+    font: var(--dt-text-label-md);
+    font-weight: var(--dt-font-weight-normal);
     cursor: pointer;
+
+    &.d-text-label--sm {
+        margin-block-start: var(--dt-size-100); // sue me
+    }
 }
 
 .d-checkbox__messages,

package/lib/build/less/components/tabs.less

@@ -14,6 +14,30 @@
 //  $   WRAPPERS
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
+.d-tab-neux {
+    inline-size: 100%;
+
+    [role="tabpanel"] {
+        box-shadow: none;
+    }
+
+    > .d-tablist {
+        --tablist-padding-bottom: var(--dt-size-400);
+
+        padding-block-end: var(--tablist-padding-bottom);
+
+        &--xs { --tablist-padding-bottom: var(--dt-size-350); }
+        &--sm { --tablist-padding-bottom: var(--dt-size-400); }
+        &--md { /* default */ }
+        &--lg { --tablist-padding-bottom: var(--dt-size-400); }
+        &--xl { --tablist-padding-bottom: var(--dt-size-450); }
+    }
+
+    .d-tablist--no-border {
+        border-block-end: 0;
+    }
+}
+
 .d-tablist {
     //  --  COMPONENT CSS VARS
     //  ------------------------------------------------------------------------
@@ -28,7 +52,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--dt-size-300);
-    align-items: baseline;
+    align-items: center;
 
     &:focus {
         outline: 0;
@@ -131,6 +155,55 @@
             border-radius: var(--tab-border-radius);
         }
     }
+
+    .d-tablist--lg & {
+        --tab-padding-x: calc(var(--dt-size-500) - var(--dt-size-border-100));
+        --tab-padding-y: calc((var(--dt-size-400) + var(--dt-size-200)) - var(--dt-size-border-100));
+        --tab-border-radius: var(--dt-button-size-radius-lg);
+        --tab-font-style: var(--dt-typography-button-lg);
+
+        .d-tablist--no-border &:not(.d-tab--selected) {
+            border-radius: var(--tab-border-radius);
+        }
+    }
+
+    .d-tablist--xl & {
+        --tab-padding-x: calc(var(--dt-size-500) - var(--dt-size-border-100));
+        --tab-padding-y: calc(var(--dt-size-450) - var(--dt-size-border-100));
+        --tab-border-radius: var(--dt-button-size-radius-xl);
+        --tab-font-style: var(--dt-typography-button-xl);
+
+        .d-tablist--no-border &:not(.d-tab--selected) {
+            border-radius: var(--tab-border-radius);
+        }
+    }
+
+    //  ============================================================================
+    //  $   LABEL
+    //  ----------------------------------------------------------------------------
+    &__label {
+    //   font-weight: normal;
+
+      transition: font-weight var(--ttf-out) var(--td50);
+
+      .d-btn--active &,
+      .d-btn--outlined &,
+      .d-tab--is-selected & {
+        font-weight: var(--dt-font-weight-bold) !important;
+      }
+
+      &[data-content]::after {
+          display: block;
+          font-weight: var(--dt-font-weight-bold);
+          white-space: nowrap;
+          text-align: center;
+          background-color: #666;
+          visibility: hidden;
+          content: attr(data-content);
+          block-size: 0;
+      }
+    }
+
 }
 
 //  ============================================================================
@@ -161,6 +234,20 @@
     }
 }
 
+.d-tab--is-selected {
+    position: relative;
+    z-index: var(--zi-selected);
+
+    &::after {
+        position: absolute;
+        background-color: var(--dt-action-color-foreground-base-default);
+        content: '';
+        block-size: var(--dt-size-200);
+        inset-block-start: calc(calc(100% + var(--tablist-padding-bottom)) - var(--dt-size-100));
+        inset-inline: 0;
+    }
+}
+
 //  ============================================================================
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------

package/lib/build/less/components/toggle.less

@@ -25,7 +25,7 @@
   //  ------------------------------------------------------------------------
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
-  --toggle-color-background: oklch(from var(--dt-color-surface-bold) 0.738deg c h);
+  --toggle-color-background: oklch(from var(--dt-color-surface-bold) 0.738 c h);
   --toggle-size-height: var(--dt-size-550); // 24
   --toggle-size-width: var(--dt-size-650); // 48
   --toggle-size-icon: var(--dt-size-500); // 16

package/lib/build/less/dialtone.less

@@ -47,6 +47,7 @@
 @import 'components/banner';
 @import 'components/pagination';
 @import 'components/popover';
+@import 'components/progress_circle';
 @import 'components/radio-checkbox';
 @import 'components/rich-text-editor';
 @import 'components/scroller';