@dialpad/dialtone 7.25.1 → 7.26.1-beta.1

package/lib/build/less/components/avatar.less

@@ -8,6 +8,7 @@
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE
+//    • COLOR VARIANTS
 //    • CHILDREN
 //    • SIZES
 //    • VARIANTS
@@ -18,30 +19,49 @@
 .d-avatar {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --avatar-color-background: var(--bgc-moderate);
-  --avatar-color-text: var(--fc-secondary);
-  --avatar-gradient-angle: -180deg;
-  --avatar-gradient-stop-1: var(--blue-200);
-  --avatar-gradient-stop-2: var(--purple-100);
-  --avatar-gradient-stop-3: var(--gold-100);
-  --avatar-gradient:
-    conic-gradient(
-      from var(--avatar-gradient-angle) at 50% 50%,
-      var(--avatar-gradient-stop-1) 0deg,
-      var(--avatar-gradient-stop-2) 180deg,
-      var(--avatar-gradient-stop-3) 360deg
-    );
+  // Hard-coded. Identical in all theme modes.
+  //   To be replaced by `var (--dt-color-neutral-black)`,
+  //   or possibly an Avatar-specific Design Token
+  --avatar-color-background: #e0e0e0;
+  // Hard-coded. Identical in all theme modes.
+  //   To be replaced by `var (--dt-color-neutral-black)`,
+  //   or possibly an Avatar-specific Design Token
+  --avatar-color-text: #000;
   --avatar-size-shape: var(--size-600);
   --avatar-size-image: 100%;
   --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
-  --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
+  --avatar-presence-position-right: var(--space-200-negative);
+  --avatar-presence-position-bottom: var(--space-200-negative);
   --avatar-count-color-shadow: var(--theme-sidebar-color-background);
 
   position: relative;
   display: flex;
   color: var(--avatar-color-text);
 
+  //  --  COLOR VARIANTS
+  //  ------------------------------------------------------------------------
+
+  // hard-coded. identical in all theme modes.
+  // To be replaced by Avatar-specific Design Tokens,
+   &--color-100 { --avatar-color-background: #1aa340; }
+   &--color-200 { --avatar-color-background: #aaff83; }
+   &--color-300 { --avatar-color-background: #adea88; }
+   &--color-400 { --avatar-color-background: #77eca6; }
+   &--color-500 { --avatar-color-background: #7aedbd; }
+   &--color-600 { --avatar-color-background: #77deec; }
+   &--color-700 { --avatar-color-background: #5ed8ff; }
+   &--color-800 { --avatar-color-background: #99e7ff; }
+   &--color-900 { --avatar-color-background: #51a0fe; }
+  &--color-1000 { --avatar-color-background: #b6cfff; }
+  &--color-1100 { --avatar-color-background: #f1b7e8; }
+  &--color-1200 { --avatar-color-background: #ec77bd; }
+  &--color-1300 { --avatar-color-background: #ff67be; }
+  &--color-1400 { --avatar-color-background: #f87e7e; }
+  &--color-1500 { --avatar-color-background: #eca877; }
+  &--color-1600 { --avatar-color-background: #ffbe41; }
+  &--color-1700 { --avatar-color-background: #ffd646; }
+  &--color-1800 { --avatar-color-background: #f1dab7; }
+
   //  --  CHILDREN
   //  ------------------------------------------------------------------------
 
@@ -55,10 +75,6 @@
     background-color: var(--avatar-color-background);
     background-image: var(--avatar-gradient);
     border-radius: var(--br-pill);
-
-    .d-avatar--no-gradient & {
-      background-image: none;
-    }
   }
 
   &__image {
@@ -115,37 +131,37 @@
   //  ------------------------------------------------------------------------
 
   &--xs {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-200)); // 18
-    --avatar-presence-position-right: calc(var(--space-300) * -1); // -4
-    --avatar-presence-position-bottom: calc(var(--space-300) * -1); // -4
+    --avatar-size-shape: calc(var(--size-500) + var(--size-200));
+    --avatar-presence-position-right: var(--space-300-negative);
+    --avatar-presence-position-bottom: var(--space-300-negative);
   }
 
   &--sm {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-400)); // 24
+    --avatar-size-shape: var(--size-550);
     --avatar-size-text: var(--fs-100);
-    --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
-    --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
+    --avatar-presence-position-right: var(--space-200-negative);
+    --avatar-presence-position-bottom: var(--space-200-negative);
   }
 
   &--md {
-    --avatar-size-shape: var(--size-600); // 32
+    --avatar-size-shape: var(--size-600);
     --avatar-size-text: var(--fs-200);
-    --avatar-presence-position-right: calc(var(--space-100) * -1); // -1
-    --avatar-presence-position-bottom: calc(var(--space-100) * -1); // -1
+    --avatar-presence-position-right: var(--space-100-negative);
+    --avatar-presence-position-bottom: var(--space-100-negative);
   }
 
   &--lg {
-    --avatar-size-shape: calc(var(--size-600) + var(--size-500)); // 48
+    --avatar-size-shape: var(--size-650);
     --avatar-size-text: var(--fs-300);
-    --avatar-presence-position-right: var(--space-100); // 1
-    --avatar-presence-position-bottom: var(--space-100); // 1
+    --avatar-presence-position-right: var(--space-100);
+    --avatar-presence-position-bottom: var(--space-100);
   }
 
   &--xl {
-    --avatar-size-shape: var(--size-700); // 64
+    --avatar-size-shape: var(--size-700);
     --avatar-size-text: var(--fs-400);
-    --avatar-presence-position-right: var(--space-300); // 4
-    --avatar-presence-position-bottom: var(--space-300); // 4
+    --avatar-presence-position-right: var(--space-300);
+    --avatar-presence-position-bottom: var(--space-300);
   }
 
   //  --  GROUP
@@ -154,7 +170,7 @@
   &--group {
     --avatar-size-shape: calc(var(--size-300) * 4.5);
 
-    width: calc(var(--size-300) * 6);
-    height: calc(var(--size-300) * 6);
+    width: var(--size-550);
+    height: var(--size-550);
   }
 }

package/lib/build/less/components/badge.less

@@ -28,7 +28,7 @@
   --badge-font-size: var(--fs-100);
   --badge-font-weight: var(--fw-semibold);
   --badge-gap: var(--space-300);
-  --badge-letter-spacing: calc(var(--size-100) / 2);
+  --badge-letter-spacing: var(--size-50);
   --badge-padding-y: var(--space-100);
   --badge-padding-x: var(--space-400);
   --badge-text-case: none;
@@ -41,7 +41,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: calc(var(--size-400) + var(--size-500));
+  min-width: var(--size-550);
   padding: var(--badge-padding-y) var(--badge-padding-x);
   color: var(--badge-color-text);
   font-weight: var(--badge-font-weight);

package/lib/build/less/components/banner.less

@@ -32,7 +32,7 @@
     display: flex;
     box-sizing: border-box;
     width: 100%;
-    min-height: calc(var(--size-300) * 12); // 48
+    min-height: var(--size-650); // 48
     color: var(--banner-color-text);
     font-size: var(--banner-font-size);
     line-height: var(--banner-line-height);
@@ -43,7 +43,7 @@
 
     // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: calc(var(--size-3) * 16); // -64
+        --topbar-height: var(--size-650);
 
         visibility: hidden;
         opacity: 0;

package/lib/build/less/components/breadcrumbs.less

@@ -52,12 +52,12 @@
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
-            margin-right: calc(var(--space-400) + var(--space-300));
+            margin-right: var(--space-450);
 
             &::before {
                 position: absolute;
-                right: calc(calc(var(--space-400) + var(--space-300)) * -1);
-                margin-top: calc(var(--space-100) * -1);
+                right: var(--space-450-negative);
+                margin-top: var(--space-100-negative);
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
             }

package/lib/build/less/components/button.less

@@ -39,12 +39,12 @@
     --button-padding-y-xs: calc(calc(var(--space-400) - var(--space-100)) - var(--button-border-width)); // ((8 - 1) - border-width)
     --button-padding-x-xs: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
     --button-padding-y-sm: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
-    --button-padding-x-sm: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-x-sm: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-y-md: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
-    --button-padding-x-md: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-x-md: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-y-lg: calc((var(--space-400) + var(--space-200)) - var(--button-border-width)); // 10 minus border-width
     --button-padding-x-lg: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
-    --button-padding-y-xl: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-y-xl: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-x-xl: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
     --button-padding-y: var(--button-padding-y-md);
     --button-padding-x: var(--button-padding-x-md);
@@ -157,7 +157,7 @@
     --button-padding-x: var(--button-padding-x-lg);
     --button-font-size: var(--fs-300);
     --button-line-height: var(--button-line-height-lg);
-    --button-border-radius: calc(var(--size-300) * 3);
+    --button-border-radius: var(--size-450);
 
     .d-btn__icon .d-svg {
         width: @icon20;
@@ -220,11 +220,11 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-    margin-left: calc(var(--space-200) * -1);
+    margin-left: var(--space-200-negative);
 }
 
 .d-btn__icon--right:not(:only-child) {
-    margin-right: calc(var(--space-200) * -1);
+    margin-right: var(--space-200-negative);
 }
 
 //  ============================================================================
@@ -501,7 +501,7 @@
       width: 2em;
       height: 2em;
       margin-right: var(--space-400);
-      margin-left: calc(var(--space-300) * -1);
+      margin-left: var(--space-300-negative);
       background-color: var(--white);
       border-radius: var(--br2);
     }

package/lib/build/less/components/card.less

@@ -45,7 +45,7 @@
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  padding: var(--size-500);
+  padding: var(--space-500);
   overflow-y: auto;
 }
 
@@ -54,5 +54,5 @@
 .d-card__footer {
   display: flex;
   align-items: center;
-  padding: 0 var(--size-500) var(--size-500);
+  padding: 0 var(--space-500) var(--space-500);
 }

package/lib/build/less/components/chip.less

@@ -76,9 +76,9 @@
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--size-600) - var(--space-400));
+    --avatar-size-shape: var(--space-550);
 
-    margin: calc(var(--space-200) * -1) var(--space-300) calc(var(--space-200) * -1) calc(calc(var(--space-300) + var(--space-200)) * -1);
+    margin: var(--space-200-negative) var(--space-300) var(--space-200-negative) var(--space-350-negative);
   }
 
   .d-svg {
@@ -134,7 +134,7 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
-  padding: var(--space-200) calc(var(--space-200) + var(--space-300));
+  padding: var(--space-200) var(--space-350);
   font-size: var(--fs-100);
 
   .d-svg {
@@ -146,8 +146,8 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--size-400) + var(--size-300));
-    height: calc(var(--size-400) + var(--size-300));
+    width: var(--size-450);
+    height: var(--size-450);
     content: '';
   }
 
@@ -155,7 +155,7 @@
     --avatar-size-shape: var(--size-500);
 
     margin-right: var(--space-300);
-    margin-left: calc(var(--space-300) * -1);
+    margin-left: var(--space-300-negative);
   }
 }
 
@@ -164,8 +164,8 @@
 
   // Clickable area for the close button.
   &::before {
-    width: calc(var(--size-600) - var(--size-400)); // 24
-    height: calc(var(--size-600) - var(--size-400)); // 24
+    width: var(--size-550);
+    height: var(--size-550);
   }
 
   .d-btn__icon .d-svg {
@@ -205,8 +205,8 @@
   padding: var(--space-200);
 
   &::before {
-    width: calc(var(--size-600) - var(--space-400)); // 24
-    height: calc(var(--size-600) - var(--space-400)); // 24
+    width: var(--space-550);
+    height: var(--space-550);
   }
 
   .d-btn__icon .d-svg {

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

@@ -81,7 +81,7 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-top: calc(var(--space-300) * -1);
+  margin-top: var(--space-300-negative);
   margin-bottom: var(--space-300);
 }
 

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

@@ -33,7 +33,7 @@
     --input-color-background: hsla(var(--black-900-hsl) / 0.03);
     --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
     --input-color-text: var(--fc-secondary);
-    --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
+    --input-border-width: calc(var(--size-100) + var(--size-50)); // 1.5
     --input-border-radius: var(--size-400);
     --input-padding-y: calc(var(--space-400) - var(--input-border-width));
     --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
@@ -143,11 +143,11 @@
         }
 
         &.d-input-icon--right {
-            padding-right: calc(var(--space-300) + var(--space-200));
+            padding-right: var(--space-350);
         }
 
         &.d-input-icon--left {
-            padding-left: calc(var(--space-300) + var(--space-200));
+            padding-left: var(--space-350);
         }
     }
 }
@@ -193,7 +193,7 @@
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-height: calc(var(--size-300) * 12); // 48
+    min-height: var(--size-650); // 48
 }
 
 .d-textarea--lg {

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

@@ -17,7 +17,7 @@
 .d-list-group--header,
 .d-list-group--link {
     display: block;
-    padding: var(--size-300) calc(var(--size-300) * 6); // 4 24
+    padding: var(--space-300) var(--space-550); // 4 24
 }
 
 .d-list-group--header {

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

@@ -75,7 +75,7 @@
   gap: var(--space-500); //
   box-sizing: border-box;
   width: 100%;
-  max-width: calc(var(--size-300) * 157); // 628
+  max-width: var(--size-1020); // 628
   max-height: 100%;
   padding: var(--modal-dialog-padding); // 32
   overflow-y: auto;
@@ -111,7 +111,7 @@
 //  $   MODAL AREAS
 //  ----------------------------------------------------------------------------
 .d-modal__footer {
-  --modal-footer-padding: calc(var(--space-300) * 6); // 24
+  --modal-footer-padding: var(--space-550); // 24
 
   display: flex;
   flex-direction: row-reverse;
@@ -126,7 +126,7 @@
 //  $$  HEADER
 //  ----------------------------------------------------------------------------
 .d-modal__header {
-  --modal-header-padding: calc(var(--space-300) * 6); // 24
+  --modal-header-padding: var(--space-550); // 24
 
   margin: 0 !important;
   color: var(--modal-header-color-text);
@@ -164,7 +164,7 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: calc(var(--size-300) * 157); // 628
+  max-width: var(--size-1020); // 628
   padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
   color: var(--fc-primary);
   font-size: var(--fs-200);
@@ -248,12 +248,12 @@
 
   .d-modal__footer {
     margin-top: auto !important;
-    padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600); // 0 24 32 32
+    padding: 0 var(--space-550) var(--space-600) var(--space-600); // 0 24 32 32
   }
 
   .d-modal__banner {
     max-width: unset;
-    padding: calc(var(--space-300) * 3) var(--space-600); // 12 32
+    padding: var(--space-450) var(--space-600); // 12 32
     border-radius: 0;
   }
 }

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

@@ -31,7 +31,7 @@
     align-items: center;
     box-sizing: border-box;
     width: 100%;
-    max-width: calc(var(--size-300) * 157); // 628
+    max-width: var(--size-1020);
     padding: var(--notice-padding);
     color: var(--notice-color-text);
     font-size: var(--notice-font-size);
@@ -41,7 +41,7 @@
     box-shadow: var(--notice-box-shadow);
 
     .d-toast & {
-        max-width: calc(var(--size-300) * 116); // 464
+        max-width: var(--size-975);
         box-shadow: var(--bs-sm);
         pointer-events: all;
     }
@@ -73,7 +73,7 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-right: calc(var(--space-300) * 3);
+    margin-right: var(--space-450);
     color: var(--notice-color-icon);
 
     .d-banner & {

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

@@ -69,8 +69,8 @@
     justify-content: flex-end;
     width: 100%;
     min-height: var(--size48);
-    padding-top: calc(var(--space-300) + var(--space-200)); // 6
-    padding-bottom: calc(var(--space-300) + var(--space-200)); // 6
+    padding-top: var(--space-350);
+    padding-bottom: var(--space-350);
     overflow: auto;
     font-weight: var(--fw-semibold);
     font-size: var(--fs-200);

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

@@ -29,7 +29,7 @@
     --check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
     --check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
     --check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
-    --check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
+    --check-radio-border-width: calc(var(--size-100) + var(--size-50)); // 1.5
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------

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

@@ -24,7 +24,7 @@
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
   --select-color-border: var(--black-500);
-  --select-notch-position-right: calc(var(--size-300) * 2);
+  --select-notch-position-right: var(--size-400);
 
   position: relative;
   width: stretch;
@@ -52,7 +52,7 @@
 //  ----------------------------------------------------------------------------
 .d-select__input {
   --select-color-border: var(--input-color-border);
-  --select-notch-padding-right: calc(var(--space-300) * 6);
+  --select-notch-padding-right: var(--space-550);
 
   // Use shared style properties of d-input (<input>, <textarea>)
   .d-input();
@@ -111,7 +111,7 @@
 
   &::after {
     --select-arrow-size: calc(var(--size-300) * 4.5);
-    --select-notch-position-right: calc(var(--size-300) * 3);
+    --select-notch-position-right: var(--size-450);
   }
 }
 
@@ -124,7 +124,7 @@
 
   &::after {
     --select-arrow-size: calc(var(--size-300) * 4.5);
-    --select-notch-position-right: calc(var(--size-300) * 3);
+    --select-notch-position-right: var(--size-450);
   }
 }
 

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

@@ -107,4 +107,4 @@
 .d-stack--gap-300 { --stack-gap: var(--space-300); }
 .d-stack--gap-400 { --stack-gap: var(--space-400); }
 .d-stack--gap-500 { --stack-gap: var(--space-500); }
-.d-stack--gap-600 { --stack-gap: var(--space-500); }
+.d-stack--gap-600 { --stack-gap: var(--space-600); }

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

@@ -44,7 +44,7 @@
         font-size: var(--fs-100);
 
         .d-tab {
-            --tab-padding-x: calc(var(--space-300) * 2);
+            --tab-padding-x: var(--space-400);
             --tab-padding-y: var(--space-400);
             --tab-padding-bottom: calc(var(--tab-padding-y) + var(--space-100));
             --tab-border-radius-top: var(--size-300);
@@ -68,7 +68,7 @@
     --tab-line-height: var(--lh-200);
     --tab-font-weight: var(--fw-medium);
     --tab-border-radius-top: var(--size-400);
-    --tab-padding-x: calc(var(--space-300) * 3);
+    --tab-padding-x: var(--space-450);
     --tab-padding-y: var(--space-400);
     --tab-padding-bottom: calc(var(--tab-padding-y) + var(--space-100));
 

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

@@ -41,7 +41,7 @@
     z-index: var(--zi-notification);
     box-sizing: border-box;
     width: 100%;
-    max-width: calc(var(--size-300) * 157); // 628
+    max-width: var(--size-1020); // 628
     padding: var(--toast-padding);
     color: var(--toast-color-text);
     font-size: var(--toast-font-size);

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

@@ -26,8 +26,8 @@
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
   --toggle-color-background: var(--black-400);
-  --toggle-size-height: calc(var(--size-300) * 6); // 24
-  --toggle-size-width: calc(var(--size-300) * 12); // 48
+  --toggle-size-height: var(--size-550); // 24
+  --toggle-size-width: var(--size-650); // 48
   --toggle-size-icon: var(--size-500); // 16
 
   //  $$  BASE STYLE
@@ -52,7 +52,7 @@
   &__inner {
     position: absolute;
     top: calc(var(--space-300) - var(--space-100)); // 3
-    left: calc(var(--space-300) * 6); // 24
+    left: var(--space-550); // 24
     width: var(--toggle-size-icon);
     height: var(--toggle-size-icon);
 
@@ -93,9 +93,9 @@
 
     &::before {
       position: absolute;
-      top: calc(var(--space-300) * -1); // -4
+      top: var(--space-300-negative); // -4
       right: 0;
-      bottom: calc(var(--space-300) * -1); // -4
+      bottom: var(--space-300-negative); // -4
       left: 0;
       content: '';
     }
@@ -112,7 +112,7 @@
     --toggle-color-background: var(--purple-400);
 
     .d-toggle__inner {
-      left: calc(var(--space-300) + var(--space-200)); // 6
+      left: var(--space-350); // 6
       background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
     }
 
@@ -121,7 +121,7 @@
     }
 
     &::after {
-      left: calc(calc(var(--space-300) * 6) + var(--space-100)); // 25
+      left: calc(var(--space-550) + var(--space-100)); // 25
     }
 
     &.d-toggle--small::after {