@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.2

package/lib/build/less/components/modal.less

@@ -95,7 +95,7 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
-    --modal-dialog-padding: var(--dt-size-600);
+    --modal-dialog-padding: var(--dt-spacing-400);
     --modal-dialog-color-background: var(--dt-color-surface-primary);
     --modal-dialog-color-border: var(--dt-color-border-subtle);
     --modal-dialog-color-text: var(--dt-color-foreground-primary);
@@ -111,7 +111,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: var(--dt-size-600); // 32
+    padding: var(--dt-spacing-400); // 32
     background-color: var(--modal-backdrop-color-background);
     backface-visibility: hidden;
     visibility: hidden;
@@ -141,10 +141,10 @@
   z-index: var(--zi-hide);
   display: flex;
   flex-direction: column;
-  gap: var(--dt-size-500); //
+  gap: var(--dt-spacing-200); //
   box-sizing: border-box;
   inline-size: 100%;
-  max-inline-size: var(--dt-size-1020); // 628
+  max-inline-size: var(--dt-layout-1000); // 628
   max-block-size: 100%;
   padding: var(--modal-dialog-padding); // 32
   overflow-block: auto;
@@ -152,8 +152,8 @@
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-400);
   background-color: var(--modal-dialog-color-background);
-  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
-  border-radius: var(--dt-size-500);
+  border: var(--dt-size-border-100) solid var(--modal-dialog-color-border);
+  border-radius: var(--dt-size-radius-500);
   box-shadow: var(--modal-dialog-shadow);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
   backface-visibility: hidden;
@@ -184,11 +184,11 @@
 //  $   MODAL AREAS
 //  ----------------------------------------------------------------------------
 .d-modal__footer {
-  --modal-footer-padding: var(--dt-size-550); // 24
+  --modal-footer-padding: var(--dt-spacing-300); // 24
 
   display: flex;
   flex-direction: row-reverse;
-  gap: var(--dt-size-400);
+  gap: var(--dt-spacing-100);
   align-items: center;
 }
 
@@ -199,7 +199,7 @@
 //  $$  HEADER
 //  ----------------------------------------------------------------------------
 .d-modal__header {
-  --modal-header-padding: var(--dt-size-550); // 24
+  --modal-header-padding: var(--dt-spacing-300); // 24
 
   margin: 0 !important;
   padding-inline-end: var(--modal-header-padding);
@@ -221,8 +221,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  inset-block-start: var(--dt-size-400);
-  inset-inline-end: var(--dt-size-400);
+  inset-block-start: var(--dt-spacing-100);
+  inset-inline-end: var(--dt-spacing-100);
   margin: 0 !important;
 }
 
@@ -231,22 +231,22 @@
 //  $   BANNERS
 //  ----------------------------------------------------------------------------
 .d-modal__banner {
-  --modal-banner-padding-y: var(--dt-size-500);
-  --modal-banner-padding-x: var(--dt-size-600);
+  --modal-banner-padding-y: var(--dt-spacing-200);
+  --modal-banner-padding-x: var(--dt-spacing-400);
   --modal-banner-color-background: var(--dt-color-surface-warning);
 
   position: relative;
   box-sizing: border-box;
   inline-size: 100%;
-  max-inline-size: var(--dt-size-1020); // 628
+  max-inline-size: var(--dt-layout-1000); // 628
   padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
   color: var(--dt-color-foreground-primary);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
   background-color: var(--modal-banner-color-background);
-  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
+  border: var(--dt-size-border-100) solid var(--modal-dialog-color-border);
   border-block-end-width: 0;
-  border-radius: var(--dt-size-500) var(--dt-size-500) 0 0;
+  border-radius: var(--dt-size-radius-500) var(--dt-size-radius-500) 0 0;
   box-shadow: var(--modal-dialog-shadow);
 
   &--warning {
@@ -310,21 +310,21 @@
   }
 
   .d-modal__header {
-    padding: var(--dt-size-600) var(--dt-size-600) 0; // 32
+    padding: var(--dt-spacing-400) var(--dt-spacing-400) 0; // 32
   }
 
   .d-modal__content {
-    padding-inline: var(--dt-size-600) 0; // 32
+    padding-inline: var(--dt-spacing-400) 0; // 32
   }
 
   .d-modal__footer {
     margin-block-start: auto !important;
-    padding: 0 var(--dt-size-550) var(--dt-size-600) var(--dt-size-600); // 0 24 32 32
+    padding: 0 var(--dt-spacing-300) var(--dt-spacing-400) var(--dt-spacing-400); // 0 24 32 32
   }
 
   .d-modal__banner {
     max-inline-size: unset;
-    padding: var(--dt-size-450) var(--dt-size-600); // 12 32
+    padding: var(--dt-spacing-150) var(--dt-spacing-400); // 12 32
     border-radius: 0;
   }
 }

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

@@ -20,10 +20,10 @@
     --notice-color-text: var(--dt-color-foreground-primary);
     --notice-color-icon: var(--notice-color-text);
     --notice-color-shadow: var(--dt-color-border-subtle);
-    --notice-padding: var(--dt-size-500);
+    --notice-padding: var(--dt-spacing-200);
     --notice-line-height: var(--dt-font-line-height-300);
-    --notice-border-radius: var(--dt-size-400);
-    --notice-box-shadow: 0 0 0 var(--dt-size-100) var(--notice-color-shadow) inset;
+    --notice-border-radius: var(--dt-size-radius-400);
+    --notice-box-shadow: 0 0 0 var(--dt-size-border-100) var(--notice-color-shadow) inset;
 
     //  Base Styles
     //  ------------------------------------------------------------------------
@@ -31,7 +31,7 @@
     align-items: start;
     box-sizing: border-box;
     inline-size: 100%;
-    max-inline-size: var(--dt-size-1020);
+    max-inline-size: var(--dt-layout-1000);
     padding: var(--notice-padding);
     color: var(--notice-color-text);
     font: var(--dt-text-body-md);
@@ -50,8 +50,8 @@
     display: flex;
     flex: 1 auto;
     flex-direction: column;
-    margin-inline-end: var(--dt-size-500);
-    gap: var(--dt-size-400);
+    margin-inline-end: var(--dt-spacing-200);
+    gap: var(--dt-spacing-100);
     align-self: center;
 }
 
@@ -60,7 +60,7 @@
 .d-notice__actions {
     display: flex;
     flex: 0 auto;
-    gap: var(--dt-size-400);
+    gap: var(--dt-spacing-100);
     align-items: center;
     align-self: start;
 
@@ -79,15 +79,15 @@
     display: flex;
     flex: 0 auto;
     color: var(--notice-color-icon);
-    margin-inline-end: var(--dt-size-450);
-    margin-block-start: var(--dt-size-200);
+    margin-inline-end: var(--dt-spacing-150);
+    margin-block-start: var(--dt-spacing-25);
 
     &--has-title {
-        margin-block-start: var(--dt-size-0);
+        margin-block-start: var(--dt-spacing-0);
     }
 
     .d-banner & {
-        margin-inline-end: var(--dt-size-400);
+        margin-inline-end: var(--dt-spacing-100);
     }
 }
 

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

@@ -17,7 +17,7 @@
 .d-pagination {
   display: flex;
   flex-direction: row;
-  gap: var(--dt-size-200);
+  gap: var(--dt-spacing-25);
   align-items: center;
 }
 
@@ -25,7 +25,7 @@
 //  $   PREV & NEXT BUTTONS
 //  ----------------------------------------------------------------------------
 .d-pagination__button {
-  padding-inline: var(--dt-size-400);
+  padding-inline: var(--dt-spacing-100);
 }
 
 //  ============================================================================
@@ -36,8 +36,8 @@
 }
 
 .d-pagination__item-label {
-  letter-spacing: var(--dt-size-100-negative);
-  padding-inline-end: var(--dt-size-100);
+  letter-spacing: var(--dt-spacing-1-negative);
+  padding-inline-end: var(--dt-spacing-1);
 }
 
 //  ============================================================================
@@ -48,7 +48,7 @@
 }
 
 .d-pagination__separator-icon {
-  inline-size: var(--dt-size-550);
+  inline-size: calc(var(--dt-layout-25) * 1.5);
   color: var(--dt-color-foreground-tertiary);
   text-align: center;
 }

package/lib/build/less/components/popover.less

@@ -26,8 +26,8 @@
     //  $$  CSS CUSTOM PROPERTIES
     //  ----------------------------------------------------------------------------
     --popover-color-background: var(--dt-color-surface-secondary);
-    --popover-border-width: var(--dt-size-100);
-    --popover-border-radius: var(--dt-size-400);
+    --popover-border-width: var(--dt-size-border-100);
+    --popover-border-radius: var(--dt-size-radius-400);
     --popover-color-border: var(--dt-color-border-subtle);
     --popover-shadow: var(--dt-shadow-card);
 
@@ -72,7 +72,7 @@
     align-items: center;
     justify-content: flex-end;
     inline-size: 100%;
-    padding-block: var(--dt-size-350) var(--dt-size-350);
+    padding-block: var(--dt-spacing-75) var(--dt-spacing-75);
     overflow: auto;
     font-weight: var(--dt-font-weight-semi-bold);
     font-size: var(--dt-font-size-200);
@@ -83,8 +83,8 @@
     }
 
     &__close-button {
-      margin-inline-end: var(--dt-size-350);
-      padding: var(--dt-size-350);
+      margin-inline-end: var(--dt-spacing-75);
+      padding: var(--dt-spacing-75);
       border-color: transparent;
     }
   }

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

@@ -37,8 +37,8 @@
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        inline-size: var(--dt-size-500); // 16
-        block-size: var(--dt-size-500); // 16
+        inline-size: var(--dt-layout-25); // 16
+        block-size: var(--dt-layout-25); // 16
 
         //  [2]  Now re-style the checkboxes and radios
         //  --------------------------------------------------------------------
@@ -90,7 +90,7 @@
 .d-checkbox-group,
 .d-radio-group {
     display: inline-flex;
-    gap: var(--dt-size-400); // 8
+    gap: var(--dt-spacing-100); // 8
     vertical-align: top;
     cursor: pointer;
 }
@@ -109,6 +109,7 @@
 .d-input-group__fieldset {
     display: flex;
     flex-direction: column;
+    gap: var(--dt-spacing-50);
     align-items: flex-start;
 
     &__label {
@@ -117,13 +118,13 @@
         align-items: baseline;
         justify-content: space-between;
         box-sizing: border-box;
-        margin-block-end: var(--dt-size-300);
         color: var(--dt-color-foreground-secondary);
         font-weight: var(--dt-font-weight-semi-bold);
         font-size: var(--dt-font-size-200);
         font-family: inherit;
         line-height: var(--dt-font-line-height-300);
         overflow-wrap: break-word;
+        margin-block-end: var(--dt-spacing-50);
     }
 }
 
@@ -136,7 +137,7 @@
 .d-radio__input {
     display: flex;
     align-self: flex-start;
-    padding-block-start: calc(var(--dt-size-300) + var(--dt-size-50));
+    padding-block-start: calc(var(--dt-spacing-50) + calc(var(--dt-spacing-1) / 2));
 }
 
 
@@ -163,14 +164,14 @@
     cursor: pointer;
 
     &.d-text-label--sm {
-        margin-block-start: var(--dt-size-100); // sue me
+        margin-block-start: var(--dt-spacing-1); // sue me
     }
 }
 
 .d-checkbox__messages,
 .d-radio__messages {
-    margin-block-start: var(--dt-size-200-negative);
-    margin-inline-start: var(--dt-size-550);
+    margin-block-start: var(--dt-spacing-25-negative);
+    margin-inline-start: var(--dt-spacing-300);
 }
 
 .d-checkbox__description {
@@ -283,7 +284,7 @@
             --check-radio-color-background: var(--check-radio-color-background-checked);
 
             border-color: transparent;
-            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
+            box-shadow: inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
 
             // Disabled
             &[disabled] {
@@ -294,7 +295,7 @@
         &:focus,
         &:focus-visible,
         &:checked:focus-visible {
-          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
+          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
         }
 
         &--disabled:checked {

package/lib/build/less/components/rich-text-editor.less

@@ -1,13 +1,13 @@
 @layer dialtone.components {
 .d-rich-text-editor {
   &__code-block {
-    padding: var(--dt-size-400);
+    padding: var(--dt-spacing-100);
     font: var(--dt-typography-code-md);
     background: var(--dt-color-surface-secondary);
   }
 
   code:not(.d-rich-text-editor__code-block > code) {
-    padding: var(--dt-size-200);
+    padding: var(--dt-spacing-25);
     color: var(--dt-color-foreground-warning);
     font: var(--dt-typography-code-md);
     background-color: var(--dt-color-surface-secondary-opaque);
@@ -27,7 +27,7 @@
     }
 
     ul, ol {
-      padding-inline-start: var(--dt-size-525);
+      padding-inline-start: var(--dt-spacing-250);
     }
 
     ul > li {
@@ -40,7 +40,7 @@
 
     blockquote {
       margin-inline-start: 0;
-      padding-inline-start: var(--dt-size-400);
+      padding-inline-start: var(--dt-spacing-100);
       border-inline-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
     }
 
@@ -49,29 +49,29 @@
     }
 
     td {
-      padding-inline-start: var(--dt-size-200);
+      padding-inline-start: var(--dt-spacing-25);
       border: var(--dt-size-border-100) solid var(--dt-color-foreground-primary);
     }
   }
 }
 
 .d-rich-text-editor-bubble-menu__button-stack {
-  padding: var(--dt-size-300);
+  padding: var(--dt-spacing-50);
 }
 
 .d-suggestion-list__container {
-  max-block-size: var(--dt-size-875);
+  max-block-size: var(--dt-layout-350);
 }
 
 .d-suggestion-list {
   position: relative;
-  min-inline-size: var(--dt-size-925);
-  max-inline-size: var(--dt-size-975);
-  padding: var(--dt-size-300);
+  min-inline-size: var(--dt-layout-500);
+  max-inline-size: var(--dt-layout-700);
+  padding: var(--dt-spacing-50);
 }
 
 .d-suggestion-list__item {
-  border: var(--dt-size-100) solid transparent;
+  border: var(--dt-size-border-100) solid transparent;
 }
 
 .d-mention-suggestion__name {
@@ -90,7 +90,7 @@
 
 .d-mention-suggestion__presence {
   min-inline-size: fit-content;
-  margin-inline-start: var(--dt-size-200);
+  margin-inline-start: var(--dt-spacing-25);
 }
 
 .d-mention-suggestion__status {
@@ -98,7 +98,7 @@
   color: var(--dt-color-foreground-tertiary);
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-inline-start: var(--dt-size-100);
+  margin-inline-start: var(--dt-spacing-1);
 }
 
 .d-mention-suggestion__divider {

package/lib/build/less/components/scrollbar.less

@@ -11,11 +11,11 @@
 
   .os-scrollbar {
     &.os-scrollbar-horizontal .os-scrollbar-handle:hover {
-      block-size: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+      block-size: calc(var(--os-handle-perpendicular-size) + var(--dt-spacing-25));
     }
 
     &.os-scrollbar-vertical .os-scrollbar-handle:hover {
-      inline-size: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+      inline-size: calc(var(--os-handle-perpendicular-size) + var(--dt-spacing-25));
     }
 
     .os-scrollbar-handle {

package/lib/build/less/components/segmented-control.less

@@ -12,7 +12,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-segmented-control {
-  --padding-segmented-control: var(--dt-size-200);
+  --padding-segmented-control: var(--dt-spacing-25);
   --radius-segmented-control-item: var(--dt-button-size-radius-md);
   --radius-segmented-control: calc(var(--radius-segmented-control-item) + var(--padding-segmented-control));
 
@@ -37,27 +37,27 @@
   }
 
   &--xs {
-    --padding-segmented-control: var(--dt-size-100);
+    --padding-segmented-control: var(--dt-spacing-1);
     --radius-segmented-control-item: var(--dt-button-size-radius-xs);
   }
 
   &--sm {
-    --padding-segmented-control: var(--dt-size-200);
+    --padding-segmented-control: var(--dt-spacing-25);
     --radius-segmented-control-item: var(--dt-button-size-radius-sm);
   }
 
   &--md {
-    --padding-segmented-control: var(--dt-size-200);
+    --padding-segmented-control: var(--dt-spacing-25);
     --radius-segmented-control-item: var(--dt-button-size-radius-md);
   }
 
   &--lg {
-    --padding-segmented-control: var(--dt-size-300);
+    --padding-segmented-control: var(--dt-spacing-50);
     --radius-segmented-control-item: var(--dt-button-size-radius-lg);
   }
 
   &--xl {
-    --padding-segmented-control: var(--dt-size-300);
+    --padding-segmented-control: var(--dt-spacing-50);
     --radius-segmented-control-item: var(--dt-button-size-radius-xl);
   }
 

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

@@ -21,26 +21,31 @@
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
   --select-color-border: var(--dt-inputs-color-border-default);
-  --select-notch-position-right: var(--dt-size-400);
+  --select-notch-position-right: var(--dt-spacing-100);
 
   position: relative;
   inline-size: stretch;
 
   //  --  Arrows
   &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 3.5);
+    --select-arrow-size: var(--dt-icon-size-200);
 
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--select-notch-position-right);
-    inline-size: var(--select-arrow-size);
-    block-size: var(--select-arrow-size);
     background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M6.55798 1.89155C6.80205 1.64748 7.19778 1.64748 7.44186 1.89155L10.3585 4.80822C10.6026 5.0523 10.6026 5.44803 10.3585 5.6921C10.1144 5.93618 9.71872 5.93618 9.47464 5.6921L6.99992 3.21738L4.52519 5.6921C4.28112 5.93618 3.88539 5.93618 3.64131 5.6921C3.39723 5.44803 3.39723 5.0523 3.64131 4.80822L6.55798 1.89155ZM3.64131 8.30822C3.88539 8.06414 4.28112 8.06414 4.52519 8.30822L6.99992 10.7829L9.47464 8.30822C9.71872 8.06414 10.1144 8.06414 10.3585 8.30822C10.6026 8.5523 10.6026 8.94803 10.3585 9.1921L7.44186 12.1088C7.19778 12.3528 6.80205 12.3528 6.55798 12.1088L3.64131 9.1921C3.39723 8.94803 3.39723 8.5523 3.64131 8.30822Z' fill='gray'/> </svg>");
     background-repeat: no-repeat;
     background-size: 100%;
     transform: translateY(-50%);
     content: '';
     pointer-events: none;
+    inset-block-start: 50%;
+    inset-inline-end: var(--select-notch-position-right);
+    inline-size: var(--select-arrow-size);
+    block-size: var(--select-arrow-size);
+  }
+
+  &:where(&--xs)::after {
+    // the 50% paired with -50% translate doesn't quite achieve centering for xs
+    inset-block-start: calc(50% + var(--dt-spacing-1));
   }
 }
 
@@ -48,7 +53,7 @@
 //  ----------------------------------------------------------------------------
 .d-select__input {
   --select-color-border: var(--input-color-border);
-  --select-notch-padding-right: var(--dt-size-550);
+  --select-notch-padding-right: var(--dt-spacing-300);
 
   // Use shared style properties of d-input (<input>, <textarea>)
   ._input();
@@ -108,12 +113,12 @@
   .d-select__input {
     #d-internal__input-and-select-lg();
 
-    --select-notch-padding-right: calc(var(--dt-size-300) * 9);
+    --select-notch-padding-right: var(--dt-spacing-450);
   }
 
   &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
-    --select-notch-position-right: var(--dt-size-450);
+    --select-arrow-size: var(--dt-icon-size-400);
+    --select-notch-position-right: var(--dt-spacing-150);
   }
 }
 
@@ -121,12 +126,12 @@
   .d-select__input {
     #d-internal__input-and-select-xl();
 
-    --select-notch-padding-right: calc(var(--dt-size-300) * 9);
+    --select-notch-padding-right: var(--dt-spacing-450);
   }
 
   &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
-    --select-notch-position-right: var(--dt-size-450);
+    --select-arrow-size: var(--dt-icon-size-400);
+    --select-notch-position-right: var(--dt-spacing-150);
   }
 }
 

package/lib/build/less/components/skeleton.less

@@ -68,7 +68,7 @@
   }
 
   &__shape {
-    margin-inline-end: var(--dt-size-400);
+    margin-inline-end: var(--dt-spacing-100);
   }
 
   &__paragraph-container {
@@ -85,10 +85,10 @@
   inline-size: 100%;
 
   .d-skeleton-text {
-    margin-block-end: var(--dt-size-450);
+    margin-block-end: var(--dt-spacing-150);
 
     &:last-child {
-      margin-block-end: var(--dt-size-0);
+      margin-block-end: var(--dt-spacing-0);
     }
   }
 }
@@ -97,7 +97,7 @@
 //  @   SKELETON TEXT
 //  ----------------------------------------------------------------------------
 .d-skeleton-text {
-  block-size: var(--dt-size-400);
+  block-size: var(--dt-spacing-100);
   border-radius: var(--dt-size-radius-200);
 }