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

package/lib/build/less/recipes/contact_info.less

@@ -2,8 +2,8 @@
 .d-recipe-contact-info {
   --contact-info-avatar-border-color: var(--dt-color-surface-primary);
 
-  padding: var(--dt-size-300) var(--dt-size-400);
-  column-gap: var(--dt-size-400);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
+  column-gap: var(--dt-spacing-100);
 }
 
 .d-recipe-contact-info__left {
@@ -11,8 +11,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-inline-size: var(--dt-size-650);
-  block-size: var(--dt-size-100-percent);
+  min-inline-size: var(--dt-layout-75);
+  block-size: var(--dt-layout-100-percent);
   background-color: transparent;
   background-image: none;
   border-width: 0;
@@ -25,13 +25,13 @@
 }
 
 .d-recipe-contact-info__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-recipe-contact-info__bottom {
-  margin-block-start: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-25);
 }
 
 .d-recipe-contact-info__right {
@@ -43,15 +43,15 @@
 .d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;
-  margin-inline-end: var(--dt-size-300-negative);
+  margin-inline-end: var(--dt-spacing-50-negative);
 
   .d-avatar {
     box-sizing: unset;
-    border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
+    border: var(--dt-size-border-300) solid var(--contact-info-avatar-border-color);
     border-radius: var(--dt-size-radius-pill);
 
     &.d-recipe-contact-info__avatar-stacked {
-      margin-inline-start: var(--dt-size-550-negative);
+      margin-inline-start: var(--dt-spacing-300-negative);
     }
 
     &.d-recipe-contact-info__avatar-halo {

package/lib/build/less/recipes/editor.less

@@ -5,20 +5,20 @@
 }
 
 .d-recipe-editor__top-bar {
-  padding: var(--dt-size-400);
+  padding: var(--dt-spacing-100);
   background-color: var(--dt-color-surface-secondary);
 }
 
 .d-recipe-editor__button-group-divider {
-  inline-size: var(--dt-size-100);
-  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-inline-start: var(--dt-size-400);
+  inline-size: var(--dt-size-border-100);
+  block-size: calc(var(--dt-layout-25) * 1.75);
+  margin-inline-start: var(--dt-spacing-100);
   background: var(--dt-color-border-subtle);
 }
 
 .d-recipe-editor-link__input-wrapper {
-  margin-block-start: var(--dt-size-350);
-  padding-block: var(--dt-size-200) var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-75);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-25);
   background-color: var(--dt-color-surface-secondary);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   outline: none;
@@ -26,26 +26,26 @@
 }
 
 .d-recipe-editor__popover-content {
-  padding: var(--dt-size-500);
+  padding: var(--dt-spacing-200);
 }
 
 .d-recipe-editor__popover-footer {
-  padding-inline: var(--dt-size-550) var(--dt-size-450);
+  padding-inline: var(--dt-spacing-300) var(--dt-spacing-150);
 }
 
 .d-recipe-editor__content {
-  margin: var(--dt-size-400) var(--dt-size-500) var(--dt-size-500);
+  margin: var(--dt-spacing-100) var(--dt-spacing-200) var(--dt-spacing-200);
   overflow: auto;
   cursor: text;
 }
 
 .d-recipe-editor__content-input {
-  margin-block: var(--dt-size-350) var(--dt-size-350);
-  margin-inline-start: var(--dt-size-500);
+  margin-block: var(--dt-spacing-75) var(--dt-spacing-75);
+  margin-inline-start: var(--dt-spacing-200);
 }
 
 .d-recipe-editor__link {
   display: inline-block;
   cursor: text;
 }
-}
+}

package/lib/build/less/recipes/emoji_row.less

@@ -2,7 +2,7 @@
 .d-recipe-emoji-row {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
 }
 
 .d-recipe-emoji-row__tooltip {
@@ -10,15 +10,15 @@
 }
 
 .d-recipe-emoji-row__tooltip-content {
-   max-inline-size: var(--dt-size-875);
+   max-inline-size: var(--dt-layout-350);
 }
 
 .d-recipe-emoji-row__tooltip-emoji {
   display: inline-block;
-  padding: var(--dt-size-300);
+  padding: var(--dt-spacing-50);
   background-color: var(--dt-color-neutral-white);
   border-radius: var(--dt-size-radius-300);
-  margin-block: var(--dt-size-300) var(--dt-size-350);
+  margin-block: var(--dt-spacing-50) var(--dt-spacing-75);
 
   .d-emoji {
     block-size: var(--icon-size);
@@ -40,8 +40,8 @@
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
   --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
 
-  block-size: var(--dt-size-550);
-  padding: var(--dt-size-300) var(--dt-size-400);
+  block-size: calc(var(--dt-layout-25) * 1.5);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
   color: var(--emoji-item-color-foreground);
   background-color: var(--emoji-item-color-background);
   border: 0;
@@ -49,7 +49,7 @@
   box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
 
   &.d-recipe-emoji-row__picker {
-    padding: var(--dt-size-200) var(--dt-size-350);
+    padding: var(--dt-spacing-25) var(--dt-spacing-75);
   }
 
   &:hover {
@@ -98,7 +98,7 @@
   --emoji-size: calc(var(--dt-icon-size-200) + .2rem);
 
   display: inline-flex;
-  margin-inline-end: var(--dt-size-300);
+  margin-inline-end: var(--dt-spacing-50);
   inline-size: var(--emoji-size);
   block-size: var(--emoji-size);
 }

package/lib/build/less/recipes/feed_item_pill.less

@@ -4,12 +4,12 @@
 }
 
 .d-recipe-feed-item-pill__wrapper {
-  padding: var(--dt-size-400);
+  padding: var(--dt-spacing-100);
   background-color: var(--dt-color-surface-secondary);
 }
 
 .d-recipe-feed-item-pill__button {
-  inline-size: var(--dt-size-100-percent);
+  inline-size: var(--dt-layout-100-percent);
   text-align: start;
   background-color: var(--dt-color-surface-moderate);
   border-width: 0;
@@ -23,17 +23,17 @@
 }
 
 .d-recipe-feed-item-pill__layout {
-  gap: var(--dt-size-300);
-  inline-size: var(--dt-size-100-percent);
-  padding: var(--dt-size-400);
+  gap: var(--dt-spacing-50);
+  inline-size: var(--dt-layout-100-percent);
+  padding: var(--dt-spacing-100);
   line-height: var(--dt-font-line-height-300)
 }
 
 .d-recipe-feed-item-pill__icon {
   display: grid;
   place-content: center;
-  min-inline-size: var(--dt-size-600);
-  block-size: var(--dt-size-100-percent);
+  min-inline-size: var(--dt-layout-50);
+  block-size: var(--dt-layout-100-percent);
 
   & svg {
     animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -48,25 +48,25 @@
 .d-recipe-feed-item-pill__title {
   display: grid;
   align-content: center;
-  block-size: var(--dt-size-100-percent);
+  block-size: var(--dt-layout-100-percent);
   font-weight: var(--dt-font-weight-bold);
 }
 
 .d-recipe-feed-item-pill__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-recipe-feed-item-pill__bottom {
-  margin-block-start: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-25);
 }
 
 .d-recipe-feed-item-pill__right {
   display: grid;
   place-content: center;
-  min-inline-size: var(--dt-size-600);
-  block-size: var(--dt-size-100-percent);
+  min-inline-size: var(--dt-layout-50);
+  block-size: var(--dt-layout-100-percent);
 }
 
 // Gradient radius solution taken from https://stackoverflow.com/a/53037637
@@ -74,7 +74,7 @@
   overflow: hidden;
   background-clip: content-box, border-box;
   background-origin: border-box;
-  border: double var(--dt-size-100) transparent;
+  border: double var(--dt-size-border-100) transparent;
   border-radius: var(--dt-size-radius-600);
 }
 

package/lib/build/less/recipes/feed_item_row.less

@@ -2,8 +2,8 @@
 .d-recipe-feed-item-row {
   position: relative;
   box-sizing: border-box;
-  inline-size: var(--dt-size-100-percent);
-  padding: var(--dt-size-300) var(--dt-size-500);
+  inline-size: var(--dt-layout-100-percent);
+  padding: var(--dt-spacing-50) var(--dt-spacing-200);
 
   &:focus-visible {
     box-shadow: var(--dt-shadow-focus-inset);
@@ -12,7 +12,7 @@
   .d-list-item__left {
     display: block;
     align-content: flex-start;
-    min-inline-size: var(--dt-size-600);
+    min-inline-size: var(--dt-layout-50);
     text-align: end;
   }
 
@@ -44,11 +44,11 @@
 }
 
 .d-recipe-feed-item-row__avatar-container {
-  padding-block: var(--dt-size-300) var(--dt-size-300);
+  padding-block: var(--dt-spacing-50) var(--dt-spacing-50);
 }
 
 .d-recipe-feed-item-row__attachment {
-  padding-block: var(--dt-size-200) var(--dt-size-300);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-50);
 }
 
 .d-recipe-feed-item-row__image {
@@ -69,7 +69,7 @@
 .d-recipe-feed-item-row__header {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: baseline;
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
@@ -88,11 +88,11 @@
 .d-recipe-feed-item-row__reactions {
   display: flex;
   flex-wrap: wrap;
-  padding-block: var(--dt-size-200) var(--dt-size-200);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-25);
 }
 
 .d-recipe-feed-item-row__threading {
-  padding-block: var(--dt-size-200) var(--dt-size-200);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-25);
 }
 
 .d-recipe-feed-item-row__left-time {
@@ -105,7 +105,7 @@
 
 .d-recipe-feed-item-row__menu {
   position: absolute;
-  inset-block-start: var(--dt-size-550-negative);
-  inset-inline-end: var(--dt-size-450);
+  inset-block-start: var(--dt-spacing-300-negative);
+  inset-inline-end: var(--dt-spacing-150);
 }
 }

package/lib/build/less/recipes/grouped_chip.less

@@ -15,14 +15,14 @@
 }
 
 .d-recipe-grouped-chip__content-left {
-  max-inline-size: var(--dt-size-730);
+  max-inline-size: calc(var(--dt-layout-125) + var(--dt-spacing-25));
   background-color: var(--dt-color-surface-moderate-opaque);
   border-start-start-radius: var(--dt-size-radius-pill);
   border-end-start-radius: var(--dt-size-radius-pill);
 }
 
 .d-recipe-grouped-chip__content-right {
-  max-inline-size: var(--dt-size-730);
+  max-inline-size: calc(var(--dt-layout-125) + var(--dt-spacing-25));
   background-color: var(--dt-color-purple-200);
   border-start-end-radius: var(--dt-size-radius-pill);
   border-end-end-radius: var(--dt-size-radius-pill);

package/lib/build/less/recipes/ivr_node.less

@@ -10,18 +10,18 @@
   cursor: pointer;
 
   .d-card {
-    inline-size: var(--dt-size-100-percent);
+    inline-size: var(--dt-layout-100-percent);
   }
 
   .d-card__header {
-    margin-block-start: var(--dt-size-100-negative);
-    padding: var(--dt-size-0);
+    margin-block-start: var(--dt-spacing-1-negative);
+    padding: var(--dt-spacing-0);
     border-start-start-radius: var(--dt-size-border-300);
     border-start-end-radius: var(--dt-size-border-300);
   }
 
   .d-card__content {
-    padding: var(--dt-size-400) var(--dt-size-450) var(--dt-size-450);
+    padding: var(--dt-spacing-100) var(--dt-spacing-150) var(--dt-spacing-150);
     border-block-start: var(--dt-size-border-100) solid var(--dt-color-black-300);
   }
 }
@@ -88,27 +88,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--dt-size-400);
-  block-size: var(--dt-size-400);
-  margin-block-end: var(--dt-size-300-negative);
+  inline-size: calc(var(--dt-layout-25) / 2);
+  block-size: calc(var(--dt-layout-25) / 2);
+  margin-block-end: var(--dt-spacing-50-negative);
   background-color: var(--dt-color-purple-950);
   border-color: var(--dt-color-purple-950);
   border-radius: var(--dt-size-radius-circle);
 }
 
 .d-recipe-ivr-node__connector--selected {
-  margin-block-end: var(--dt-size-400-negative);
+  margin-block-end: var(--dt-spacing-100-negative);
 }
 
 .d-recipe-ivr-node__connector-dtmf {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-550);
-  margin-block-end: var(--dt-size-450-negative);
+  inline-size: calc(var(--dt-layout-25) * 1.5);
+  block-size: calc(var(--dt-layout-25) * 1.5);
+  margin-block-end: var(--dt-spacing-150-negative);
   color: var(--dt-color-foreground-primary-inverted);
   font-size: var(--dt-font-size-200);
 
   .d-recipe-ivr-node__connector--selected {
-    margin-block-end: var(--dt-size-500-negative);
+    margin-block-end: var(--dt-spacing-200-negative);
   }
 }
 
@@ -127,7 +127,7 @@
 }
 
 .d-recipe-ivr-node__dropdown-list {
-  inline-size: var(--dt-size-825);
+  inline-size: var(--dt-layout-250);
 }
 
 .d-recipe-ivr-node__goto-icon {

package/lib/build/less/recipes/leftbar_row.less

@@ -5,11 +5,11 @@
   //  ----------------------------------------------------------------------------
   --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
   --leftbar-row-color-background: var(--dt-shell-color-surface-default);
-  --leftbar-row-radius: var(--dt-size-radius-pill);
+  --leftbar-row-radius: var(--dt-size-radius-400); // TODO: not a final solution
   --leftbar-row-opacity: 100%;
   --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
-  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
-  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
+  --leftbar-row-alpha-width: calc(var(--dt-layout-50) + var(--dt-spacing-50));
+  --leftbar-row-alpha-height: calc(var(--dt-layout-50) + var(--dt-spacing-50));
   --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
   --leftbar-row-unread-badge-display: inline-flex;
   --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
@@ -19,9 +19,9 @@
   --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
   --leftbar-row-status-font-size: var(--dt-font-size-100);
   --leftbar-row-status-line-height: var(--dt-font-line-height-100);
-  --leftbar-row-action-position-right: var(--dt-size-400);
+  --leftbar-row-action-position-right: var(--dt-spacing-100);
   --leftbar-row-action-position-bottom: 50%;
-  --leftbar-row-action-width: var(--dt-size-550);
+  --leftbar-row-action-width: calc(var(--dt-layout-25) * 1.5);
   --leftbar-row-action-height: var(--leftbar-row-action-width);
 
   .d-presence {
@@ -104,7 +104,7 @@
   }
 
   &__status {
-    padding-block-end: var(--dt-size-100);
+    padding-block-end: var(--dt-spacing-1);
     overflow: hidden;
     color: var(--leftbar-row-status-color-foreground);
     font-size: var(--leftbar-row-status-font-size);
@@ -142,11 +142,11 @@
   }
 
   &__is-typing {
-    --is-typing-size-shape: var(--dt-size-550);
+    --is-typing-size-shape: calc(var(--dt-layout-25) * 1.5);
 
     position: absolute;
     display: flex;
-    gap: var(--dt-size-200);
+    gap: var(--dt-spacing-25);
     align-items: center;
     justify-content: center;
     inline-size: var(--is-typing-size-shape);
@@ -156,8 +156,8 @@
 
     & span {
       display: inline-block;
-      inline-size: var(--dt-size-300);
-      block-size: var(--dt-size-300);
+      inline-size: var(--dt-spacing-25);
+      block-size: var(--dt-spacing-25);
       padding: 0;
       background: var(--dt-color-surface-strong);
       border-radius: var(--dt-size-radius-pill);
@@ -256,7 +256,7 @@
     box-sizing: border-box;
     inline-size: var(--leftbar-row-alpha-width);
     block-size: var(--leftbar-row-alpha-height);
-    padding-inline: var(--dt-size-400) var(--dt-size-400);
+    padding-inline: var(--dt-spacing-50);
     color: var(--leftbar-row-alpha-color-foreground);
     border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
   }
@@ -271,7 +271,7 @@
     inset-block-start: var(--leftbar-row-action-position-bottom);
     inset-inline-end: var(--leftbar-row-action-position-right);
     display: flex;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: center;
     justify-content: flex-end;
     box-sizing: border-box;
@@ -310,13 +310,13 @@
 
   &__active-voice {
     display: inline-flex;
-    color: var(--dt-color-purple-600);
+    color: var(--dt-color-link-primary);
     .d-recipe-leftbar-row-opacity-pulsate();
   }
 
   &__dnd {
-    padding-block-start: var(--dt-size-200);
-    padding-inline-end: var(--dt-size-300);
+    padding-block-start: var(--dt-spacing-25);
+    padding-inline-end: var(--dt-spacing-50);
     color: var(--dt-color-foreground-tertiary);
     font-weight: var(--dt-font-weight-medium);
     font-size: var(--dt-font-size-100);
@@ -325,32 +325,32 @@
 
   &__container--off-duty {
     background-color: var(--dt-color-surface-critical);
-    border: var(--dt-size-100) solid var(--dt-color-border-subtle);
+    border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-500);
 
     .d-recipe-leftbar-row__primary {
-      margin: calc(var(--dt-size-100) * -1);
+      margin: var(--dt-spacing-1-negative);
     }
   }
 
   &--contact-centers {
     .d-recipe-leftbar-row__alpha {
-      padding-inline: var(--dt-size-450) var(--dt-size-450);
+      padding-inline: var(--dt-spacing-150) var(--dt-spacing-150);
     }
 
     .d-recipe-leftbar-row__action-container {
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
-      min-inline-size: var(--dt-size-600);
-      block-size: var(--dt-size-500);
+      min-inline-size: var(--dt-layout-50);
+      block-size: var(--dt-layout-25);
     }
   }
 
   &__icon-cc {
-    inline-size: calc(var(--dt-size-300) * 3.5);
-    block-size: calc(var(--dt-size-300) * 3.5);
-    border-radius: var(--dt-size-200);
+    inline-size: calc(var(--dt-layout-25) - var(--dt-spacing-25));
+    block-size: calc(var(--dt-layout-25) - var(--dt-spacing-25));
+    border-radius: var(--dt-size-radius-200);
   }
 }
 

package/lib/build/less/recipes/message_input.less

@@ -14,12 +14,12 @@
 
   &:focus-within {
     border-color: var(--dt-color-border-bold);
-    box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
+    box-shadow: 0 0 var(--dt-spacing-50) 0 var(--dt-color-surface-moderate-opaque);
   }
 }
 
 .d-recipe-message-input__button-stack {
-  padding: var(--dt-size-400);
+  padding: var(--dt-spacing-100);
   background-color: var(--dt-color-surface-secondary);
 }
 
@@ -28,7 +28,7 @@
 }
 
 .d-recipe-message-input__editor-wrapper {
-  padding: var(--dt-size-450) var(--dt-size-500) var(--dt-size-300);
+  padding: var(--dt-spacing-150) var(--dt-layout-25) var(--dt-spacing-50);
 }
 
 .d-recipe-message-input__link-popover {
@@ -36,7 +36,7 @@
 }
 
 .d-recipe-message-input__remaining-char {
-  margin-inline-end: var(--dt-size-300);
+  margin-inline-end: var(--dt-spacing-50);
   color: var(--dt-color-foreground-critical);
   font-size: var(--dt-font-size-100);
 }
@@ -55,7 +55,7 @@
 .d-recipe-message-input__send-button.d-recipe-message-input__button:not(.d-btn--icon-only),
 .d-recipe-message-input__cancel-button {
   max-inline-size: unset;
-  padding: var(--dt-size-350);
+  padding: var(--dt-spacing-75);
 }
 
 .d-recipe-message-input__send-button--disabled {
@@ -68,7 +68,7 @@
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding: var(--dt-size-300) var(--dt-size-400) var(--dt-size-400);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100) var(--dt-spacing-100);
 }
 
 .d-recipe-message-input__bottom-section-left,
@@ -93,10 +93,10 @@
 .d-recipe-message-input-meeting-pill__layout {
   grid-template-areas: 'start content end';
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
-  gap: var(--dt-size-400);
+  gap: var(--dt-spacing-100);
   align-items: center;
-  max-inline-size: var(--dt-size-905);
-  padding: var(--dt-size-200) var(--dt-size-400);
+  max-inline-size: var(--dt-layout-400);
+  padding: var(--dt-spacing-25) var(--dt-spacing-100);
   font: var(--dt-typography-headline-md);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
@@ -105,7 +105,7 @@
 .d-recipe-message-input-meeting-pill__icon {
   display: flex;
   align-items: center;
-  padding: var(--dt-size-350);
+  padding: var(--dt-spacing-75);
 }
 
 .d-recipe-message-input-meeting-pill__close {
@@ -119,9 +119,9 @@
 }
 
 .d-recipe-message-input--button-group-divider {
-  inline-size: var(--dt-size-100);
-  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-inline: var(--dt-size-300);
+  inline-size: var(--dt-spacing-1);
+  block-size: var(--dt-spacing-350);
+  margin-inline: var(--dt-spacing-50);
   background: var(--dt-color-border-subtle);
 }
 
@@ -134,10 +134,10 @@
 }
 
 .d-recipe-message-input__link-input {
-  margin-block-start: var(--dt-size-350);
-  padding-block: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-75);
+  padding-block: var(--dt-spacing-25);
   background-color: var(--dt-color-surface-secondary);
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-default);
 }
 }

package/lib/build/less/recipes/settings_menu_button.less

@@ -1,11 +1,10 @@
 @layer dialtone.components {
 .d-recipe-settings-menu-button {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-600);
-  padding: var(--dt-size-0);
+  inline-size: calc(var(--dt-layout-25) * 1.5);
+  block-size: var(--dt-layout-50);
+  padding: var(--dt-spacing-0);
   color: var(--dt-shell-action-color-foreground-primary-default);
   background-color: var(--dt-shell-action-color-background-primary-default);
-  border-radius: var(--dt-size-550);
 
   &:hover {
     color: var(--dt-shell-action-color-foreground-primary-hover);
@@ -18,15 +17,16 @@
 }
 
 .d-recipe-settings-menu-button-update {
-  block-size: var(--dt-size-600);
-  color: var(--dt-color-blue-800);
-  background-color: oklch(from var(--dt-color-blue-200) l c h / 0.25);
-  border-color: oklch(from var(--dt-color-blue-200) l c h / 0.25);
+  block-size: var(--dt-layout-50);
+  padding-inline-start: var(--dt-spacing-150);
+  color: var(--dt-color-blue-800); // TODO
+  background-color: var(--dt-color-surface-info);
+  border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-pill);
 
   &:hover {
-    color: var(--dt-shell-action-color-foreground-primary-hover);
-    background-color: oklch(from var(--dt-color-blue-200) l c h / 0.5);
+    color: var(--dt-shell-action-color-foreground-secondary-hover);
+    background-color: oklch(from var(--dt-color-surface-info) calc(l - 0.01) c h);
   }
 }
 }