feat(design, daffio, demo): create typography css variables and update usage in apps

xelaint · xelaint · commit 1059c2e6cc76 · 2026-04-16T15:51:53.000-04:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,9 +1,7 @@
-@use '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
@@ -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
@@ -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
@@ -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
@@ -3,7 +3,7 @@
 
 .demo-cart-item {
 	display: grid;
-	font-size: $font-size-sm;
+	font-size: var(--daff-font-size-sm);
 	grid-column-gap: 20px;
 	grid-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
@@ -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
@@ -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
@@ -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
@@ -1,7 +1,7 @@
 @use '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
@@ -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
@@ -1,7 +1,7 @@
 @use '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
@@ -1,7 +1,7 @@
 @use '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
@@ -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
@@ -1,7 +1,7 @@
 @use '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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 @@
 		word-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,21 +115,21 @@
 		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;
 		}
 	}
 
 	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
diff --git a/libs/design/button/src/button/icon/icon.component.scss b/libs/design/button/src/button/icon/icon.component.scss
diff --git a/libs/design/button/src/button/underline/underline.component.scss b/libs/design/button/src/button/underline/underline.component.scss
diff --git a/libs/design/callout/src/callout/callout.component.scss b/libs/design/callout/src/callout/callout.component.scss
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
diff --git a/libs/design/form/src/error-message/error-message.component.scss b/libs/design/form/src/error-message/error-message.component.scss
diff --git a/libs/design/form/src/hint/hint.component.scss b/libs/design/form/src/hint/hint.component.scss
diff --git a/libs/design/guides/typography.md b/libs/design/guides/typography.md
diff --git a/libs/design/list/src/list-base.scss b/libs/design/list/src/list-base.scss
diff --git a/libs/design/notification/src/notification/notification.component.scss b/libs/design/notification/src/notification/notification.component.scss
diff --git a/libs/design/scss/global.scss b/libs/design/scss/global.scss
diff --git a/libs/design/tag/src/tag/tag.component.scss b/libs/design/tag/src/tag/tag.component.scss

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`
`70`	`70`	`&__link,`
`71`	`71`	`&__copyright {`
`72`		`- font-size: daff.$font-size-sm;`
	`72`	`+ font-size: var(--daff-font-size-sm);`
`73`	`73`	`line-height: 1rem;`
`74`	`74`	`}`
`75`	`75`
Original file line number	Diff line number	Diff line change
`@@ -19,14 +19,14 @@`
`19`	`19`
`20`	`20`	`&__check-icon {`
`21`	`21`	`margin-right: 15px;`
`22`		`- font-size: $font-size-md;`
	`22`	`+ font-size: var(--daff-font-size-md);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&__close {`
`26`	`26`	`position: absolute;`
`27`	`27`	`top: 15px;`
`28`	`28`	`right: 25px;`
`29`		`- font-size: $font-size-md;`
	`29`	`+ font-size: var(--daff-font-size-md);`
`30`	`30`	`@include clickable();`
`31`	`31`	`}`
`32`	`32`
`@@ -45,7 +45,7 @@`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`> * {`
`48`		`- font-size: $font-size-md;`
	`48`	`+ font-size: var(--daff-font-size-md);`
`49`	`49`	`flex: 1;`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,19 +17,19 @@`
`17`	`17`
`18`	`18`	`&__name {`
`19`	`19`	`@include clickable();`
`20`		`- font-size: $font-size-md;`
	`20`	`+ font-size: var(--daff-font-size-md);`
`21`	`21`	`font-weight: bold;`
`22`	`22`	`margin-bottom: 5px;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&__price {`
`26`		`- font-size: $font-size-md;`
	`26`	`+ font-size: var(--daff-font-size-md);`
`27`	`27`	`color: demo-theme.daff-color(demo-theme.$secondary);`
`28`	`28`	`margin-bottom: 15px;`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`&__info {`
`32`		`- font-size: $font-size-sm;`
	`32`	`+ font-size: var(--daff-font-size-sm);`
`33`	`33`	`line-height: 1.25rem;`
`34`	`34`	`}`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,5 @@`
`3`	`3`
`4`	`4`	`.demo-cart-item-count {`
`5`	`5`	`color: daff-color($daff-neutral, 80);`
`6`		`- font-size: $font-size-sm;`
	`6`	`+ font-size: var(--daff-font-size-sm);`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`margin: 25px 0 0;`
`29`	`29`	`justify-content: center;`
`30`	`30`	`width: 100%;`
`31`		`- font-size: $font-size-md;`
	`31`	`+ font-size: var(--daff-font-size-md);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`&__cart-totals {`