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

package/lib/build/less/components/tooltip.less

@@ -45,18 +45,18 @@
   --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
   --tooltip-font-weight: var(--dt-font-weight-medium);
   --tooltip-line-height: var(--dt-font-line-height-300);
-  --tooltip-padding-y: var(--dt-size-400); // 8
-  --tooltip-padding-x: var(--dt-size-450); // 12
+  --tooltip-padding-y: var(--dt-spacing-100); // 8
+  --tooltip-padding-x: var(--dt-spacing-150); // 12
   --tooltip-border-radius: var(--dt-size-radius-300); // 4
 
   z-index: var(--zi-tooltip);
-  max-inline-size: var(--dt-size-875);
+  max-inline-size: var(--dt-layout-350);
   padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
   color: var(--tooltip-color-text);
   font-weight: var(--tooltip-font-weight);
   font-size: var(--dt-font-size-100);
   line-height: var(--tooltip-line-height);
-  letter-spacing: calc(var(--dt-size-100) * 0.25);
+  letter-spacing: calc(var(--dt-spacing-1) * 0.25);
   text-align: center;
   overflow-wrap: break-word;
   background-color: var(--tooltip-color-background);
@@ -64,7 +64,7 @@
 
   &::after {
     position: absolute;
-    border: var(--dt-size-350) solid transparent;
+    border: var(--dt-spacing-75) solid transparent;
     content: '';
   }
 }
@@ -131,11 +131,11 @@
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-inset-block-start: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateY(var(--dt-size-500)); // 16
+inset-block-start: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateY(var(--dt-layout-25)); // 16
 
 &::after {
-  inset-block-start: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-block-start: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-block-start-width: 0;
   border-block-end-color: var(--tooltip-color-background);
 }
@@ -149,11 +149,11 @@ transform: translateY(var(--dt-size-500)); // 16
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-inset-block-end: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateY(var(--dt-size-500-negative)); // -16
+inset-block-end: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateY(var(--dt-layout-25-negative)); // -16
 
 &::after {
-  inset-block-end: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-block-end: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-block-start-color: var(--tooltip-color-background);
   border-block-end-width: 0;
 }
@@ -165,10 +165,10 @@ transform: translateY(var(--dt-size-500-negative)); // -16
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-inset-inline-start: var(--dt-size-200-negative); // -2
+inset-inline-start: var(--dt-spacing-25-negative); // -2
 
 &::after {
-  inset-inline-start: var(--dt-size-500); // 16
+  inset-inline-start: var(--dt-spacing-200); // 16
 }
 }
 
@@ -180,7 +180,7 @@ inset-inline-start: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow--bottom-center {
 &::after {
   inset-inline-start: 50%;
-  margin-inline-start: var(--dt-size-350-negative); // -6
+  margin-inline-start: var(--dt-spacing-75-negative); // -6
 }
 }
 
@@ -190,10 +190,10 @@ inset-inline-start: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-inset-inline-end: var(--dt-size-200-negative); // -2
+inset-inline-end: var(--dt-spacing-25-negative); // -2
 
 &::after {
-  inset-inline-end: var(--dt-size-500); // 16
+  inset-inline-end: var(--dt-spacing-200); // 16
 }
 }
 
@@ -205,11 +205,11 @@ inset-inline-end: var(--dt-size-200-negative); // -2
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-inset-inline-end: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateX(var(--dt-size-500-negative)); // -16
+inset-inline-end: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateX(var(--dt-layout-25-negative)); // -16
 
 &::after {
-  inset-inline-end: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-inline-end: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-inline-end-width: 0;
   border-inline-start-color: var(--tooltip-color-background);
 }
@@ -223,11 +223,11 @@ transform: translateX(var(--dt-size-500-negative)); // -16
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-inset-inline-start: calc(100% + var(--dt-size-450)); // 100% + 12
-transform: translateX(var(--dt-size-500)); // 16
+inset-inline-start: calc(100% + var(--dt-spacing-150)); // 100% + 12
+transform: translateX(var(--dt-layout-25)); // 16
 
 &::after {
-  inset-inline-start: calc(var(--dt-size-350-negative) - var(--dt-size-50-negative)); // -5.5
+  inset-inline-start: calc(var(--dt-spacing-75-negative) - calc(var(--dt-spacing-1) / 2)); // -5.5
   border-inline-end-color: var(--tooltip-color-background);
   border-inline-start-width: 0;
 }
@@ -239,10 +239,10 @@ transform: translateX(var(--dt-size-500)); // 16
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-inset-block-start: var(--dt-size-100-negative); // -1
+inset-block-start: var(--dt-spacing-1-negative); // -1
 
 &::after {
-  inset-block-start: var(--dt-size-400); // 8
+  inset-block-start: var(--dt-spacing-100); // 8
 }
 }
 
@@ -254,7 +254,7 @@ inset-block-start: var(--dt-size-100-negative); // -1
 .d-tooltip__arrow--left-center {
 &::after {
   inset-block-start: 50%;
-  margin-block-start: var(--dt-size-350-negative); // -6
+  margin-block-start: var(--dt-spacing-75-negative); // -6
 }
 }
 
@@ -264,10 +264,10 @@ inset-block-start: var(--dt-size-100-negative); // -1
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-inset-block-end: var(--dt-size-100-negative); // -1
+inset-block-end: var(--dt-spacing-1-negative); // -1
 
 &::after {
-  inset-block-end: var(--dt-size-400); // 8
+  inset-block-end: var(--dt-spacing-100); // 8
 }
 }
 }

package/lib/build/less/dialtone-reset.less

@@ -81,13 +81,13 @@ pre {
 
 a {
   background-color: transparent;
-  text-underline-offset: var(--dt-size-200);
+  text-underline-offset: var(--dt-spacing-25);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 
 ins,
 u {
-  text-underline-offset: var(--dt-size-200);
+  text-underline-offset: var(--dt-spacing-25);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 
@@ -100,7 +100,7 @@ abbr[title] {
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
   border-block-end: none; /* 1 */
-  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/dialtone-transitions.less

@@ -49,19 +49,19 @@
 
 @keyframes shake {
   10%, 90% {
-    transform: translate3d(var(--dt-size-300-negative), 0, 0);
+    transform: translate3d(var(--dt-spacing-50-negative), 0, 0);
   }
 
   20%, 80% {
-    transform: translate3d(var(--dt-size-400), 0, 0);
+    transform: translate3d(var(--dt-spacing-100), 0, 0);
   }
 
   30%, 50%, 70% {
-    transform: translate3d(var(--dt-size-500-negative), 0, 0);
+    transform: translate3d(var(--dt-spacing-200-negative), 0, 0);
   }
 
   40%, 60% {
-    transform: translate3d(var(--dt-size-500), 0, 0);
+    transform: translate3d(var(--dt-spacing-200), 0, 0);
   }
 }
 

package/lib/build/less/dialtone.less

@@ -110,8 +110,8 @@
 @layer dialtone.utilities {
   [data-migrate-outline] {
     --outline-color: orangered;
-    --outline-size: var(--dt-size-200);
-    --outline-offset: calc(var(--outline-size) * -1);
+    --outline-size: var(--dt-spacing-25);
+    --outline-offset: var(--dt-spacing-25-negative);
 
     /* stylelint-disable-next-line meowtec/no-px */
     outline: var(--outline-size) solid var(--outline-color) !important;

package/lib/build/less/recipes/attachment_carousel.less

@@ -1,7 +1,7 @@
 @layer dialtone.components {
 .d-recipe-attachment-carousel {
   position: relative;
-  inline-size: var(--dt-size-1000);
+  inline-size: var(--dt-layout-800);
   max-block-size: 100px; /* stylelint-disable-line meowtec/no-px */
 }
 
@@ -18,12 +18,12 @@
 
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
-  inset-block-start: var(--dt-size-30-percent);
+  inset-block-start: var(--dt-layout-30-percent);
   color: var(--dt-color-foreground-tertiary-inverted);
   background-color: var(--dt-color-surface-strong);
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-moderate-inverted);
-  border-width: var(--dt-size-100);
+  border-width: var(--dt-size-border-100);
   opacity: 0;
 
   &:hover {
@@ -36,11 +36,11 @@
 }
 
 .d-recipe-attachment-carousel__arrow--left {
-  inset-inline-start: var(--dt-size-300);
+  inset-inline-start: var(--dt-spacing-50);
 }
 
 .d-recipe-attachment-carousel__arrow--right {
-  inset-inline-end: var(--dt-size-300);
+  inset-inline-end: var(--dt-spacing-50);
 }
 
 .d-recipe-attachment-carousel__image {
@@ -65,19 +65,19 @@
 }
 
 .d-recipe-attachment-carousel__image-viewer {
-  inline-size: var(--dt-size-700);
-  block-size: var(--dt-size-700);
+  inline-size: var(--dt-layout-100);
+  block-size: var(--dt-layout-100);
   object-fit: cover;
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-subtle);
-  border-width: var(--dt-size-350);
+  border-width: var(--dt-spacing-75);
   border-radius: var(--br4);
 }
 
 .d-recipe-attachment-carousel__image-top-right {
   position: absolute;
-  inset-block-start: var(--dt-size-100);
-  inset-inline-end: var(--dt-size-100);
+  inset-block-start: var(--dt-spacing-1);
+  inset-inline-end: var(--dt-spacing-1);
 }
 
 .d-recipe-attachment-carousel__image-progress-bar {
@@ -85,7 +85,7 @@
   inset-block-start: inherit;
   inset-inline-end: inherit;
   display: flex;
-  padding: var(--dt-size-300);
+  padding: var(--dt-spacing-50);
   background-color: var(--dt-color-surface-moderate);
   border-radius: var(--dt-size-radius-circle);
 }

package/lib/build/less/recipes/callbar_button.less

@@ -12,7 +12,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-recipe-callbar-button {
-  padding-inline: var(--dt-size-0);
+  padding-inline: var(--dt-spacing-0);
   color: var(--dt-color-foreground-primary);
 
   &:not(.d-recipe-callbar-button--circle) {

package/lib/build/less/recipes/callbar_button_with_dropdown.less

@@ -1,18 +1,18 @@
 @layer dialtone.components {
 .dt-recipe--callbar-button-with-dropdown--arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-size-450);
-  margin-inline-start: calc(var(--dt-size-300-negative) * 5);
-  padding: var(--dt-size-400);
-  border-radius: var(--dt-size-300);
+  inline-size: var(--dt-layout-25);
+  block-size: var(--dt-layout-25);
+  margin-block-start: var(--dt-spacing-150);
+  margin-inline-start: calc(var(--dt-spacing-50-negative) * 5);
+  padding: var(--dt-spacing-100);
+  border-radius: var(--dt-size-radius-300);
 
   &.d-btn--active {
     background: var(--dt-color-surface-moderate-opaque);
   }
 
   &--large {
-    margin-inline-start: var(--dt-size-550-negative);
+    margin-inline-start: var(--dt-spacing-300-negative);
   }
 
   &__icon {

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -5,12 +5,12 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-size-450);
-  margin-inline-start: calc(var(--dt-size-300-negative) * 5);
-  padding: var(--dt-size-400);
-  border-radius: var(--dt-size-300);
+  inline-size: var(--dt-layout-25);
+  block-size: var(--dt-layout-25);
+  margin-block-start: var(--dt-spacing-150);
+  margin-inline-start: calc(var(--dt-spacing-50-negative) * 5);
+  padding: var(--dt-spacing-100);
+  border-radius: var(--dt-size-radius-300);
 
   .d-btn--active {
     background: var(--dt-color-surface-moderate-opaque);
@@ -18,7 +18,7 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow--large {
-  margin-inline-start: var(--dt-size-550-negative);
+  margin-inline-start: var(--dt-spacing-300-negative);
 }
 
 .d-recipe-callbar-button-with-popover__arrow-icon {
@@ -38,7 +38,7 @@
   .d-popover__header__content {
     display: flex;
     align-items: center;
-    padding-inline: var(--dt-size-450) var(--dt-size-450);
+    padding-inline: var(--dt-spacing-150) var(--dt-spacing-150);
     font-weight: normal;
   }
 }

package/lib/build/less/recipes/callbox.less

@@ -40,14 +40,14 @@
 }
 
 .d-recipe-callbox__avatar {
-  margin-inline-start: var(--dt-size-200);
+  margin-inline-start: var(--dt-spacing-25);
 }
 
 .d-recipe-callbox__main-content-top {
   display: flex;
-  gap: var(--dt-size-350);
+  gap: var(--dt-spacing-75);
   align-items: center;
-  padding: var(--dt-size-400) var(--dt-size-350) var(--dt-size-350) var(--dt-size-400);
+  padding: var(--dt-spacing-100) var(--dt-spacing-75) var(--dt-spacing-75) var(--dt-spacing-100);
 }
 
 .d-recipe-callbox__main-content-bottom {
@@ -58,9 +58,9 @@
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   min-inline-size: 0;
-  padding-inline-start: var(--dt-size-200);
+  padding-inline-start: var(--dt-spacing-25);
 }
 
 .d-recipe-callbox__content-title {
@@ -99,7 +99,7 @@
 
 .d-recipe-callbox--clickable {
   .d-recipe-callbox__content-title {
-    border-radius: var(--dt-size-100);
+    border-radius: var(--dt-size-radius-100);
     cursor: pointer;
     user-select: none;
 

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