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

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

package/lib/build/less/components/toast.less

@@ -12,12 +12,12 @@
 @layer dialtone.components {
 .d-toast-wrapper {
   position: absolute;
-  inset-block-start: var(--dt-size-600); // 32
+  inset-block-start: var(--dt-spacing-400); // 32
   inset-inline-start: 50%;
   z-index: var(--zi-notification);
   display: flex;
   flex-direction: column;
-  gap: var(--dt-size-500);
+  gap: var(--dt-spacing-200);
   transform: translateX(-50%);
 }
 
@@ -28,11 +28,11 @@
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --toast-color-shadow: var(--dt-color-border-subtle);
-    --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
+    --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
 
     z-index: var(--zi-notification);
     display: block;
-    max-inline-size: var(--dt-size-975);
+    max-inline-size: var(--dt-layout-700);
     word-break: normal;
     box-shadow: var(--toast-box-shadow);
     pointer-events: all;
@@ -63,7 +63,7 @@
     align-items: start;
 
     .d-notice__actions :where(button:first-child) {
-        margin-inline-start: var(--dt-size-600); // 32
+        margin-inline-start: var(--dt-spacing-400); // 32
     }
 }
 
@@ -107,7 +107,7 @@
 .d-toast--viewing {
   --toast-border-radius: var(--dt-size-radius-200);
 
-  border-block-start: var(--dt-size-300) solid var(--dt-color-magenta-400);
+  border-block-start: var(--dt-size-border-300) solid var(--dt-color-magenta-400);
 
   .d-notice__icon {
     color: var(--dt-color-magenta-400);
@@ -127,17 +127,17 @@
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
   --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 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-box-shadow: 0 0 0 var(--dt-spacing-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-radius: var(--dt-size-radius-500);
   --toast-alternate-border-color: var(--dt-color-border-subtle);
   --toast-alternate-border-style: solid;
-  --toast-alternate-border-width: var(--dt-size-100);
+  --toast-alternate-border-width: var(--dt-size-border-100);
 
   z-index: var(--zi-notification);
 
@@ -146,8 +146,8 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  inline-size: var(--dt-size-925);
-  padding: var(--dt-size-350) var(--dt-size-350) var(--dt-size-450) var(--dt-size-450);
+  inline-size: var(--dt-layout-500);
+  padding: var(--dt-spacing-75) var(--dt-spacing-75) var(--dt-spacing-150) var(--dt-spacing-150);
   color: var(--toast-alternate-color-text);
   font-size: var(--toast-alternate-font-size);
   line-height: var(--toast-alternate-line-height);
@@ -177,7 +177,7 @@
   .d-toast-layout-alternate__icon {
     display: flex;
     flex: 0 auto;
-    margin-inline-end: var(--dt-size-300);
+    margin-inline-end: var(--dt-spacing-50);
     color: var(--toast-alternate-color-icon);
   }
 
@@ -199,7 +199,7 @@
   display: flex;
   flex: 1 auto;
   flex-direction: column;
-  margin-inline-end: var(--dt-size-500);
+  margin-inline-end: var(--dt-spacing-200);
   color: var(--dt-color-foreground-primary);
   font-weight: var(--dt-font-weight-normal);
   font-size: var(--dt-font-size-200);
@@ -208,17 +208,17 @@
 .d-toast-alternate__dialog {
   position: relative;
   align-items: center;
-  inline-size: var(--dt-size-100-percent);
+  inline-size: var(--dt-layout-100-percent);
 
 
   .d-notice__actions :where(button:first-child) {
-    margin-inline-start: var(--dt-size-600); // 32
+    margin-inline-start: var(--dt-spacing-400); // 32
   }
 }
 
 .d-toast-alternate__header {
   display: flex;
-  gap: var(--dt-size-200);
+  gap: var(--dt-spacing-25);
   align-items: center;
   color: var(--toast-alternate-font-color);
 }

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

@@ -26,9 +26,9 @@
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
   --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
+  --toggle-size-height: calc(var(--dt-layout-25) * 1.5); // 24
+  --toggle-size-width: var(--dt-layout-75); // 48
+  --toggle-size-icon: var(--dt-layout-25); // 16
 
   //  $$  BASE STYLE
   //  ----------------------------------------------------------------------------
@@ -42,7 +42,7 @@
   line-height: var(--lh4);
   vertical-align: middle;
   background-color: var(--toggle-color-background);
-  border: var(--dt-size-100) solid var(--toggle-color-background);
+  border: var(--dt-size-border-100) solid var(--toggle-color-background);
   border-radius: var(--toggle-size-width);
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
@@ -51,14 +51,14 @@
 
   &__inner {
     position: absolute;
-    inset-block-start: calc(var(--dt-size-300) - var(--dt-size-100)); // 3
-    inset-inline-start: var(--dt-size-550); // 24
+    inset-block-start: calc(var(--dt-spacing-50) - var(--dt-spacing-1)); // 3
+    inset-inline-start: var(--dt-spacing-300); // 24
     inline-size: var(--toggle-size-icon);
     block-size: var(--toggle-size-icon);
 
     .d-toggle--small & {
-      inset-block-start: var(--dt-size-100); // 1
-      inset-inline-start: calc(var(--dt-size-500) + var(--dt-size-100)); // 17
+      inset-block-start: var(--dt-spacing-1); // 1
+      inset-inline-start: calc(var(--dt-spacing-200) + var(--dt-spacing-1)); // 17
     }
 
     .d-toggle--indeterminate & {
@@ -77,10 +77,10 @@
 
   &::after {
     position: absolute;
-    inset-block-start: var(--dt-size-100); // 1
-    inset-inline-start: var(--dt-size-100); // 1
-    inline-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    block-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
+    inset-block-start: var(--dt-spacing-1); // 1
+    inset-inline-start: var(--dt-spacing-1); // 1
+    inline-size: var(--dt-icon-size-400);
+    block-size: var(--dt-icon-size-400);
     background-color: var(--dt-color-surface-primary);
     border-radius: var(--dt-size-radius-circle);
     cursor: pointer;
@@ -91,20 +91,20 @@
   //  $$  TOGGLE VARIANTS
   //  ----------------------------------------------------------------------------
   &--small {
-    --toggle-size-height: calc(var(--dt-size-500) + var(--dt-size-200)); // 18
-    --toggle-size-width: calc(var(--dt-size-600) + var(--dt-size-300)); // 36
-    --toggle-size-icon: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
+    --toggle-size-height: calc(var(--dt-layout-25) + var(--dt-spacing-25)); // 18
+    --toggle-size-width: calc(var(--dt-layout-50) + var(--dt-spacing-50)); // 36
+    --toggle-size-icon: var(--dt-icon-size-200); // 14
 
     &::before {
       position: absolute;
-      inset: var(--dt-size-300-negative) 0 var(--dt-size-300-negative) 0; // -4 // -4
+      inset: var(--dt-spacing-50-negative) 0 var(--dt-spacing-50-negative) 0; // -4 // -4
       content: '';
     }
   }
 
   &--small::after {
-    inline-size: var(--toggle-size-icon);
-    block-size: var(--toggle-size-icon);
+    inline-size: var(--dt-icon-size-200);
+    block-size: var(--dt-icon-size-200);
   }
 
   //  $$  CHECKED TOGGLE
@@ -113,7 +113,7 @@
     --toggle-color-background: var(--dt-checkbox-color-background-checked);
 
     .d-toggle__inner {
-      inset-inline-start: var(--dt-size-350); // 6
+      inset-inline-start: var(--dt-spacing-75); // 6
       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='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
 
       [data-dt-mode="dark"] &,
@@ -123,15 +123,15 @@
     }
 
     &.d-toggle--small .d-toggle__inner {
-      inset-inline-start: calc(var(--dt-size-100) + var(--dt-size-200)); // 3
+      inset-inline-start: calc(var(--dt-spacing-1) + var(--dt-spacing-25)); // 3
     }
 
     &::after {
-      inset-inline-start: calc(var(--dt-size-550) + var(--dt-size-100)); // 25
+      inset-inline-start: calc(var(--dt-spacing-300) + var(--dt-spacing-1)); // 25
     }
 
     &.d-toggle--small::after {
-      inset-inline: calc(calc(var(--dt-size-300) * 5) - var(--dt-size-100)) var(--dt-size-100); // 1 // 19
+      inset-inline: calc(calc(var(--dt-spacing-50) * 5) - var(--dt-spacing-1)) var(--dt-spacing-1); // 1 // 19
     }
   }
 
@@ -170,7 +170,7 @@
 }
 
 .d-toggle-group {
-  gap: var(--dt-size-400); // 8
+  gap: var(--dt-spacing-100); // 8
 }
 
 //  ============================================================================