From 246ce94978f6551d90b2191d0d023cfcd7d87ef3 Mon Sep 17 00:00:00 2001
From: xelaint <xelaint@gmail.com>
Date: Thu, 16 Apr 2026 15:51:53 -0400
Subject: [PATCH] feat(design, daffio, demo): create typography css variables
 and update usage in apps

---
 .../home-callout-commerce.component.scss      |  2 +-
 .../docs-footer/docs-footer.component.scss    |  2 +-
 .../core/footer/footer/footer.component.scss  |  2 +-
 .../components/header/header.component.scss   |  2 +-
 .../api-item-label.component.scss             |  4 +--
 .../add-to-cart-notification.component.scss   |  6 ++--
 .../product-added.component.scss              |  6 ++--
 .../cart-item-count.component.scss            |  2 +-
 .../cart-item/cart-item.component.scss        |  2 +-
 .../cart-sidebar/cart-sidebar.component.scss  |  2 +-
 .../cart-summary/cart-summary.component.scss  |  4 +--
 .../minicart-item.component.scss              |  4 +--
 .../billing-summary.component.scss            |  2 +-
 .../payment-form/payment-form.component.scss  |  2 +-
 .../payment-summary.component.scss            |  2 +-
 .../shipping-address-summary.component.scss   |  6 ++--
 .../shipping-options.component.scss           |  2 +-
 .../shipping-summary.component.scss           |  4 +--
 .../containers/sidebar/sidebar.component.scss |  2 +-
 .../add-to-cart/add-to-cart.component.scss    |  2 +-
 .../product-card/product-card.component.scss  |  2 +-
 .../components/product/product.component.scss |  6 ++--
 .../best-sellers/best-sellers.component.scss  |  2 +-
 .../src/article/article.component.scss        | 28 ++++++++++---------
 .../design/button/src/button/button-base.scss |  6 ++--
 .../src/button/icon/icon.component.scss       |  7 ++---
 .../button/underline/underline.component.scss |  7 ++---
 .../src/callout/callout.component.scss        |  2 +-
 .../src/form-field/form-field.component.scss  |  3 +-
 .../error-message.component.scss              |  2 +-
 libs/design/form/src/hint/hint.component.scss |  4 +--
 libs/design/guides/typography.md              | 12 ++++----
 libs/design/list/src/list-base.scss           |  6 ++--
 .../notification/notification.component.scss  |  7 ++---
 libs/design/scss/global.scss                  | 11 +++++++-
 libs/design/tag/src/tag/tag.component.scss    | 13 ++++-----
 36 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/apps/daffio/src/app/content/home/components/home-callout-commerce/home-callout-commerce.component.scss b/apps/daffio/src/app/content/home/components/home-callout-commerce/home-callout-commerce.component.scss
index 2ef7886a2d..7edc3a976f 100644
--- a/apps/daffio/src/app/content/home/components/home-callout-commerce/home-callout-commerce.component.scss
+++ b/apps/daffio/src/app/content/home/components/home-callout-commerce/home-callout-commerce.component.scss
@@ -24,7 +24,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.75rem;
-		font-size: daff.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		border-radius: 2rem;
 		padding: 0.5rem 1rem;
 
diff --git a/apps/daffio/src/app/core/footer/docs-footer/docs-footer.component.scss b/apps/daffio/src/app/core/footer/docs-footer/docs-footer.component.scss
index 6e5120974a..230bd90b71 100644
--- a/apps/daffio/src/app/core/footer/docs-footer/docs-footer.component.scss
+++ b/apps/daffio/src/app/core/footer/docs-footer/docs-footer.component.scss
@@ -69,7 +69,7 @@
 
 	&__link,
 	&__copyright {
-		font-size: daff.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 1rem;
 	}
 
diff --git a/apps/daffio/src/app/core/footer/footer/footer.component.scss b/apps/daffio/src/app/core/footer/footer/footer.component.scss
index 2acd56065f..4235512b7d 100644
--- a/apps/daffio/src/app/core/footer/footer/footer.component.scss
+++ b/apps/daffio/src/app/core/footer/footer/footer.component.scss
@@ -2,7 +2,7 @@
 
 :host {
 	display: block;
-	font-size: daff.$font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	padding: 24px;
 
 	@include daff.breakpoint(big-tablet) {
diff --git a/apps/daffio/src/app/core/header/components/header/header.component.scss b/apps/daffio/src/app/core/header/components/header/header.component.scss
index 0466dc30a3..7f0b820571 100644
--- a/apps/daffio/src/app/core/header/components/header/header.component.scss
+++ b/apps/daffio/src/app/core/header/components/header/header.component.scss
@@ -19,7 +19,7 @@
 				align-items: center;
 				gap: 0.5rem;
 				color: currentColor;
-				font-size: daff.$font-size-base;
+				font-size: var(--daff-font-family-base);
 				font-weight: 500;
 				line-height: 64px;
 				padding: 0 1rem;
diff --git a/apps/daffio/src/app/docs/api/components/api-item-label/api-item-label.component.scss b/apps/daffio/src/app/docs/api/components/api-item-label/api-item-label.component.scss
index 0ed1a05d1b..e43badfd78 100644
--- a/apps/daffio/src/app/docs/api/components/api-item-label/api-item-label.component.scss
+++ b/apps/daffio/src/app/docs/api/components/api-item-label/api-item-label.component.scss
@@ -1,9 +1,7 @@
-@use '@daffodil/design/scss/utilities' as daff;
-
 :host {
 	display: block;
 	border-radius: 0.25rem;
-	font-family: daff.$font-family-mono;
+	font-family: var(--daff-font-family-mono);
 	font-size: 0.625rem;
 	font-weight: 500;
 	line-height: 0.875rem;
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.scss b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.scss
index d1f17890ec..a09c253e28 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.scss
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.scss
@@ -19,14 +19,14 @@
 
 	&__check-icon {
 		margin-right: 15px;
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 	}
 
 	&__close {
 		position: absolute;
 		top: 15px;
 		right: 25px;
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		@include clickable();
 	}
 
@@ -45,7 +45,7 @@
 		}
 
 		> * {
-			font-size: $font-size-md;
+			font-size: var(--daff-font-size-md);
 			flex: 1;
 		}
 	}
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.scss b/apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.scss
index 0d012c6a6e..4fc406ddfe 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.scss
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.scss
@@ -17,19 +17,19 @@
 
 	&__name {
 		@include clickable();
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		font-weight: bold;
 		margin-bottom: 5px;
 	}
 
 	&__price {
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		color: demo-theme.daff-color(demo-theme.$secondary);
 		margin-bottom: 15px;
 	}
 
 	&__info {
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 1.25rem;
 	}
 }
diff --git a/apps/demo/src/app/cart/components/cart-item-count/cart-item-count.component.scss b/apps/demo/src/app/cart/components/cart-item-count/cart-item-count.component.scss
index cc81e0359f..de07e39b9c 100644
--- a/apps/demo/src/app/cart/components/cart-item-count/cart-item-count.component.scss
+++ b/apps/demo/src/app/cart/components/cart-item-count/cart-item-count.component.scss
@@ -3,5 +3,5 @@
 
 .demo-cart-item-count {
 	color: daff-color($daff-neutral, 80);
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 }
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss b/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
index 854e1e0c5b..d475e4c504 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.scss
@@ -3,7 +3,7 @@
 
 .demo-cart-item {
 	display: grid;
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	column-gap: 20px;
 	row-gap: 15px;
 	grid-template-columns: 1fr 3fr;
diff --git a/apps/demo/src/app/cart/components/cart-sidebar/cart-sidebar.component.scss b/apps/demo/src/app/cart/components/cart-sidebar/cart-sidebar.component.scss
index b8615330d9..15f83a62dd 100644
--- a/apps/demo/src/app/cart/components/cart-sidebar/cart-sidebar.component.scss
+++ b/apps/demo/src/app/cart/components/cart-sidebar/cart-sidebar.component.scss
@@ -28,7 +28,7 @@
 		margin: 25px 0 0;
 		justify-content: center;
 		width: 100%;
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 	}
 
 	&__cart-totals {
diff --git a/apps/demo/src/app/cart/components/cart-summary/cart-summary.component.scss b/apps/demo/src/app/cart/components/cart-summary/cart-summary.component.scss
index 55c9c551ad..67321b8054 100644
--- a/apps/demo/src/app/cart/components/cart-summary/cart-summary.component.scss
+++ b/apps/demo/src/app/cart/components/cart-summary/cart-summary.component.scss
@@ -37,7 +37,7 @@
 	&__edit-cart {
 		grid-area: edit;
 		justify-self: right;
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		text-decoration: underline;
 		@include clickable();
 
@@ -49,6 +49,6 @@
 	&__item-count {
 		float: right;
 		color: daff-color($daff-neutral, 80);
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 	}
 }
diff --git a/apps/demo/src/app/cart/components/minicart-item/minicart-item.component.scss b/apps/demo/src/app/cart/components/minicart-item/minicart-item.component.scss
index c7793ac214..6c249cb1dc 100644
--- a/apps/demo/src/app/cart/components/minicart-item/minicart-item.component.scss
+++ b/apps/demo/src/app/cart/components/minicart-item/minicart-item.component.scss
@@ -31,7 +31,7 @@
 	}
 
 	&__info {
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		color: demo-theme.daff-color(demo-theme.$neutral, 90);
 		line-height: 1.25rem;
 	}
@@ -45,7 +45,7 @@
 		}
 
 		> * {
-			font-size: $font-size-sm;
+			font-size: var(--daff-font-size-sm);
 			color: demo-theme.daff-color(demo-theme.$neutral);
 			text-decoration: underline;
 
diff --git a/apps/demo/src/app/checkout/components/payment/billing-summary/billing-summary.component.scss b/apps/demo/src/app/checkout/components/payment/billing-summary/billing-summary.component.scss
index 38f836da0a..bb8452aef3 100644
--- a/apps/demo/src/app/checkout/components/payment/billing-summary/billing-summary.component.scss
+++ b/apps/demo/src/app/checkout/components/payment/billing-summary/billing-summary.component.scss
@@ -1,7 +1,7 @@
 @use '@daffodil/design/scss/utilities' as *;
 
 .demo-checkout-billing-summary {
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 
 	&__title {
 		font-weight: bold;
diff --git a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.scss b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.scss
index 6c22e7da54..fe2e2b1775 100644
--- a/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.scss
+++ b/apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.scss
@@ -34,7 +34,7 @@
 
 	&__note {
 		text-align: center;
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 
 		@include breakpoint(big-tablet) {
 			text-align: left;
diff --git a/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss b/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss
index 44eea265c8..a510bc9afb 100644
--- a/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss
+++ b/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss
@@ -1,7 +1,7 @@
 @use '@daffodil/design/scss/utilities' as *;
 
 .demo-checkout-payment-summary {
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	display: grid;
 	grid-template-columns: 4fr 1fr;
 	grid-template-areas:
diff --git a/apps/demo/src/app/checkout/components/shipping-address/summary/shipping-address-summary.component.scss b/apps/demo/src/app/checkout/components/shipping-address/summary/shipping-address-summary.component.scss
index 1de1b7576f..df1e8a11ff 100644
--- a/apps/demo/src/app/checkout/components/shipping-address/summary/shipping-address-summary.component.scss
+++ b/apps/demo/src/app/checkout/components/shipping-address/summary/shipping-address-summary.component.scss
@@ -1,7 +1,7 @@
 @use '@daffodil/design/scss/utilities' as *;
 
 .demo-checkout-shipping-address-summary {
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	display: grid;
 	grid-template-columns: 4fr 1fr;
 	grid-template-areas:
@@ -21,7 +21,7 @@
 	}
 
 	&__title {
-		font-size: 1rem;
+		font-size: var(--daff-font-size-base);
 		font-weight: bold;
 		margin-bottom: 15px;
 		text-transform: uppercase;
@@ -35,7 +35,7 @@
 	&__edit {
 		grid-area: edit;
 		display: block;
-		font-size: 0.875rem;
+		font-size: var(--daff-font-size-sm);
 		text-decoration: underline;
 		justify-self: end;
 		@include clickable();
diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-options/components/shipping-options/shipping-options.component.scss b/apps/demo/src/app/checkout/components/shipping/shipping-options/components/shipping-options/shipping-options.component.scss
index b93069e479..319f0321e8 100644
--- a/apps/demo/src/app/checkout/components/shipping/shipping-options/components/shipping-options/shipping-options.component.scss
+++ b/apps/demo/src/app/checkout/components/shipping/shipping-options/components/shipping-options/shipping-options.component.scss
@@ -24,7 +24,7 @@
 	}
 
 	&__invalid {
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		color: $error;
 	}
 
diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.scss b/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.scss
index 8dd7210063..6385877a0c 100644
--- a/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.scss
+++ b/apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.scss
@@ -1,7 +1,7 @@
 @use '@daffodil/design/scss/utilities' as *;
 
 .demo-checkout-shipping-summary {
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	display: grid;
 	grid-template-columns: 4fr 1fr;
 	grid-template-areas:
@@ -35,7 +35,7 @@
 	&__edit {
 		grid-area: edit;
 		display: block;
-		font-size: 0.875rem;
+		font-size: var(--daff-font-size-sm);
 		text-decoration: underline;
 		justify-self: end;
 		@include clickable();
diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
index e101f9459b..b43df5d27a 100644
--- a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
+++ b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss
@@ -6,7 +6,7 @@
 
 	&__close {
 		@include clickable();
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		position: absolute;
 		right: 25px;
 		top: 25px;
diff --git a/apps/demo/src/app/product/components/add-to-cart/add-to-cart.component.scss b/apps/demo/src/app/product/components/add-to-cart/add-to-cart.component.scss
index f2632390a2..eace71e249 100644
--- a/apps/demo/src/app/product/components/add-to-cart/add-to-cart.component.scss
+++ b/apps/demo/src/app/product/components/add-to-cart/add-to-cart.component.scss
@@ -5,7 +5,7 @@
 	width: 100%;
 
 	button {
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		width: 100%;
 	}
 }
diff --git a/apps/demo/src/app/product/components/product-card/product-card.component.scss b/apps/demo/src/app/product/components/product-card/product-card.component.scss
index 9bbf31d6c5..b462e56b34 100644
--- a/apps/demo/src/app/product/components/product-card/product-card.component.scss
+++ b/apps/demo/src/app/product/components/product-card/product-card.component.scss
@@ -6,7 +6,7 @@
 
 	&__details {
 		padding: 15px 15px 0;
-		font-size: $font-size-sm;
+		font-size: var(--daff-font-size-sm);
 	}
 
 	&__brand {
diff --git a/apps/demo/src/app/product/components/product/product.component.scss b/apps/demo/src/app/product/components/product/product.component.scss
index 04263ad7c1..6079b9ffaa 100644
--- a/apps/demo/src/app/product/components/product/product.component.scss
+++ b/apps/demo/src/app/product/components/product/product.component.scss
@@ -51,18 +51,18 @@
 
 	&__brand {
 		color: daff-color($daff-neutral, 80);
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		font-weight: normal;
 	}
 
 	&__name {
-		font-size: $font-size-lg;
+		font-size: var(--daff-font-size-lg);
 		font-weight: bold;
 		padding: 5px 0;
 	}
 
 	&__price {
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 	}
 
 	&__qty {
diff --git a/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.scss b/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.scss
index 1be4c06a0d..3362bc15cb 100644
--- a/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.scss
+++ b/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.scss
@@ -3,7 +3,7 @@
 .demo-best-sellers {
 	&__title {
 		font-weight: bold;
-		font-size: $font-size-md;
+		font-size: var(--daff-font-size-md);
 		margin-bottom: 30px;
 		text-align: center;
 		text-transform: uppercase;
diff --git a/libs/design/article/src/article/article.component.scss b/libs/design/article/src/article/article.component.scss
index 1d43dc8e54..b4883221e5 100644
--- a/libs/design/article/src/article/article.component.scss
+++ b/libs/design/article/src/article/article.component.scss
@@ -2,6 +2,12 @@
 @use '../../../scss/layout';
 @use 'stops-article-cascade' as *;
 
+@mixin default-code-text() {
+	font-size: var(--daff-font-size-sm);
+	font-weight: 600;
+	line-height: 0.875rem;
+}
+
 .daff-article {
 	display: block;
 	overflow: hidden;
@@ -15,9 +21,7 @@
 		}
 
 		code {
-			font-size: 0.875rem;
-			font-weight: 600;
-			line-height: 0.875rem;
+			@include default-code-text();
 		}
 	}
 
@@ -27,9 +31,7 @@
 		overflow-wrap: break-word;
 
 		code {
-			font-size: 0.875rem;
-			font-weight: 600;
-			line-height: 0.875rem;
+			@include default-code-text();
 		}
 	}
 
@@ -43,7 +45,7 @@
 			font-weight: 400;
 
 			code {
-				font-size: 1rem;
+				font-size: var(--daff-font-size-base);
 				line-height: 1rem;
 			}
 
@@ -69,13 +71,13 @@
 	}
 
 	@include stopsArticleCascade(h3) {
-		font-size: 1.5rem;
+		font-size: var(--daff-font-size-lg);
 		line-height: 2rem;
 		margin-top: 2.5rem;
 	}
 
 	@include stopsArticleCascade(h4) {
-		font-size: 1.25rem;
+		font-size: var(--daff-font-size-md);
 		line-height: 1.5rem;
 		margin-top: 2rem;
 	}
@@ -88,7 +90,7 @@
 	}
 
 	@include stopsArticleCascade(h6) {
-		font-size: 1rem;
+		font-size: var(--daff-font-size-base);
 		font-weight: 600;
 		line-height: 1.5rem;
 		margin-top: 1.5rem;
@@ -113,7 +115,7 @@
 		code {
 			display: block;
 			line-height: 1.5rem;
-			font-size: t.$font-size-sm;
+			font-size: var(--daff-font-size-sm);
 			overflow-x: auto;
 			padding: 1.5rem;
 		}
@@ -121,13 +123,13 @@
 
 	code {
 		border-radius: 0.25rem;
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 1rem;
 		padding: 0.125rem 0.25rem;
 	}
 
 	&__meta {
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 	}
 
 	hr {
diff --git a/libs/design/button/src/button/button-base.scss b/libs/design/button/src/button/button-base.scss
index a501c2f9e8..cc0db514db 100644
--- a/libs/design/button/src/button/button-base.scss
+++ b/libs/design/button/src/button/button-base.scss
@@ -89,21 +89,21 @@
 
 @mixin daff-button-sizes {
 	&.daff-sm {
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 2rem;
 		height: 2rem;
 		padding: 0 1rem;
 	}
 
 	&.daff-md {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		line-height: 3rem;
 		height: 3rem;
 		padding: 0 1.5rem;
 	}
 
 	&.daff-lg {
-		font-size: t.$font-size-md;
+		font-size: var(--daff-font-size-md);
 		line-height: 3.5rem;
 		height: 3.5rem;
 		padding: 0 1.5rem;
diff --git a/libs/design/button/src/button/icon/icon.component.scss b/libs/design/button/src/button/icon/icon.component.scss
index b79e30cef7..320893e6b3 100644
--- a/libs/design/button/src/button/icon/icon.component.scss
+++ b/libs/design/button/src/button/icon/icon.component.scss
@@ -1,5 +1,4 @@
 @use '../button-base' as base;
-@use '../../../../scss/typography' as t;
 
 .daff-icon-button {
 	@include base.daff-button-base();
@@ -8,21 +7,21 @@
 	padding: 0;
 
 	&.daff-sm {
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 2rem;
 		height: 2rem;
 		width: 2rem;
 	}
 
 	&.daff-md {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		line-height: 3rem;
 		height: 3rem;
 		width: 3rem;
 	}
 
 	&.daff-lg {
-		font-size: t.$font-size-md;
+		font-size: var(--daff-font-size-md);
 		line-height: 3.5rem;
 		height: 3.5rem;
 		width: 3.5rem;
diff --git a/libs/design/button/src/button/underline/underline.component.scss b/libs/design/button/src/button/underline/underline.component.scss
index 03d02debad..947b4ea2b5 100644
--- a/libs/design/button/src/button/underline/underline.component.scss
+++ b/libs/design/button/src/button/underline/underline.component.scss
@@ -1,6 +1,5 @@
 @use '../button-base' as base;
 @use '../../../../scss/layout';
-@use '../../../../scss/typography' as t;
 
 .daff-underline-button {
 	@include base.daff-button-base();
@@ -45,19 +44,19 @@
 	}
 
 	&.daff-sm {
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		height: 1.25rem;
 		padding: 0 0 0.25rem;
 	}
 
 	&.daff-md {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		height: 1.5rem;
 		padding: 0 0 0.25rem;
 	}
 
 	&.daff-lg {
-		font-size: t.$font-size-md;
+		font-size: var(--daff-font-size-md);
 		height: 1.75rem;
 		padding: 0 0 0.5rem;
 	}
diff --git a/libs/design/callout/src/callout/callout.component.scss b/libs/design/callout/src/callout/callout.component.scss
index 99040cb8c1..609c630128 100644
--- a/libs/design/callout/src/callout/callout.component.scss
+++ b/libs/design/callout/src/callout/callout.component.scss
@@ -36,7 +36,7 @@
 	}
 
 	&__subtitle {
-		font-size: t.$font-size-md;
+		font-size: var(--daff-font-size-md);
 		margin: 16px 0 0;
 		max-width: 592px;
 		padding: 0;
diff --git a/libs/design/form-field/src/form-field/form-field.component.scss b/libs/design/form-field/src/form-field/form-field.component.scss
index f761b66bb2..6ec2615675 100644
--- a/libs/design/form-field/src/form-field/form-field.component.scss
+++ b/libs/design/form-field/src/form-field/form-field.component.scss
@@ -1,4 +1,3 @@
-@use '../../../scss/typography' as t;
 @use '../../../scss/state';
 
 // stylelint-disable selector-class-pattern
@@ -37,7 +36,7 @@
 		display: flex;
 		align-items: center;
 		border-radius: 0.25rem;
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-family-base);
 		line-height: 1rem;
 		padding: 0 1rem;
 		position: relative;
diff --git a/libs/design/form/src/error-message/error-message.component.scss b/libs/design/form/src/error-message/error-message.component.scss
index 016640a1ee..645a434515 100644
--- a/libs/design/form/src/error-message/error-message.component.scss
+++ b/libs/design/form/src/error-message/error-message.component.scss
@@ -2,6 +2,6 @@
 
 :host {
 	display: block;
-	font-size: t.$font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	line-height: 1rem;
 }
diff --git a/libs/design/form/src/hint/hint.component.scss b/libs/design/form/src/hint/hint.component.scss
index 3fddf878c1..89337a0c85 100644
--- a/libs/design/form/src/hint/hint.component.scss
+++ b/libs/design/form/src/hint/hint.component.scss
@@ -1,8 +1,6 @@
-@use '../../../scss/typography' as t;
-
 :host {
 	display: flex;
 	gap: 0.25rem;
-	font-size: t.$font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	line-height: 1rem;
 }
diff --git a/libs/design/guides/typography.md b/libs/design/guides/typography.md
index e33cc6957d..20cd113f7d 100644
--- a/libs/design/guides/typography.md
+++ b/libs/design/guides/typography.md
@@ -77,9 +77,9 @@ You can access the typography utility classes and mixins in your project by addi
 
 ## Typography variables
 
-| Variable          | Value    |
-| ----------------- | -------- |
-| `$font-size-lg`   | 1.5rem   |
-| `$font-size-md`   | 1.25rem  |
-| `$font-size-base` | 1rem     |
-| `$font-size-sm`   | 0.875rem |
+| Variable                | Value    |
+| ----------------------- | -------- |
+| `--daff-font-size-lg`   | 1.5rem   |
+| `--daff-font-size-md`   | 1.25rem  |
+| `--daff-font-size-base` | 1rem     |
+| `--daff-font-size-sm`   | 0.875rem |
diff --git a/libs/design/list/src/list-base.scss b/libs/design/list/src/list-base.scss
index 8c8ccc3944..2b0861c05a 100644
--- a/libs/design/list/src/list-base.scss
+++ b/libs/design/list/src/list-base.scss
@@ -1,5 +1,3 @@
-@use '../../scss/typography' as t;
-
 @mixin daff-list-base() {
 	$root: &;
 	display: block;
@@ -13,7 +11,7 @@
 		padding: 0.75rem 1rem;
 
 		&__content {
-			font-size: t.$font-size-base;
+			font-size: var(--daff-font-size-base);
 			flex-grow: 1;
 
 			> * {
@@ -23,7 +21,7 @@
 		}
 
 		&__title {
-			font-size: t.$font-size-base;
+			font-size: var(--daff-font-size-base);
 			font-weight: 600;
 			line-height: 1.5rem;
 			margin: 0;
diff --git a/libs/design/notification/src/notification/notification.component.scss b/libs/design/notification/src/notification/notification.component.scss
index e2d3c09188..835985496b 100644
--- a/libs/design/notification/src/notification/notification.component.scss
+++ b/libs/design/notification/src/notification/notification.component.scss
@@ -1,12 +1,11 @@
 @use '../../../scss/interactions';
-@use '../../../scss/typography' as t;
 
 // stylelint-disable selector-class-pattern
 .daff-notification {
 	$root: &;
 	display: flex;
 	border-radius: 0.25rem;
-	font-size: t.$font-size-base;
+	font-size: var(--daff-font-size-base);
 	line-height: 1.5rem;
 	position: relative;
 
@@ -42,13 +41,13 @@
 	}
 
 	&__title {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		font-weight: 600;
 		line-height: 1.5rem;
 	}
 
 	&__message {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		font-weight: normal;
 		line-height: 1.25rem;
 	}
diff --git a/libs/design/scss/global.scss b/libs/design/scss/global.scss
index 316f8f83a1..406b45000e 100644
--- a/libs/design/scss/global.scss
+++ b/libs/design/scss/global.scss
@@ -19,7 +19,7 @@
 
 body,
 html {
-	font-family: t.$font-family-base;
+	font-family: var(--daff-font-family-base);
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.5;
@@ -48,3 +48,12 @@ h6 {
 	margin: 0;
 	padding: 0;
 }
+
+:root {
+	--daff-font-family-base: #{t.$font-family-base};
+	--daff-font-family-mono: #{t.$font-family-mono};
+	--daff-font-size-sm: #{t.$font-size-sm};
+	--daff-font-size-base: #{t.$font-size-base};
+	--daff-font-size-md: #{t.$font-size-md};
+	--daff-font-size-lg: #{t.$font-size-lg};
+}
diff --git a/libs/design/tag/src/tag/tag.component.scss b/libs/design/tag/src/tag/tag.component.scss
index ea75eaf79f..80953e6e33 100644
--- a/libs/design/tag/src/tag/tag.component.scss
+++ b/libs/design/tag/src/tag/tag.component.scss
@@ -1,42 +1,41 @@
 @use '../../../scss/interactions';
 @use '../../../scss/layout';
-@use '../../../scss/typography' as t;
 
 @mixin daff-tag-sizes {
 	$root: &;
 
 	&.daff-sm {
-		font-size: t.$font-size-sm;
+		font-size: var(--daff-font-size-sm);
 		line-height: 1rem;
 		gap: 0.375rem;
 		padding: 0.5rem;
 
 		#{$root}__close-icon {
-			font-size: t.$font-size-sm;
+			font-size: var(--daff-font-size-sm);
 			line-height: 1rem;
 		}
 	}
 
 	&.daff-md {
-		font-size: t.$font-size-base;
+		font-size: var(--daff-font-size-base);
 		line-height: 1.25rem;
 		gap: 0.5rem;
 		padding: 0.5rem;
 
 		#{$root}__close-icon {
-			font-size: t.$font-size-base;
+			font-size: var(--daff-font-size-base);
 			line-height: 1.25rem;
 		}
 	}
 
 	&.daff-lg {
-		font-size: t.$font-size-md;
+		font-size: var(--daff-font-size-md);
 		line-height: 1.5rem;
 		gap: 0.75rem;
 		padding: 0.75rem;
 
 		#{$root}__close-icon {
-			font-size: t.$font-size-md;
+			font-size: var(--daff-font-size-md);
 			line-height: 1.5rem;
 		}
 	}