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

package/lib/build/less/components/forms.less

@@ -37,7 +37,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-block-end: var(--dt-size-300);
+  margin-block-end: var(--dt-spacing-50);
   color: var(--dt-color-foreground-secondary);
   font: var(--dt-typography-label-md);
   overflow-wrap: break-word;
@@ -92,7 +92,7 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-block: var(--dt-size-300-negative) var(--dt-size-300);
+  margin-block: var(--dt-spacing-50-negative) var(--dt-spacing-50);
 }
 
 .d-input__label-text,
@@ -103,14 +103,14 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-block-end: var(--dt-size-300);
+  margin-block-end: var(--dt-spacing-50);
   overflow-wrap: break-word;
 }
 
 .d-input__label-text + .d-description,
 .d-select__label-text + .d-description,
 .d-input-group__legend-text + .d-description {
-  margin-block: var(--dt-size-300-negative) var(--dt-size-300);
+  margin-block: var(--dt-spacing-50-negative) var(--dt-spacing-50);
 }
 
 //  ============================================================================
@@ -120,9 +120,9 @@ fieldset {
   --validation-color-text: var(--dt-color-foreground-tertiary);
 
   display: flex;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: flex-start;
-  margin-block-start: var(--dt-size-350);
+  margin-block-start: var(--dt-spacing-50);
   color: var(--validation-color-text);
   font-weight: var(--dt-font-weight-medium);
   font-size: var(--dt-font-size-125);
@@ -132,10 +132,10 @@ fieldset {
   // Icon Slot
   &::before {
     display: block;
-    margin-block-start: var(--dt-size-200);
-    inline-size: var(--dt-size-500); // 16
-    min-inline-size: var(--dt-size-500); // 16
-    block-size: var(--dt-size-500); // 16
+    margin-block-start: var(--dt-spacing-25);
+    inline-size: var(--dt-layout-25); // 16
+    min-inline-size: var(--dt-layout-25); // 16
+    block-size: var(--dt-layout-25); // 16
     background-color: var(--validation-color-text);
     content: '';
   }

package/lib/build/less/components/image-viewer.less

@@ -12,7 +12,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-image-viewer__preview-button {
-  padding: var(--dt-size-0);
+  padding: var(--dt-spacing-0);
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
 }
@@ -20,7 +20,7 @@
 .d-image-viewer__full {
   max-inline-size: 80%;
   max-block-size: 80%;
-  padding: var(--dt-size-0);
+  padding: var(--dt-spacing-0);
   border-radius: var(--dt-size-radius-0);
 
   &__image {

package/lib/build/less/components/input.less

@@ -29,8 +29,8 @@
     --input-color-text: var(--dt-inputs-color-foreground-default);
     --input-border-width: var(--dt-size-border-100);
     --input-border-radius: var(--dt-inputs-size-radius-md);
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
-    --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-spacing-100) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-spacing-150) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-md);
 
     position: relative;
@@ -160,7 +160,7 @@
 }
 
 .d-input__length-description {
-    margin-block-end: var(--dt-size-200);
+    margin-block-end: var(--dt-spacing-25);
 }
 
 .d-input--hidden {
@@ -175,7 +175,7 @@
 
     .d-textarea + .d-input-icon--right {
       position: absolute;
-      inset-inline-end: var(--dt-size-450);
+      inset-inline-end: var(--dt-spacing-150);
     }
 
     .d-input-icon--left:has(+ .d-textarea) {
@@ -184,35 +184,35 @@
 
     .d-input-icon:has(+ .d-textarea),
     .d-textarea+.d-input-icon {
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-200));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-25));
     }
 
     .d-input-icon:has(+ .d-textarea--xs),
     .d-textarea--xs + .d-input-icon {
         #d-internal__input-and-select-xs();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--sm),
     .d-textarea--sm+.d-input-icon {
         #d-internal__input-and-select-sm();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--lg),
     .d-textarea--lg+.d-input-icon {
         #d-internal__input-and-select-lg();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--xl),
     .d-textarea--xl+.d-input-icon {
         #d-internal__input-and-select-xl();
 
-        padding-block-start: calc(var(--input-padding-y) + (var(--dt-size-350) - var(--dt-size-100)));
+        padding-block-start: calc(var(--input-padding-y) + (var(--dt-spacing-75) - var(--dt-spacing-1)));
     }
 
     .d-input,
@@ -252,7 +252,7 @@
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
-    min-block-size: calc(var(--dt-size-300) * 20); // 80
+    min-block-size: var(--dt-layout-125); // 80
     vertical-align: top;
     resize: block;
     scroll-padding-block: var(--input-padding-y);
@@ -263,25 +263,25 @@
 .d-textarea--xs {
     #d-internal__input-and-select-xs();
 
-    min-block-size: calc(var(--dt-size-300) * 10); // 40
+    min-block-size: calc(var(--dt-layout-75) - var(--dt-spacing-100)); // 40
 }
 
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-block-size: var(--dt-size-650); // 48
+    min-block-size: var(--dt-layout-75); // 48
 }
 
 .d-textarea--lg {
     #d-internal__input-and-select-lg();
 
-    min-block-size: calc(var(--dt-size-300) * 23); // 92
+    min-block-size: var(--dt-spacing-150); // 96
 }
 
 .d-textarea--xl {
     #d-internal__input-and-select-xl();
 
-    min-block-size: calc(var(--dt-size-300) * 25); // 100
+    min-block-size: var(--dt-spacing-175); // 112
 }
 
 //  $$  VALIDATION STATES
@@ -309,21 +309,16 @@
         align-items: center;
     }
 
-    :where(.d-input__root:has(.d-input:disabled)) & {
-        opacity: var(--dt-opacity-700);
-        pointer-events: none;
-    }
-
     &--right:not(:empty) {
-        margin-inline-end: var(--dt-size-400);
+        margin-inline-end: var(--dt-spacing-100);
 
         .d-btn {
-            margin-inline-end: var(--dt-size-350-negative);
+            margin-inline-end: var(--dt-spacing-75-negative);
         }
     }
 
     &--left:not(:empty) {
-        margin-inline-start: var(--dt-size-400);
+        margin-inline-start: var(--dt-spacing-100);
     }
 }
 }

package/lib/build/less/components/item-layout.less

@@ -16,8 +16,8 @@
 .d-item-layout {
   display: flex;
   align-items: stretch;
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  padding: var(--dt-size-300) var(--dt-size-400);
+  min-block-size: var(--dt-spacing-350);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 
@@ -26,7 +26,7 @@
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
-    min-inline-size: var(--dt-size-0);
+    min-inline-size: 0;
 
     > .d-item-layout__subtitle {
       color: var(--dt-color-foreground-tertiary);
@@ -34,11 +34,11 @@
     }
 
     > .d-item-layout__subtitle-with-title {
-      margin-block-start: var(--dt-size-200-negative);
+      margin-block-start: var(--dt-spacing-25-negative);
     }
 
     > .d-item-layout__bottom {
-      margin-block-start: var(--dt-size-200);
+      margin-block-start: var(--dt-spacing-25);
     }
   }
 
@@ -46,18 +46,18 @@
   > .d-item-layout__left {
     display: flex;
     align-items: center;
-    min-inline-size: var(--dt-size-600);
+    min-inline-size: var(--dt-layout-50);
     min-block-size: inherit;
   }
 
   > .d-item-layout__right {
     flex-shrink: 0;
-    padding-inline-start: var(--dt-size-400);
+    padding-inline-start: var(--dt-spacing-100);
   }
 
   > .d-item-layout__left {
     justify-content: flex-end;
-    padding-inline-end: var(--dt-size-400);
+    padding-inline-end: var(--dt-spacing-100);
   }
 
   > .d-item-layout__selected {

package/lib/build/less/components/keyboard-shortcut.less

@@ -13,15 +13,15 @@
 @layer dialtone.components {
 .d-keyboard-shortcut {
   display: inline-flex;
-  gap: var(--dt-size-200);
+  gap: var(--dt-spacing-25);
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding-inline: var(--dt-size-350);
+  padding-inline: var(--dt-spacing-75);
   font: var(--dt-typography-body-sm);
   font-variant-numeric: tabular-nums;
   min-inline-size: 1lh;
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
 

package/lib/build/less/components/link.less

@@ -23,7 +23,7 @@
 
     position: relative;
     display: inline-flex;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -32,7 +32,7 @@
     color: var(--link-color-default);
     font: inherit;
     text-decoration: var(--link-text-decoration);
-    text-underline-offset: var(--dt-size-200);
+    text-underline-offset: var(--dt-spacing-25);
     text-decoration-thickness: var(--dt-size-border-100);
     background-color: var(--link-background-color);
     border: 0;
@@ -174,7 +174,7 @@
         --link-color-default: var(--dt-color-link-primary-inverted);
         --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
         --link-text-decoration: none;
-        --link-padding: 0 var(--dt-size-200);
+        --link-padding: 0 var(--dt-spacing-25);
         --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.3);
 
         line-height: var(--dt-font-line-height-200);
@@ -187,7 +187,7 @@
     // is reversed compared to a regular link, and it has a light background.
     &--mention {
         --link-text-decoration: none;
-        --link-padding: 0 var(--dt-size-200);
+        --link-padding: 0 var(--dt-spacing-25);
         --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.1);
 
         line-height: var(--dt-font-line-height-200);
@@ -197,7 +197,7 @@
             --link-text-decoration: underline;
             --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.25);
 
-            text-underline-offset: var(--dt-size-200);
+            text-underline-offset: var(--dt-spacing-25);
             text-decoration-thickness: var(--dt-size-border-100);
         }
 

package/lib/build/less/components/list-group.less

@@ -18,7 +18,7 @@
 .d-list-group--header,
 .d-list-group--link {
     display: block;
-    padding: var(--dt-size-300) var(--dt-size-550); // 4 24
+    padding: var(--dt-spacing-50) var(--dt-spacing-300); // 4 24
 }
 
 .d-list-group--header {

package/lib/build/less/components/list-item-group.less

@@ -13,6 +13,6 @@
 @layer dialtone.components {
 .d-list-item-group {
   position: relative;
-  padding-inline: var(--dt-size-0) var(--dt-size-0);
+  padding-inline: var(--dt-spacing-0) var(--dt-spacing-0);
 }
 }

package/lib/build/less/components/list-item.less

@@ -19,13 +19,13 @@
   }
 
   &[role="menuitem"] {
-    border-radius: var(--dt-size-300);
+    border-radius: var(--dt-size-radius-300);
   }
 
   &-separator {
-    margin: var(--dt-size-300) var(--dt-size-300-negative);
+    margin: var(--dt-spacing-50) var(--dt-spacing-50-negative);
     list-style: none;
-    border-block-start: var(--dt-size-100) solid var(--dt-color-border-default);
+    border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-default);
   }
 
   &:focus-visible {
@@ -35,9 +35,9 @@
 }
 
 .d-list-item__wrapper {
-  gap: var(--dt-size-400);
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  padding: var(--dt-size-300) var(--dt-size-400);
+  gap: var(--dt-spacing-100);
+  min-block-size: var(--dt-layout-50);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 }
@@ -54,16 +54,16 @@
 }
 
 .d-list-item__title {
-  min-inline-size: var(--dt-size-0);
+  min-inline-size: var(--dt-layout-0);
 }
 
 .d-list-item__subtitle {
-  margin-block-start: var(--dt-size-200-negative);
+  margin-block-start: var(--dt-spacing-25-negative);
   color: var(--dt-color-foreground-tertiary);
   font-size: var(--dt-font-size-100);
 }
 
 .d-list-item__bottom {
-  margin-block-start: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-25);
 }
 }

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