fix(pie-docs): DSW-1604 fix some tokens

justeattakeaway · Jan 19, 2024 · 3cf010a · 3cf010a
1 parent 0c3866d
commit 3cf010a
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 21 deletions.
diff --git a/apps/pie-docs/src/assets/styles/components/_anchorIcon.scss b/apps/pie-docs/src/assets/styles/components/_anchorIcon.scss
@@ -54,18 +54,18 @@ h4:has(.c-anchorIcon) {
 }
 
 $headingSizes: (
-    'h2' f.$font-heading-xl-line-height--wide f.$font-heading-xl-line-height--narrow,
-    'h3' f.$font-heading-m-line-height--wide f.$font-heading-m-line-height--narrow,
-    'h4' f.$font-heading-s-line-height--wide f.$font-heading-s-line-height--narrow
+    'h2' --dt-font-heading-xl-line-height--wide --dt-font-heading-xl-line-height--narrow,
+    'h3' --dt-font-heading-m-line-height--wide --dt-font-heading-m-line-height--wide,
+    'h4' --dt-font-heading-s-line-height--wide --dt-font-heading-s-line-height--wide
 );
 
 @each $headingSize, $wideToken, $narrowToken in $headingSizes {
     #{$headingSize}:has(.c-anchorIcon) {
         .c-anchorIcon {
-            bottom: calc((($narrowToken * 1px) - $anchor-size) / 2);
+            bottom: calc((#{p.font-size($narrowToken)} - $anchor-size) / 2);
 
             @include f.media('>=wide') {
-                bottom: calc((($wideToken * 1px) - $anchor-size) / 2);
+                bottom: calc((#{p.font-size($wideToken)} - $anchor-size) / 2);
             }
         }
     }

diff --git a/apps/pie-docs/src/assets/styles/components/_categorisedIconList.scss b/apps/pie-docs/src/assets/styles/components/_categorisedIconList.scss
@@ -40,7 +40,7 @@ $icon-preview-size: 64px;
 
     p {
         margin-block-start: 0;
-        @include p.font-size(--dt-font-heading-s-size--wide);
+        @include p.font-size(--dt-font-body-s-size--wide);
     }
 
     .c-categorisedIconList-icon svg {

diff --git a/apps/pie-docs/src/assets/styles/components/_componentDetailsTable.scss b/apps/pie-docs/src/assets/styles/components/_componentDetailsTable.scss
@@ -56,5 +56,5 @@
     padding-block: 2px;
     padding-inline: var(--dt-spacing-a);
     border-radius: f.$radius-rounded-b;
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
 }
diff --git a/apps/pie-docs/src/assets/styles/components/_contentImage.scss b/apps/pie-docs/src/assets/styles/components/_contentImage.scss
@@ -90,6 +90,6 @@ $contentImage-height-l--mobile:           400px;
 
 .c-contentImage-caption {
     margin-block-start: var(--dt-spacing-d);
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
     max-width: v.$typography-content-max-width;
 }
diff --git a/apps/pie-docs/src/assets/styles/components/_contentPage.scss b/apps/pie-docs/src/assets/styles/components/_contentPage.scss
@@ -40,7 +40,7 @@
 }
 
 .c-contentPage-header-description {
-    @include p.font-size(--dt-font-heading-l-size--wide);
+    @include p.font-size(--dt-font-body-l-size--wide);
     margin-block-start: var(--dt-spacing-e);
     max-width: 50ch;
 

diff --git a/apps/pie-docs/src/assets/styles/components/_footer.scss b/apps/pie-docs/src/assets/styles/components/_footer.scss
@@ -77,7 +77,7 @@
     }
 
     h3 {
-        @include p.font-size(--dt-font-heading-s-size--wide);
+        @include p.font-size(--dt-font-body-s-size--wide);
         text-transform: capitalize;
         margin-block-end: var(--dt-spacing-a);
     }

diff --git a/apps/pie-docs/src/assets/styles/components/_heroBanner.scss b/apps/pie-docs/src/assets/styles/components/_heroBanner.scss
@@ -42,7 +42,7 @@
 }
 
 .c-heroBanner-description {
-    @include p.font-size(--dt-font-heading-l-size--wide);
+    @include p.font-size(--dt-font-body-l-size--wide);
     margin-block-start: var(--dt-spacing-d);
     max-width: 50ch;
 

diff --git a/apps/pie-docs/src/assets/styles/components/_list.scss b/apps/pie-docs/src/assets/styles/components/_list.scss
@@ -15,7 +15,7 @@
     .c-list-item {
         counter-increment: item;
         margin-block-end: var(--dt-spacing-b);
-        @include p.font-size(--dt-font-heading-l-size--wide);
+        @include p.font-size(--dt-font-body-l-size--wide);
         display: flex;
 
         @include f.media('>=wide') {
@@ -24,7 +24,7 @@
 
         &:before {
             content: counter(item);
-            @include p.font-size(--dt-font-heading-s-size--wide);
+            @include p.font-size(--dt-font-body-s-size--wide);
             font-weight: var(--dt-font-weight-bold);
             margin-inline-end: var(--dt-spacing-c);
             width: 25px;
@@ -46,7 +46,7 @@
     flex-wrap: wrap;
 
     & .c-list-item {
-        @include p.font-size(--dt-font-heading-s-size--wide);
+        @include p.font-size(--dt-font-body-s-size--wide);
         background-color: var(--dt-color-container-strong);
         padding-block: 2px;
         padding-inline: var(--dt-spacing-a);
@@ -58,7 +58,7 @@
     margin: 0;
 
     .c-list-item {
-        @include p.font-size(--dt-font-heading-l-size--wide);
+        @include p.font-size(--dt-font-body-l-size--wide);
         display: flex;
         align-items: flex-start;
         justify-content: flex-start;

diff --git a/apps/pie-docs/src/assets/styles/components/_nav.scss b/apps/pie-docs/src/assets/styles/components/_nav.scss
@@ -6,7 +6,7 @@ $nav-category-icon-width: var(--dt-spacing-e); // this needs to be kept in sync
 $nav-item-inline-start-margin: calc($nav-category-gap + $nav-category-icon-width);
 
 .c-nav {
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
     background: var(--dt-color-container-default);
     padding-top: var(--dt-spacing-d);
 

diff --git a/apps/pie-docs/src/assets/styles/components/_simpleTable.scss b/apps/pie-docs/src/assets/styles/components/_simpleTable.scss
@@ -12,7 +12,7 @@
 
 .c-simpleTable--monospace {
     font-family: PTMono, Consolas, monospace;
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
 }
 
 .c-simpleTable--swatch {

diff --git a/apps/pie-docs/src/assets/styles/components/_toggle.scss b/apps/pie-docs/src/assets/styles/components/_toggle.scss
@@ -33,7 +33,7 @@ $toggle-item-elevation--checked: f.$elevation-02;
 .c-toggle-label {
     padding-block: $toggle-item-padding-y;
     padding-inline: $toggle-item-padding-x;
-    @include p.font-size(--dt-font-heading-l-size--wide);
+    @include p.font-size(--dt-font-body-l-size--wide);
     position: relative; // context for :before
 
     align-items: center;

diff --git a/apps/pie-docs/src/assets/styles/components/_tokensTable.scss b/apps/pie-docs/src/assets/styles/components/_tokensTable.scss
@@ -199,12 +199,12 @@ $tokensTable-item-vertical-padding: var(--dt-spacing-e);
 }
 
 .c-tokensTable-tokenDescription {
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
 }
 
 .c-tokensTable-heading {
     font-weight: var(--dt-font-weight-bold);
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
     color: var(--dt-color-content-subdued);
 }
 
@@ -285,7 +285,7 @@ $tokensTable-item-vertical-padding: var(--dt-spacing-e);
     border-radius: f.$radius-03;
     padding-block: calc(var(--dt-spacing-a) / 2);
     padding-inline: var(--dt-spacing-a);
-    @include p.font-size(--dt-font-heading-s-size--wide);
+    @include p.font-size(--dt-font-body-s-size--wide);
 }
 
 .c-tokensTable-token--light {