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

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

package/lib/build/less/components/stack.less

@@ -40,61 +40,21 @@
 }
 
 .gap-options() {
-  &-gap-50 {
-    .d-stack--gap-50();
-  }
-
-  &-gap-100 {
-    .d-stack--gap-100();
-  }
-
-  &-gap-200 {
-    .d-stack--gap-200();
-  }
-
-  &-gap-300 {
-    .d-stack--gap-300();
-  }
-
-  &-gap-350 {
-    .d-stack--gap-350();
-  }
-
-  &-gap-400 {
-    .d-stack--gap-400();
-  }
-
-  &-gap-450 {
-    .d-stack--gap-450();
-  }
-
-  &-gap-500 {
-    .d-stack--gap-500();
-  }
-
-  &-gap-525 {
-    .d-stack--gap-525();
-  }
-
-  &-gap-550 {
-    .d-stack--gap-550();
-  }
-
-  &-gap-600 {
-    .d-stack--gap-600();
-  }
-
-  &-gap-625 {
-    .d-stack--gap-625();
-  }
-
-  &-gap-650 {
-    .d-stack--gap-650();
-  }
-
-  &-gap-700 {
-    .d-stack--gap-700();
-  }
+  // Stops outside both range() sequences: 1 (not a multiple of 25), 525 (not a multiple of 50)
+  &-gap-1 { --stack-gap: var(--dt-spacing-1); }
+  &-gap-525 { --stack-gap: var(--dt-spacing-525); }
+
+  each(range(0, 200, 25), {
+    &-gap-@{value} {
+      --stack-gap: ~"var(--dt-spacing-@{value})";
+    }
+  });
+
+  each(range(250, 800, 50), {
+    &-gap-@{value} {
+      --stack-gap: ~"var(--dt-spacing-@{value})";
+    }
+  });
 }
 
 .align-options() {
@@ -239,20 +199,15 @@
 //  ============================================================================
 //  $   SIZES
 //  ----------------------------------------------------------------------------
-.d-stack--gap-50  { --stack-gap: var(--dt-size-50); }
-.d-stack--gap-100 { --stack-gap: var(--dt-size-100); }
-.d-stack--gap-200 { --stack-gap: var(--dt-size-200); }
-.d-stack--gap-300 { --stack-gap: var(--dt-size-300); }
-.d-stack--gap-350 { --stack-gap: var(--dt-size-350); }
-.d-stack--gap-400 { --stack-gap: var(--dt-size-400); }
-.d-stack--gap-450 { --stack-gap: var(--dt-size-450); }
-.d-stack--gap-500 { --stack-gap: var(--dt-size-500); }
-.d-stack--gap-525 { --stack-gap: var(--dt-size-525); }
-.d-stack--gap-550 { --stack-gap: var(--dt-size-550); }
-.d-stack--gap-600 { --stack-gap: var(--dt-size-600); }
-.d-stack--gap-625 { --stack-gap: var(--dt-size-625); }
-.d-stack--gap-650 { --stack-gap: var(--dt-size-650); }
-.d-stack--gap-700 { --stack-gap: var(--dt-size-700); }
+// Stops outside both range() sequences: 1 (not a multiple of 25), 525 (not a multiple of 50)
+.d-stack--gap-1 { --stack-gap: var(--dt-spacing-1); }
+.d-stack--gap-525 { --stack-gap: var(--dt-spacing-525); }
+each(range(0, 200, 25), {
+  .d-stack--gap-@{value} { --stack-gap: ~"var(--dt-spacing-@{value})"; }
+});
+each(range(250, 800, 50), {
+  .d-stack--gap-@{value} { --stack-gap: ~"var(--dt-spacing-@{value})"; }
+});
 
 //  ============================================================================
 //  $   RESPONSIVE

package/lib/build/less/components/table.less

@@ -35,7 +35,7 @@
 
     // Caption styles
     &__caption {
-      margin-block-end: var(--dt-size-400); // 8
+      margin-block-end: var(--dt-spacing-100); // 8
       color: var(--table-th-color-text);
       font-weight: var(--dt-font-weight-bold);
       font-size: var(--table-font-size);
@@ -44,13 +44,12 @@
 
     // Table Head Styles
     :where(thead) {
-        border-block-end: var(--dt-size-200) solid var(--table-color-border);
+        border-block-end: var(--dt-size-border-200) solid var(--table-color-border);
 
         // Column Header Styles
         :where(th) {
             font-size: var(--table-th-font-size);
-            line-height: var(--dt-font-line-height-100);
-            text-transform: uppercase;
+            line-height: var(--dt-font-line-height-100)
         }
     }
 
@@ -67,16 +66,16 @@
 
     // Header & Cell Styles
     :where(th, td) {
-        padding: var(--dt-size-500); // 16
+        padding: var(--dt-spacing-200); // 16
         text-align: start;
-        border-block-end: var(--dt-size-100) solid var(--table-color-border);
+        border-block-end: var(--dt-size-border-100) solid var(--table-color-border);
     }
 
     // Nested Table Body, First Row Styles, used internally on the Dialtone site
     :where(tbody + tbody tr:first-of-type) {
         // Header & Cell Styles
         :where(td, th) {
-            border-block-start: var(--dt-size-200) solid var(--table-color-border);
+            border-block-start: var(--dt-size-border-200) solid var(--table-color-border);
         }
     }
 

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

@@ -15,7 +15,7 @@
 
 //  WRAPPER
 .d-tab-neux {
-    --tablist-padding-bottom: var(--dt-size-400);
+    --tablist-padding-bottom: var(--dt-spacing-100);
 
     inline-size: 100%;
 
@@ -27,10 +27,10 @@
         padding-block-end: var(--tablist-padding-bottom);
     }
 
-    > :where(.d-tablist--xs) { --tablist-padding-bottom: var(--dt-size-350); }
-    > :where(.d-tablist--sm) { --tablist-padding-bottom: var(--dt-size-400); }
-    > :where(.d-tablist--lg) { --tablist-padding-bottom: var(--dt-size-400); }
-    > :where(.d-tablist--xl) { --tablist-padding-bottom: var(--dt-size-450); }
+    > :where(.d-tablist--xs) { --tablist-padding-bottom: var(--dt-spacing-75); }
+    > :where(.d-tablist--sm) { --tablist-padding-bottom: var(--dt-spacing-100); }
+    > :where(.d-tablist--lg) { --tablist-padding-bottom: var(--dt-spacing-100); }
+    > :where(.d-tablist--xl) { --tablist-padding-bottom: var(--dt-spacing-100); }
 
     .d-tablist--no-border {
         border-block-end: 0;
@@ -45,7 +45,7 @@
             --tablist-padding-bottom: 0;
 
             padding-block-end: 0;
-            padding-inline-end: var(--dt-size-400);
+            padding-inline-end: var(--dt-spacing-100);
         }
     }
 }
@@ -58,8 +58,8 @@
     --tab-color-text: var(--dt-action-color-foreground-muted-default);
     --tab-font-style: var(--dt-typography-button-md);
     --tab-border-radius: var(--dt-button-size-radius-md);
-    --tab-padding-x: calc(var(--dt-size-450) - var(--dt-size-border-100));
-    --tab-padding-y: calc(var(--dt-size-400) - var(--dt-size-border-100));
+    --tab-padding-x: calc(var(--dt-spacing-150) - var(--dt-size-border-100));
+    --tab-padding-y: calc(var(--dt-spacing-100) - var(--dt-size-border-100));
 
     //  --  CSS VARS: border opacity (toggled by --no-border)
     --tablist-border-opacity: 1;
@@ -82,7 +82,7 @@
     position: relative;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: center;
     padding-block-end: var(--tablist-padding-bottom);
 
@@ -115,21 +115,21 @@
 
     //  Sizes
     &--sm {
-        --tab-padding-x: calc(var(--dt-size-400) - var(--dt-size-border-100));
+        --tab-padding-x: calc(var(--dt-spacing-100) - var(--dt-size-border-100));
         --tab-border-radius: var(--dt-button-size-radius-xs);
         --tab-font-style: var(--dt-typography-button-xs);
     }
 
     &--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-padding-x: calc(var(--dt-spacing-200) - var(--dt-size-border-100));
+        --tab-padding-y: calc((var(--dt-spacing-100) + var(--dt-spacing-25)) - var(--dt-size-border-100));
         --tab-border-radius: var(--dt-button-size-radius-lg);
         --tab-font-style: var(--dt-typography-button-lg);
     }
 
     &--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-padding-x: calc(var(--dt-spacing-200) - var(--dt-size-border-100));
+        --tab-padding-y: calc(var(--dt-spacing-150) - var(--dt-size-border-100));
         --tab-border-radius: var(--dt-button-size-radius-xl);
         --tab-font-style: var(--dt-typography-button-xl);
     }
@@ -148,7 +148,7 @@
 
         &::after {
             block-size: auto;
-            inset-inline-start: calc(100% - var(--dt-size-200));
+            inset-inline-start: calc(100% - var(--dt-spacing-25));
             inline-size: var(--dt-size-border-100);
             inset-block: 1px;
         }
@@ -195,7 +195,7 @@
 .d-tab {
     position: relative;
     display: inline-flex;
-    gap: var(--dt-size-400);
+    gap: var(--dt-spacing-100);
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -225,8 +225,8 @@
         block-size: var(--dt-size-border-200);
         background-color: var(--tab-after-bg);
         content: '';
-        inset-inline: var(--dt-size-100-negative) var(--dt-size-100-negative);
-        inset-block-end: var(--dt-size-100-negative);
+        inset-inline: var(--dt-spacing-1-negative) var(--dt-spacing-1-negative);
+        inset-block-end: var(--dt-spacing-1-negative);
     }
 
     &:focus-visible {
@@ -284,18 +284,18 @@
             background-color: var(--tab-selected-indicator);
             border-radius: var(--dt-size-radius-pill);
             content: '';
-            block-size: var(--dt-size-200);
-            inset-block-start: calc(calc(100% + var(--tablist-padding-bottom)) - var(--dt-size-100));
-            inset-inline: var(--dt-size-100-negative);
+            block-size: var(--dt-spacing-25);
+            inset-block-start: calc(calc(100% + var(--tablist-padding-bottom)) - var(--dt-spacing-1));
+            inset-inline: var(--dt-spacing-1-negative);
         }
 
         // Vertical context override
         :where(.d-tablist--vertical) &::after {
-            inset-block: var(--dt-size-100-negative);
+            inset-block: var(--dt-spacing-1-negative);
             inset-inline: auto 0;
-            inset-inline-start: calc(100% + var(--dt-size-350));
+            inset-inline-start: calc(100% + var(--dt-spacing-75));
             block-size: auto;
-            inline-size: var(--dt-size-200);
+            inline-size: var(--dt-spacing-25);
         }
     }
 }