diff --git a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss index bc74cdeb75..000de79d03 100644 --- a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss +++ b/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; 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 c212caadf4..039ee37289 100644 --- a/apps/daffio/src/app/core/footer/footer/footer.component.scss +++ b/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 { diff --git a/apps/daffio/src/app/design/device/iphone/iphone.component.scss b/apps/daffio/src/app/design/device/iphone/iphone.component.scss index 1ddb384270..6b751db808 100644 --- a/apps/daffio/src/app/design/device/iphone/iphone.component.scss +++ b/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); 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 80b0d73903..b3b831225c 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 @@ -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 { 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 3c94f2459c..fce5543dab 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 @@ -1,5 +1,5 @@ @use 'demo-theme'; -@import 'utilities'; +@use 'utilities' as *; .demo-product-added { display: grid; 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 44d283c178..5548752503 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 @@ -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); 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 f13439010a..69c0bcb549 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 @@ -1,5 +1,5 @@ @use 'demo-theme'; -@import 'utilities'; +@use 'utilities' as *; .demo-cart-item { display: grid; 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 ba81eda51f..5698673fe8 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 @@ -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; diff --git a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.scss b/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.scss index 8782e05783..a418402150 100644 --- a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.scss +++ b/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; 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 d6e83f8793..1d78a5e391 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 @@ -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; diff --git a/apps/demo/src/app/cart/components/cart-totals-item/cart-totals-item.component.scss b/apps/demo/src/app/cart/components/cart-totals-item/cart-totals-item.component.scss index 19682f6dc9..115815eb53 100644 --- a/apps/demo/src/app/cart/components/cart-totals-item/cart-totals-item.component.scss +++ b/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; } } diff --git a/apps/demo/src/app/cart/components/cart/cart.component.scss b/apps/demo/src/app/cart/components/cart/cart.component.scss index 30dbb7a9df..ac49961920 100644 --- a/apps/demo/src/app/cart/components/cart/cart.component.scss +++ b/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 { 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 88ff48c3d9..2e06a10a6f 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 @@ -1,5 +1,5 @@ @use 'demo-theme'; -@import 'utilities'; +@use 'utilities' as *; :host { display: grid; diff --git a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.scss b/apps/demo/src/app/cart/pages/cart-view/cart-view.component.scss index f610ea70bb..f6cffcdcc5 100644 --- a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.scss +++ b/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 { diff --git a/apps/demo/src/app/checkout/components/forms/address/components/address-form/address-form.component.scss b/apps/demo/src/app/checkout/components/forms/address/components/address-form/address-form.component.scss index 7dafbd7814..943b1efb88 100644 --- a/apps/demo/src/app/checkout/components/forms/address/components/address-form/address-form.component.scss +++ b/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; 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 4ec54082ba..a23fc3358c 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,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; .demo-checkout-billing-summary { font-size: $small-font-size; 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 097df3fa9a..0acbcbd724 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 @@ -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 { diff --git a/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.scss b/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.scss index 4eb64ce5c8..c11cee2517 100644 --- a/apps/demo/src/app/checkout/components/payment/payment-info-form/components/payment-info-form/payment-info-form.component.scss +++ b/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; 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 6e6d5af50e..aa44ea1382 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,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; } } diff --git a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.scss b/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.scss index ed3d304f4d..519888e335 100644 --- a/apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.scss +++ b/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 { 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 2cf6999881..625d7f7cd6 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,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; } diff --git a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.scss b/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.scss index ba2d83df8f..5ab13b9b57 100644 --- a/apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.scss +++ b/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 { 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 c604fd9bee..ab1a762f7c 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 @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; @import 'theme'; .demo-checkout-shipping-options { 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 0c63430d35..2e257ad582 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,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; } diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss index 83b0a31a24..0bea898a43 100644 --- a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss +++ b/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 { diff --git a/apps/demo/src/app/core/footer/footer.component.scss b/apps/demo/src/app/core/footer/footer.component.scss index c0867181ff..a4f4a59093 100644 --- a/apps/demo/src/app/core/footer/footer.component.scss +++ b/apps/demo/src/app/core/footer/footer.component.scss @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; :host { display: block; diff --git a/apps/demo/src/app/core/header/components/header/header.component.scss b/apps/demo/src/app/core/header/components/header/header.component.scss index 2fe03185a9..562d208e96 100644 --- a/apps/demo/src/app/core/header/components/header/header.component.scss +++ b/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); diff --git a/apps/demo/src/app/core/sidebar/components/sidebar-list/sidebar-list.component.scss b/apps/demo/src/app/core/sidebar/components/sidebar-list/sidebar-list.component.scss index 227abdd4a8..744b8a983d 100644 --- a/apps/demo/src/app/core/sidebar/components/sidebar-list/sidebar-list.component.scss +++ b/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 { 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 b7b1dd91da..37bd72b4c7 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 @@ -1,5 +1,5 @@ @use 'demo-theme'; -@import 'utilities'; +@use 'utilities' as *; .demo-sidebar { padding: 75px 25px 0; diff --git a/apps/demo/src/app/misc/help-box/help-box.component.scss b/apps/demo/src/app/misc/help-box/help-box.component.scss index 458d935f36..36d66e7856 100644 --- a/apps/demo/src/app/misc/help-box/help-box.component.scss +++ b/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 { diff --git a/apps/demo/src/app/misc/not-found/not-found.component.scss b/apps/demo/src/app/misc/not-found/not-found.component.scss index d76d5221b1..65d6a3da83 100644 --- a/apps/demo/src/app/misc/not-found/not-found.component.scss +++ b/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; } } diff --git a/apps/demo/src/app/newsletter/newsletter.component.scss b/apps/demo/src/app/newsletter/newsletter.component.scss index 1f66dc20ab..ad8511d896 100644 --- a/apps/demo/src/app/newsletter/newsletter.component.scss +++ b/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 { 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 66cda3dc8d..55e5bbd886 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 @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; .demo-add-to-cart { display: inline-block; 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 5fed07b6e0..efe0b025db 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 @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; .demo-product-card { border: none; @@ -11,7 +11,7 @@ &__brand { @include embolden(); - @include uppercase(); + text-transform: uppercase; } &__brand, &__name, &__price { diff --git a/apps/demo/src/app/product/components/product-grid/product-grid.component.scss b/apps/demo/src/app/product/components/product-grid/product-grid.component.scss index bec185f19a..b86df9d3e8 100644 --- a/apps/demo/src/app/product/components/product-grid/product-grid.component.scss +++ b/apps/demo/src/app/product/components/product-grid/product-grid.component.scss @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; :host { display: grid; 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 e5aedcbb7e..00689635d6 100644 --- a/apps/demo/src/app/product/components/product/product.component.scss +++ b/apps/demo/src/app/product/components/product/product.component.scss @@ -1,4 +1,4 @@ -@import 'utilities'; +@use 'utilities' as *; @import 'theme'; .demo-product { 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 fefe67d5a0..b8a3b2028c 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 @@ -1,12 +1,12 @@ -@import 'utilities'; +@use 'utilities' as *; .demo-best-sellers { &__title { - font-size: $medium-font-size; - text-align: center; - @include uppercase(); @include embolden(); + font-size: $medium-font-size; margin-bottom: 30px; + text-align: center; + text-transform: uppercase; } &__loading-icon { diff --git a/apps/demo/src/app/thank-you/components/thank-you/thank-you.component.scss b/apps/demo/src/app/thank-you/components/thank-you/thank-you.component.scss index a86f9407f9..78e0cf5491 100644 --- a/apps/demo/src/app/thank-you/components/thank-you/thank-you.component.scss +++ b/apps/demo/src/app/thank-you/components/thank-you/thank-you.component.scss @@ -1,5 +1,6 @@ -@import 'utilities'; -@import 'theme'; +@use 'utilities' as *; +@use '../../../../scss/mixins/dividers' as *; +@use 'demo-theme' as *; .demo-thank-you { padding: 25px 0; @@ -12,7 +13,7 @@ &__title { @include embolden(); - @include uppercase(); + text-transform: uppercase; } &__body { diff --git a/apps/demo/src/app/thank-you/pages/thank-you-view.component.scss b/apps/demo/src/app/thank-you/pages/thank-you-view.component.scss index cb05bf730b..952e29dbf1 100644 --- a/apps/demo/src/app/thank-you/pages/thank-you-view.component.scss +++ b/apps/demo/src/app/thank-you/pages/thank-you-view.component.scss @@ -1,5 +1,5 @@ -@import 'theme'; -@import 'utilities'; +@use 'utilities' as *; +@use 'demo-theme' as *; .demo-thank-you-view { padding: 24px 15px; diff --git a/apps/demo/src/scss/styles.scss b/apps/demo/src/scss/styles.scss index 391bad6017..067fb69641 100644 --- a/apps/demo/src/scss/styles.scss +++ b/apps/demo/src/scss/styles.scss @@ -2,7 +2,7 @@ // If you do, you will increase the final size of the css // footprint for each import. Obviously, this is undesirable. -@use 'daff-global'; +@use 'global'; @use 'demo-theme'; @use 'theme' as daff-theme; diff --git a/apps/demo/src/scss/utilities.scss b/apps/demo/src/scss/utilities.scss deleted file mode 100644 index 5983c64157..0000000000 --- a/apps/demo/src/scss/utilities.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'daff-util'; - -@import './mixins/dividers'; diff --git a/apps/design-land/src/app/navbar/navbar.component.scss b/apps/design-land/src/app/navbar/navbar.component.scss index 0ae3976393..27fe0f490d 100644 --- a/apps/design-land/src/app/navbar/navbar.component.scss +++ b/apps/design-land/src/app/navbar/navbar.component.scss @@ -1,4 +1,4 @@ -@import 'daff-util'; +@use 'utilities' as *; .navbar { display: flex; diff --git a/libs/design/package.json b/libs/design/package.json index d0571c0d54..2b9af03c05 100644 --- a/libs/design/package.json +++ b/libs/design/package.json @@ -51,24 +51,15 @@ "@daffodil/core": "0.0.0-PLACEHOLDER" }, "exports": { - "./scss/daff-global": { - "sass": "./scss/daff-global.scss" - }, "./scss/global": { "sass": "./scss/global.scss" }, "./scss/theme": { "sass": "./scss/theme.scss" }, - "./scss/daff-util": { - "sass": "./scss/daff-util.scss" - }, "./scss/utilities": { "sass": "./scss/utilities.scss" }, - "./scss/daff-typography": { - "sass": "./scss/daff-typography.scss" - }, "./scss/typography/classes": { "sass": "./scss/typography/_classes.scss" } diff --git a/libs/design/scss/README.md b/libs/design/scss/README.md index 6e99747e20..bf58c873be 100644 --- a/libs/design/scss/README.md +++ b/libs/design/scss/README.md @@ -3,5 +3,4 @@ `@daffodil/design` provides several utility files for rapid application development. - `utilities.scss` - A utility library containing things like breakpoints and sass language additions -- `daff-typography.scss` - A typographic library (deprecated) - `theme.scss` - A utility library that allows you to theme `@daffodil/design` components diff --git a/libs/design/scss/daff-global.scss b/libs/design/scss/daff-global.scss deleted file mode 100644 index cf8cc2109c..0000000000 --- a/libs/design/scss/daff-global.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @deprecated -// -// `daff-global` will be deprecated in v1.0.0 - -@forward 'global'; diff --git a/libs/design/scss/daff-typography.scss b/libs/design/scss/daff-typography.scss deleted file mode 100644 index 3e18241175..0000000000 --- a/libs/design/scss/daff-typography.scss +++ /dev/null @@ -1,55 +0,0 @@ -// -// @docs -// -// @deprecated in v1.0.0 -// `daff-typography` will be deprecated in v1.0.0 in favor -// of the typography module. Check out the [typography -// documentation](libs/design/scss/typography/README.md) -// for more information. -// -// `daff-typography` is a generic typography library that -// sets common typography settings for the daffodil design -// package. It IS NOT necessary, but can be used. -// -// @note You SHOULD NOT import this as often as you like, -// as it only contains CSS -// and will effect your final compiled stylesheet size. -// -// @usage -// ```scss -// @use '@daffodil/design/scss/daff-typography'; -// ``` - -@use '~modern-normalize/modern-normalize'; - -@use 'typography' as t; -@forward 'typography'; -@forward 'typography/classes'; - -body, -html { - font-family: t.$body-font-family; - font-size: 16px; - font-weight: 400; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: currentColor; - - &:hover { - text-decoration: none; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - padding: 0; -} diff --git a/libs/design/scss/daff-util.scss b/libs/design/scss/daff-util.scss deleted file mode 100644 index 9436253cfa..0000000000 --- a/libs/design/scss/daff-util.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @deprecated -// -// `daff-util` will be deprecated in v1.0.0 - -@forward 'utilities'; diff --git a/libs/design/scss/typography/_classes.scss b/libs/design/scss/typography/_classes.scss index 571d184fde..f22339617d 100644 --- a/libs/design/scss/typography/_classes.scss +++ b/libs/design/scss/typography/_classes.scss @@ -10,11 +10,6 @@ text-transform: uppercase; } -// deprecate in v1.0 -.single-line-ellipsis { /* stylelint-disable-line selector-class-pattern */ - @include single-line-ellipsis(); -} - .text-truncate { /* stylelint-disable-line selector-class-pattern */ @include text-truncate(); } diff --git a/libs/design/scss/typography/_index.scss b/libs/design/scss/typography/_index.scss index cf9aeac87a..083e4a67ce 100644 --- a/libs/design/scss/typography/_index.scss +++ b/libs/design/scss/typography/_index.scss @@ -1,5 +1,4 @@ @forward 'mixins/font-weight'; @forward 'mixins/sizes'; -@forward 'mixins/text-transform'; @forward 'mixins/text-truncate'; @forward 'utilities'; diff --git a/libs/design/scss/typography/mixins/_text-transform.scss b/libs/design/scss/typography/mixins/_text-transform.scss deleted file mode 100644 index 0cd86063ac..0000000000 --- a/libs/design/scss/typography/mixins/_text-transform.scss +++ /dev/null @@ -1,4 +0,0 @@ -// @deprecated in v1.0.0 -@mixin uppercase() { - text-transform: uppercase; -} \ No newline at end of file diff --git a/libs/design/scss/typography/mixins/_text-truncate.scss b/libs/design/scss/typography/mixins/_text-truncate.scss index a26f42e7db..b0ddc605f3 100644 --- a/libs/design/scss/typography/mixins/_text-truncate.scss +++ b/libs/design/scss/typography/mixins/_text-truncate.scss @@ -7,14 +7,9 @@ // ```scss // @use '@daffodil/design/scss/typography;' // -// @include typography.text-truncate; +// @include typography.text-truncate(); // ``` -// @deprecated in v1.0 in favor of text-truncate -@mixin single-line-ellipsis() { - @include text-truncate(); -} - @mixin text-truncate() { display: block; overflow: hidden; diff --git a/libs/design/tree/src/tree/tree.component.scss b/libs/design/tree/src/tree/tree.component.scss index 4210f023a9..e15a7afe51 100644 --- a/libs/design/tree/src/tree/tree.component.scss +++ b/libs/design/tree/src/tree/tree.component.scss @@ -18,7 +18,7 @@ .daff-tree-item { @include interactions.clickable(); - @include t.single-line-ellipsis(); + @include t.text-truncate(); display: block; position: relative; background: none;