From c9b7895d5cc070cdf9926a1a6476634fa8fccdc3 Mon Sep 17 00:00:00 2001
From: mimshins <mostafa.sh.coderino@gmail.com>
Date: Wed, 5 Mar 2025 17:53:25 +0330
Subject: [PATCH] fix(theme): update typography tokens

---
 packages/theme/src/default-theme/tokens.css   | 32 +++++++++----------
 packages/theme/src/default-theme/tokens.ts    | 32 +++++++++----------
 .../web-components/src/badge/badge.style.ts   |  2 +-
 .../web-components/src/banner/banner.style.ts |  4 +--
 .../src/base-input/base-input.style.ts        |  2 +-
 .../base-text-input/base-text-input.style.ts  |  8 ++---
 .../src/bottom-navigation/item/item.style.ts  |  2 +-
 .../src/button/base/base-button.style.ts      |  2 +-
 .../web-components/src/chip/chip.style.ts     |  2 +-
 .../src/empty-state/empty-state.style.ts      |  2 +-
 .../src/file-input/file-input.style.ts        | 12 +++----
 .../web-components/src/modal/modal.style.ts   |  2 +-
 .../web-components/src/notice/notice.style.ts |  2 +-
 .../src/pin-input/pin-input.style.ts          |  8 ++---
 .../src/pinwheel/item/item.style.ts           |  2 +-
 .../src/rate-slider/rate-slider.style.ts      |  2 +-
 .../src/snackbar/snackbar.style.ts            |  2 +-
 .../src/stepper/stepper.style.ts              |  2 +-
 .../src/tooltip/tooltip.style.ts              |  2 +-
 19 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/theme/src/default-theme/tokens.css b/packages/theme/src/default-theme/tokens.css
index 58c2cbca..0b6a4451 100644
--- a/packages/theme/src/default-theme/tokens.css
+++ b/packages/theme/src/default-theme/tokens.css
@@ -149,67 +149,67 @@
   --tapsi-stroke-1: 1px;
   --tapsi-stroke-2: 2px;
   --tapsi-typography-font-family: "Vazirmatn", sans-serif;
-  --tapsi-typography-body-xs-font: var(--tapsi-font-family);
+  --tapsi-typography-body-xs-font: var(--tapsi-typography-font-family);
   --tapsi-typography-body-xs-size: 0.75rem;
   --tapsi-typography-body-xs-height: 1.6666666667;
   --tapsi-typography-body-xs-weight: 400;
-  --tapsi-typography-body-sm-font: var(--tapsi-font-family);
+  --tapsi-typography-body-sm-font: var(--tapsi-typography-font-family);
   --tapsi-typography-body-sm-size: 0.875rem;
   --tapsi-typography-body-sm-height: 1.7142857143;
   --tapsi-typography-body-sm-weight: 400;
-  --tapsi-typography-body-md-font: var(--tapsi-font-family);
+  --tapsi-typography-body-md-font: var(--tapsi-typography-font-family);
   --tapsi-typography-body-md-size: 1rem;
   --tapsi-typography-body-md-height: 1.75;
   --tapsi-typography-body-md-weight: 400;
-  --tapsi-typography-body-lg-font: var(--tapsi-font-family);
+  --tapsi-typography-body-lg-font: var(--tapsi-typography-font-family);
   --tapsi-typography-body-lg-size: 1.125rem;
   --tapsi-typography-body-lg-height: 1.7777777778;
   --tapsi-typography-body-lg-weight: 400;
-  --tapsi-typography-label-xxs-font: var(--tapsi-font-family);
+  --tapsi-typography-label-xxs-font: var(--tapsi-typography-font-family);
   --tapsi-typography-label-xxs-size: 0.625rem;
   --tapsi-typography-label-xxs-height: 1.6;
   --tapsi-typography-label-xxs-weight: 500;
-  --tapsi-typography-label-xs-font: var(--tapsi-font-family);
+  --tapsi-typography-label-xs-font: var(--tapsi-typography-font-family);
   --tapsi-typography-label-xs-size: 0.75rem;
   --tapsi-typography-label-xs-height: 2;
   --tapsi-typography-label-xs-weight: 500;
-  --tapsi-typography-label-sm-font: var(--tapsi-font-family);
+  --tapsi-typography-label-sm-font: var(--tapsi-typography-font-family);
   --tapsi-typography-label-sm-size: 0.875rem;
   --tapsi-typography-label-sm-height: 1.7142857143;
   --tapsi-typography-label-sm-weight: 500;
-  --tapsi-typography-label-md-font: var(--tapsi-font-family);
+  --tapsi-typography-label-md-font: var(--tapsi-typography-font-family);
   --tapsi-typography-label-md-size: 1rem;
   --tapsi-typography-label-md-height: 1.75;
   --tapsi-typography-label-md-weight: 500;
-  --tapsi-typography-label-lg-font: var(--tapsi-font-family);
+  --tapsi-typography-label-lg-font: var(--tapsi-typography-font-family);
   --tapsi-typography-label-lg-size: 1.125rem;
   --tapsi-typography-label-lg-height: 1.7777777778;
   --tapsi-typography-label-lg-weight: 500;
-  --tapsi-typography-headline-xs-font: var(--tapsi-font-family);
+  --tapsi-typography-headline-xs-font: var(--tapsi-typography-font-family);
   --tapsi-typography-headline-xs-size: 1rem;
   --tapsi-typography-headline-xs-height: 1.5;
   --tapsi-typography-headline-xs-weight: 600;
-  --tapsi-typography-headline-sm-font: var(--tapsi-font-family);
+  --tapsi-typography-headline-sm-font: var(--tapsi-typography-font-family);
   --tapsi-typography-headline-sm-size: 1.25rem;
   --tapsi-typography-headline-sm-height: 1.5;
   --tapsi-typography-headline-sm-weight: 600;
-  --tapsi-typography-headline-md-font: var(--tapsi-font-family);
+  --tapsi-typography-headline-md-font: var(--tapsi-typography-font-family);
   --tapsi-typography-headline-md-size: 1.5rem;
   --tapsi-typography-headline-md-height: 1.5;
   --tapsi-typography-headline-md-weight: 600;
-  --tapsi-typography-headline-lg-font: var(--tapsi-font-family);
+  --tapsi-typography-headline-lg-font: var(--tapsi-typography-font-family);
   --tapsi-typography-headline-lg-size: 1.75rem;
   --tapsi-typography-headline-lg-height: 1.5;
   --tapsi-typography-headline-lg-weight: 600;
-  --tapsi-typography-display-sm-font: var(--tapsi-font-family);
+  --tapsi-typography-display-sm-font: var(--tapsi-typography-font-family);
   --tapsi-typography-display-sm-size: 2rem;
   --tapsi-typography-display-sm-height: 1.5;
   --tapsi-typography-display-sm-weight: 600;
-  --tapsi-typography-display-md-font: var(--tapsi-font-family);
+  --tapsi-typography-display-md-font: var(--tapsi-typography-font-family);
   --tapsi-typography-display-md-size: 2.5rem;
   --tapsi-typography-display-md-height: 1.5;
   --tapsi-typography-display-md-weight: 600;
-  --tapsi-typography-display-lg-font: var(--tapsi-font-family);
+  --tapsi-typography-display-lg-font: var(--tapsi-typography-font-family);
   --tapsi-typography-display-lg-size: 3rem;
   --tapsi-typography-display-lg-height: 1.5;
   --tapsi-typography-display-lg-weight: 600;
diff --git a/packages/theme/src/default-theme/tokens.ts b/packages/theme/src/default-theme/tokens.ts
index 9965dd03..5590edac 100644
--- a/packages/theme/src/default-theme/tokens.ts
+++ b/packages/theme/src/default-theme/tokens.ts
@@ -193,25 +193,25 @@ const typography = {
   "font-family": '"Vazirmatn", sans-serif',
   body: {
     xs: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "0.75rem",
       height: 1.6666666667,
       weight: 400,
     },
     sm: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "0.875rem",
       height: 1.7142857143,
       weight: 400,
     },
     md: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1rem",
       height: 1.75,
       weight: 400,
     },
     lg: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1.125rem",
       height: 1.7777777778,
       weight: 400,
@@ -219,31 +219,31 @@ const typography = {
   },
   label: {
     xxs: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "0.625rem",
       height: 1.6,
       weight: 500,
     },
     xs: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "0.75rem",
       height: 2,
       weight: 500,
     },
     sm: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "0.875rem",
       height: 1.7142857143,
       weight: 500,
     },
     md: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1rem",
       height: 1.75,
       weight: 500,
     },
     lg: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1.125rem",
       height: 1.7777777778,
       weight: 500,
@@ -251,25 +251,25 @@ const typography = {
   },
   headline: {
     xs: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1rem",
       height: 1.5,
       weight: 600,
     },
     sm: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1.25rem",
       height: 1.5,
       weight: 600,
     },
     md: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1.5rem",
       height: 1.5,
       weight: 600,
     },
     lg: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "1.75rem",
       height: 1.5,
       weight: 600,
@@ -277,19 +277,19 @@ const typography = {
   },
   display: {
     sm: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "2rem",
       height: 1.5,
       weight: 600,
     },
     md: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "2.5rem",
       height: 1.5,
       weight: 600,
     },
     lg: {
-      font: "var(--tapsi-font-family)",
+      font: "var(--tapsi-typography-font-family)",
       size: "3rem",
       height: 1.5,
       weight: 600,
diff --git a/packages/web-components/src/badge/badge.style.ts b/packages/web-components/src/badge/badge.style.ts
index ea686e10..add11fba 100644
--- a/packages/web-components/src/badge/badge.style.ts
+++ b/packages/web-components/src/badge/badge.style.ts
@@ -121,7 +121,7 @@ export default css`
     height: var(--badge-height);
     min-width: var(--badge-min-width);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--badge-font-height);
     font-size: var(--badge-font-size);
     font-weight: var(--badge-font-weight);
diff --git a/packages/web-components/src/banner/banner.style.ts b/packages/web-components/src/banner/banner.style.ts
index f1d55e63..2bf2b016 100644
--- a/packages/web-components/src/banner/banner.style.ts
+++ b/packages/web-components/src/banner/banner.style.ts
@@ -44,7 +44,7 @@ export default css`
 
   .heading {
     color: var(--banner-color-content);
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-headline-xs-height);
     font-size: var(--tapsi-typography-headline-xs-size);
     font-weight: var(--tapsi-typography-headline-xs-weight);
@@ -52,7 +52,7 @@ export default css`
 
   .description {
     color: var(--banner-color-content);
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-body-xs-height);
     font-size: var(--tapsi-typography-body-xs-size);
     font-weight: var(--tapsi-typography-body-xs-weight);
diff --git a/packages/web-components/src/base-input/base-input.style.ts b/packages/web-components/src/base-input/base-input.style.ts
index 4f64bd6a..b081e1e5 100644
--- a/packages/web-components/src/base-input/base-input.style.ts
+++ b/packages/web-components/src/base-input/base-input.style.ts
@@ -13,7 +13,7 @@ export default css`
 
   .root {
     direction: rtl;
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     display: flex;
     flex-direction: column;
diff --git a/packages/web-components/src/base-text-input/base-text-input.style.ts b/packages/web-components/src/base-text-input/base-text-input.style.ts
index 763d185f..c3e4ef1e 100644
--- a/packages/web-components/src/base-text-input/base-text-input.style.ts
+++ b/packages/web-components/src/base-text-input/base-text-input.style.ts
@@ -153,7 +153,7 @@ export default css`
     background-color: transparent;
     caret-color: var(--tapsi-color-surface-accent);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--input-control-text-height);
     font-size: var(--input-control-text-size);
     font-weight: var(--input-control-text-weight);
@@ -162,7 +162,7 @@ export default css`
   .input::placeholder {
     color: var(--input-placeholder-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--input-control-text-height);
     font-size: var(--input-control-text-size);
     font-weight: var(--input-control-text-weight);
@@ -198,7 +198,7 @@ export default css`
   .supporting-text {
     color: var(--input-support-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--input-support-text-height);
     font-size: var(--input-support-text-size);
     font-weight: var(--input-support-text-weight);
@@ -207,7 +207,7 @@ export default css`
   .label {
     color: var(--input-label-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--input-label-text-height);
     font-size: var(--input-label-text-size);
     font-weight: var(--input-label-text-weight);
diff --git a/packages/web-components/src/bottom-navigation/item/item.style.ts b/packages/web-components/src/bottom-navigation/item/item.style.ts
index 425067cf..956489c8 100644
--- a/packages/web-components/src/bottom-navigation/item/item.style.ts
+++ b/packages/web-components/src/bottom-navigation/item/item.style.ts
@@ -70,7 +70,7 @@ export default css`
 
   .content {
     color: currentColor;
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-label-xs-height);
     font-size: var(--tapsi-typography-label-xs-size);
     font-weight: var(--tapsi-typography-label-xs-weight);
diff --git a/packages/web-components/src/button/base/base-button.style.ts b/packages/web-components/src/button/base/base-button.style.ts
index 2d2f8d1a..bb09bd1c 100644
--- a/packages/web-components/src/button/base/base-button.style.ts
+++ b/packages/web-components/src/button/base/base-button.style.ts
@@ -118,7 +118,7 @@ export default css`
 
     background: var(--button-custom-background, var(--button-background));
     color: var(--button-custom-color, var(--button-color));
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     border-radius: var(--tapsi-radius-full);
   }
 
diff --git a/packages/web-components/src/chip/chip.style.ts b/packages/web-components/src/chip/chip.style.ts
index 14774800..83f34b90 100644
--- a/packages/web-components/src/chip/chip.style.ts
+++ b/packages/web-components/src/chip/chip.style.ts
@@ -90,7 +90,7 @@ export default css`
 
     padding: 0 var(--chip-spacing);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     font-size: var(--tapsi-typography-body-sm-size);
     line-height: var(--tapsi-typography-body-sm-height);
 
diff --git a/packages/web-components/src/empty-state/empty-state.style.ts b/packages/web-components/src/empty-state/empty-state.style.ts
index e5f1b129..2a0fe8a1 100644
--- a/packages/web-components/src/empty-state/empty-state.style.ts
+++ b/packages/web-components/src/empty-state/empty-state.style.ts
@@ -27,7 +27,7 @@ export default css`
     align-items: center;
     justify-content: center;
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     padding: var(--tapsi-spacing-6) var(--tapsi-spacing-8);
   }
diff --git a/packages/web-components/src/file-input/file-input.style.ts b/packages/web-components/src/file-input/file-input.style.ts
index 7f36fcd7..ff718b21 100644
--- a/packages/web-components/src/file-input/file-input.style.ts
+++ b/packages/web-components/src/file-input/file-input.style.ts
@@ -25,7 +25,7 @@ export default css`
 
   .root {
     direction: rtl;
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     display: flex;
     flex-direction: column;
@@ -73,7 +73,7 @@ export default css`
 
   .label {
     color: var(--input-label-color);
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-label-md-height);
     font-weight: var(--tapsi-typography-label-md-weight);
     font-size: var(--tapsi-typography-label-md-size);
@@ -122,7 +122,7 @@ export default css`
   .supporting-text {
     color: var(--input-support-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-body-sm-height);
     font-size: var(--tapsi-typography-body-sm-size);
     font-weight: var(--tapsi-typography-body-sm-weight);
@@ -182,7 +182,7 @@ export default css`
 
     margin-top: var(--tapsi-spacing-4);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     font-size: var(--tapsi-typography-body-sm-size);
     font-weight: var(--tapsi-typography-body-sm-weight);
   }
@@ -217,7 +217,7 @@ export default css`
   .progress-wrapper .percentage {
     position: absolute;
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     font-size: var(--tapsi-typography-headline-xs-size);
     font-weight: var(--tapsi-typography-headline-xs-weight);
     line-height: var(--tapsi-typography-headline-xs-height);
@@ -228,7 +228,7 @@ export default css`
 
     margin-top: var(--tapsi-spacing-4);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     font-size: var(--tapsi-typography-body-sm-size);
     font-weight: var(--tapsi-typography-body-sm-weight);
     line-height: var(--tapsi-typography-body-sm-height);
diff --git a/packages/web-components/src/modal/modal.style.ts b/packages/web-components/src/modal/modal.style.ts
index 055985cd..91d1f841 100644
--- a/packages/web-components/src/modal/modal.style.ts
+++ b/packages/web-components/src/modal/modal.style.ts
@@ -76,7 +76,7 @@ export default css`
     bottom: var(--tapsi-spacing-6);
 
     background-color: var(--tapsi-color-surface-primary);
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     border-radius: var(--tapsi-radius-6);
 
     transition: transform 240ms ease;
diff --git a/packages/web-components/src/notice/notice.style.ts b/packages/web-components/src/notice/notice.style.ts
index 4d10906c..1268c4c7 100644
--- a/packages/web-components/src/notice/notice.style.ts
+++ b/packages/web-components/src/notice/notice.style.ts
@@ -45,7 +45,7 @@ export default css`
     padding: var(--notice-padding);
 
     text-decoration: none;
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     color: var(--notice-color);
     background-color: var(--notice-background-color);
diff --git a/packages/web-components/src/pin-input/pin-input.style.ts b/packages/web-components/src/pin-input/pin-input.style.ts
index c3799e28..55f6eca5 100644
--- a/packages/web-components/src/pin-input/pin-input.style.ts
+++ b/packages/web-components/src/pin-input/pin-input.style.ts
@@ -57,7 +57,7 @@ const styles = css`
   }
 
   .root {
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     display: flex;
     flex-direction: column;
@@ -68,7 +68,7 @@ const styles = css`
   .label {
     color: var(--label-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-label-md-height);
     font-size: var(--tapsi-typography-label-md-size);
     font-weight: var(--tapsi-typography-label-md-weight);
@@ -77,7 +77,7 @@ const styles = css`
   .supporting-text {
     color: var(--support-color);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-body-sm-height);
     font-size: var(--tapsi-typography-body-sm-size);
     font-weight: var(--tapsi-typography-body-sm-weight);
@@ -112,7 +112,7 @@ const styles = css`
     box-shadow: 0 0 0 var(--tapsi-stroke-2) var(--pin-border-color);
     border-radius: var(--tapsi-radius-3);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     line-height: var(--tapsi-typography-headline-sm-height);
     font-size: var(--tapsi-typography-headline-sm-size);
     font-weight: var(--tapsi-typography-headline-sm-weight);
diff --git a/packages/web-components/src/pinwheel/item/item.style.ts b/packages/web-components/src/pinwheel/item/item.style.ts
index bbed94a3..4b3c42a9 100644
--- a/packages/web-components/src/pinwheel/item/item.style.ts
+++ b/packages/web-components/src/pinwheel/item/item.style.ts
@@ -36,7 +36,7 @@ const styles = css`
 
     color: var(--tapsi-color-content-tertiary);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     font-size: var(--tapsi-typography-body-md-size);
     line-height: var(--tapsi-typography-body-md-height);
diff --git a/packages/web-components/src/rate-slider/rate-slider.style.ts b/packages/web-components/src/rate-slider/rate-slider.style.ts
index 741a03f3..a1d20086 100644
--- a/packages/web-components/src/rate-slider/rate-slider.style.ts
+++ b/packages/web-components/src/rate-slider/rate-slider.style.ts
@@ -60,7 +60,7 @@ const styles = css`
     height: 4rem;
     border-radius: var(--tapsi-radius-5);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
 
     outline: none;
     -webkit-user-select: none;
diff --git a/packages/web-components/src/snackbar/snackbar.style.ts b/packages/web-components/src/snackbar/snackbar.style.ts
index 158caa9b..32d388b6 100644
--- a/packages/web-components/src/snackbar/snackbar.style.ts
+++ b/packages/web-components/src/snackbar/snackbar.style.ts
@@ -79,7 +79,7 @@ export default css`
     top: var(--tapsi-spacing-6);
 
     background-color: var(--snackbar-background-color);
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     border-radius: var(--tapsi-radius-full);
 
     display: flex;
diff --git a/packages/web-components/src/stepper/stepper.style.ts b/packages/web-components/src/stepper/stepper.style.ts
index 2c36c2eb..c4cc70a2 100644
--- a/packages/web-components/src/stepper/stepper.style.ts
+++ b/packages/web-components/src/stepper/stepper.style.ts
@@ -59,7 +59,7 @@ export default css`
     height: var(--stepper-height);
     gap: var(--tapsi-spacing-4);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
   }
 
   .increase,
diff --git a/packages/web-components/src/tooltip/tooltip.style.ts b/packages/web-components/src/tooltip/tooltip.style.ts
index f24e90c9..6069731b 100644
--- a/packages/web-components/src/tooltip/tooltip.style.ts
+++ b/packages/web-components/src/tooltip/tooltip.style.ts
@@ -49,7 +49,7 @@ export default css`
   .text {
     color: var(--tapsi-color-content-on-inverse);
 
-    font-family: var(--tapsi-font-family);
+    font-family: var(--tapsi-typography-font-family);
     font-size: var(--tapsi-typography-body-sm-size);
     font-weight: var(--tapsi-typography-body-sm-weight);
     line-height: var(--tapsi-typography-body-sm-height);