feat(design)!: remove all deprecated scss files and mixins in @daffodil/design (#2875)

BREAKING CHANGE:
- `uppercase()` mixin has been removed from the codebase. Set the `text-transform` style directly using scss.
- `single-line-ellipsis()` mixin has been removed from the codebase. Use `text-truncate()` instead.
- `@daffodil/design/scss/daff-util` has been replaced with `@daffodil/design/scss/utilities`
- `daff-tyopgraphy.scss` has been replaced with the typography folder.
- `@daffodil/design/scss/daff-global` has been replaced with `@daffodil/design/scss/global`

Author: xelaint

apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss

@@ -13,11 +13,11 @@
 
   &__header {
     @include comparison-cell();
+    @include daff.embolden();
     align-items: flex-start;
     font-size: 0.75rem;
     padding: 15px 5px;
-    @include daff.embolden();
-    @include daff.uppercase();
+    text-transform: uppercase;
 
     @include daff.breakpoint(tablet) {
       padding: 25px 5px;

apps/daffio/src/app/core/footer/footer/footer.component.scss

@@ -67,11 +67,11 @@
 
 	&__link {
 		@include daff.embolden();
-		@include daff.uppercase();
 		display: flex;
 		align-items: center;
 		gap: 8px;
 		text-decoration: none;
+		text-transform: uppercase;
 	}
 
 	&__copyright {

apps/daffio/src/app/design/device/iphone/iphone.component.scss

@@ -1,5 +1,5 @@
 // @import 'theme';
-// @import 'utilities';
+// @use 'utilities' as *;
 
 // $phoneColor: daff-map-deep-get($theme, "core.base");
 // $phoneShadow: daff-illuminate($phoneColor, $daff-neutral, 3);

apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-add-to-cart-notification {
 	background-color: demo-theme.$white;
@@ -12,9 +12,9 @@
 	}
 
 	&__header {
-		margin-bottom: 25px;
 		@include embolden();
-		@include uppercase();
+		margin-bottom: 25px;
+		text-transform: uppercase;
 	}
 
 	&__check-icon {

apps/demo/src/app/cart/components/add-to-cart-notification/components/product-added/product-added.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-product-added {
 	display: grid;

apps/demo/src/app/cart/components/cart-item-count/cart-item-count.component.scss

@@ -1,5 +1,5 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
 
 .demo-cart-item-count {
 	color: daff-color($daff-neutral, 80);

apps/demo/src/app/cart/components/cart-item/cart-item.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-cart-item {
 	display: grid;

apps/demo/src/app/cart/components/cart-sidebar/cart-sidebar.component.scss

@@ -1,5 +1,6 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
+@use '../../../../scss/mixins/dividers' as *;
 
 .demo-cart-sidebar {
 	&__summary {
@@ -11,9 +12,9 @@
 	}
 
 	&__title {
-		display: none;
 		@include embolden();
-		@include uppercase();
+		display: none;
+		text-transform: uppercase;
 
 		@include breakpoint(big-tablet) {
 			display: block;

apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.scss

@@ -1,5 +1,6 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
+@use '../../../../scss/mixins/dividers' as *;
 
 .demo-cart-summary-wrapper {
 	display: grid;

apps/demo/src/app/cart/components/cart-summary/cart-summary.component.scss

@@ -1,5 +1,6 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
+@use '../../../../scss/mixins/dividers' as *;
 
 .demo-cart-summary {
 	display: flex;

apps/demo/src/app/cart/components/cart-totals-item/cart-totals-item.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 :host {
 	display: block;
@@ -14,7 +14,7 @@
 	}
 
 	&.emphasize { /* stylelint-disable-line selector-class-pattern */
-		@include uppercase();
 		@include embolden();
+		text-transform: uppercase;
 	}
 }

apps/demo/src/app/cart/components/cart/cart.component.scss

@@ -1,5 +1,6 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
+@use '../../../../scss/mixins/dividers' as *;
 
 :host {
 	display: grid;
@@ -26,7 +27,7 @@
 
 	&__title {
 		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 	}
 
 	&__item-count {

apps/demo/src/app/cart/components/minicart-item/minicart-item.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 :host {
 	display: grid;

apps/demo/src/app/cart/pages/cart-view/cart-view.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 @import 'theme';
 
 .demo-cart-view {

apps/demo/src/app/checkout/components/forms/address/components/address-form/address-form.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-address-form {
 	display: grid;

apps/demo/src/app/checkout/components/payment/billing-summary/billing-summary.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-billing-summary {
 	font-size: $small-font-size;

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-payment-form {
 	display: flex;
@@ -10,9 +10,9 @@
 	}
 
 	&__title {
-		margin-bottom: 15px;
 		@include embolden();
-		@include uppercase();
+		margin-bottom: 15px;
+		text-transform: uppercase;
 	}
 
 	&__subtitle {

apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-payment-info-form {
 	display: grid;

apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-payment-summary {
 	font-size: $small-font-size;
@@ -21,10 +21,10 @@
 	}
 
 	&__title {
+		@include embolden();
 		margin-bottom: 5px;
 		grid-area: title;
-		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 	}
 
 	&__method-title {
@@ -55,9 +55,9 @@
 	}
 
 	&__title {
+		@include embolden();
 		font-size: 1rem;
 		margin-bottom: 15px;
-		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 	}
 }

apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.scss

@@ -1,13 +1,13 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-shipping-address-form {
 	display: flex;
 	flex-direction: column;
 
 	&__title {
-		margin-bottom: 15px;
 		@include embolden();
-		@include uppercase();
+		margin-bottom: 15px;
+		text-transform: uppercase;
 	}
 
 	&__button {

apps/demo/src/app/checkout/components/shipping-address/summary/shipping-address-summary.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-shipping-address-summary {
 	font-size: $small-font-size;
@@ -21,10 +21,10 @@
 	}
 
 	&__title {
+		@include embolden();
 		font-size: 1rem;
 		margin-bottom: 15px;
-		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 		grid-area: title;
 	}
 

apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.scss

@@ -1,13 +1,13 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-shipping-form {
 	display: flex;
 	flex-direction: column;
 
 	&__title {
-		margin-bottom: 15px;
 		@include embolden();
-		@include uppercase();
+		margin-bottom: 15px;
+		text-transform: uppercase;
 	}
 
 	&__button {

apps/demo/src/app/checkout/components/shipping/shipping-options/components/shipping-options/shipping-options.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 @import 'theme';
 
 .demo-checkout-shipping-options {

apps/demo/src/app/checkout/components/shipping/shipping-summary/shipping-summary.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-checkout-shipping-summary {
 	font-size: $small-font-size;
@@ -21,10 +21,10 @@
 	}
 
 	&__title {
+		@include embolden();
 		font-size: 1rem;
 		margin-bottom: 15px;
-		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 		grid-area: title;
 	}
 

apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 @import 'theme';
 
 .demo-checkout {

apps/demo/src/app/core/footer/footer.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 :host {
 	display: block;

apps/demo/src/app/core/header/components/header/header.component.scss

@@ -1,9 +1,10 @@
-@import 'utilities';
-@import 'theme';
+@use 'utilities' as *;
+@use 'demo-theme' as *;
+@use '../../../../../scss/mixins/dividers' as *;
 
 .demo-header {
 	padding: 0;
-	@include section-divider;
+	@include section-divider();
 
 	&__menu {
 		border-right: 1px solid daff-color($daff-neutral, 20);

apps/demo/src/app/core/sidebar/components/sidebar-list/sidebar-list.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 @import 'theme';
 
 .demo-sidebar-list {

apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-sidebar {
 	padding: 75px 25px 0;

apps/demo/src/app/misc/help-box/help-box.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 @import 'theme';
 
 .demo-help-box {

apps/demo/src/app/misc/not-found/not-found.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-not-found {
 	padding-top: 50px;
@@ -8,9 +8,9 @@
 	}
 
 	&__text {
+		@include embolden();
 		margin-bottom: 50px;
 		text-align: center;
-		@include embolden();
-		@include uppercase();
+		text-transform: uppercase;
 	}
 }

apps/demo/src/app/newsletter/newsletter.component.scss

@@ -1,5 +1,5 @@
 @use 'demo-theme';
-@import 'utilities';
+@use 'utilities' as *;
 
 :host {
 	display: block;
@@ -33,10 +33,10 @@
 
 	&__title {
 		@include embolden();
-		@include uppercase();
 		font-size: 1.5rem;
 		margin: 0;
 		padding-bottom: 15px;
+		text-transform: uppercase;
 	}
 
 	&__right {

apps/demo/src/app/product/components/add-to-cart/add-to-cart.component.scss

@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as *;
 
 .demo-add-to-cart {
 	display: inline-block;