feat(daffio): update theming and utilities module implementation (#2181)

graycoreio · May 15, 2023 · 0ef4921 · 0ef4921
1 parent d6bfc05
commit 0ef4921
Show file tree

Hide file tree

Showing 28 changed files with 142 additions and 165 deletions.
diff --git a/apps/daffio/src/app/api/components/api-list/api-list-theme.scss b/apps/daffio/src/app/api/components/api-list/api-list-theme.scss
@@ -1,9 +1,9 @@
-@use 'daffio-theme' as theme;
+@use 'theme' as daff-theme;
 
 @mixin daffio-api-list-theme($theme) {
-	$gray: theme.daff-map-deep-get($theme, 'core.gray');
-	$base: theme.daff-map-deep-get($theme, "core.base");
-	$base-contrast: theme.daff-map-deep-get($theme, "core.base-contrast");
+	$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
+	$base: daff-theme.daff-map-deep-get($theme, "core.base");
+	$base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast");
 
 	.daffio-api-list {
 		&__package-name {
@@ -16,7 +16,7 @@
 			}
 
 			&:hover {
-				color: theme.daff-illuminate($base-contrast, $gray, 3);
+				color: daff-theme.daff-illuminate($base-contrast, $gray, 3);
 			}
 		}
 
@@ -27,7 +27,7 @@
 			}
 
 			&:hover {
-				background: theme.daff-illuminate($base, $gray, 2);
+				background: daff-theme.daff-illuminate($base, $gray, 2);
 			}
 		}
 	}

diff --git a/apps/daffio/src/app/api/components/api-list/api-list.component.scss b/apps/daffio/src/app/api/components/api-list/api-list.component.scss
@@ -1,5 +1,5 @@
 @use '../../../../scss/type-descriptors/mixins' as type-mixin;
-@import 'utilities';
+@use 'utilities' as daff;
 
 :host {
 	display: flex;
@@ -27,15 +27,15 @@
 		line-height: 1.375rem;
 		margin: 0 0 24px;
 
-		@include breakpoint(mobile) {
+		@include daff.breakpoint(mobile) {
 			font-size: 1.25rem;
 			line-height: 1.75rem;
 		}
 
 		> * {
-			@include single-line-ellipsis();
+			@include daff.single-line-ellipsis();
 
-			@include breakpoint(mobile) {
+			@include daff.breakpoint(mobile) {
 				display: inline-block;
 			}
 		}
@@ -46,11 +46,11 @@
 		grid-template-columns: 1fr;
 		grid-gap: 8px 24px;
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			grid-template-columns: repeat(2, 1fr);
 		}
 
-		@include breakpoint(small-laptop) {
+		@include daff.breakpoint(small-laptop) {
 			grid-template-columns: repeat(3, 1fr);
 		}
 	}
@@ -66,7 +66,7 @@
 }
 
 	&__item-name {
-		@include single-line-ellipsis();
+		@include daff.single-line-ellipsis();
 	}
 
 	&__item-label {

diff --git a/apps/daffio/src/app/api/pages/api-list-page/api-list-page.component.scss b/apps/daffio/src/app/api/pages/api-list-page/api-list-page.component.scss
@@ -1,17 +1,17 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 :host {
 	display: block;
 	padding: 48px 24px;
 
-	@include breakpoint(tablet) {
+	@include daff.breakpoint(tablet) {
 		padding: 48px;
 	}
 }
 
 .daffio-api-list-page {
 	&__title {
-		@include headline-xl();
+		@include daff.headline-xl();
 		margin-bottom: 48px;
 	}
 }
diff --git a/.../app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss b/.../app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-home-callout-platforms {
@@ -9,7 +9,7 @@
 		grid-gap: 24px;
 		justify-content: center;
 
-		@include breakpoint(mobile) {
+		@include daff.breakpoint(mobile) {
 			grid-template-columns: 144px 144px;
 		grid-template-areas: 'magento shopify';
 		grid-gap: 48px;

diff --git a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-home-callout-pwa {
@@ -22,7 +22,7 @@
 			'd';
 		grid-gap: 16px;
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			grid-template-columns: 1fr 1fr;
 			grid-template-areas:
 				'a b'

diff --git a/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss b/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss
@@ -1,14 +1,14 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 :host {
 	display: block;
 	overflow: hidden;
 
-	@include breakpoint(big-tablet) {
+	@include daff.breakpoint(big-tablet) {
 		height: calc(100vh - 64px);
 	}
 
-	@include breakpoint(desktop) {
+	@include daff.breakpoint(desktop) {
 		height: 80vh;
 	}
 }
@@ -22,14 +22,14 @@
 			'content';
 		position: relative;
 
-    @include breakpoint(big-tablet) {
+    @include daff.breakpoint(big-tablet) {
       grid-template-columns: 560px 1fr;
 			grid-template-areas:
 				'content illustration';
     	grid-gap: 48px;
     }
 
-    @include breakpoint(small-laptop) {
+    @include daff.breakpoint(small-laptop) {
 			grid-template-columns: 560px 1fr;
 			grid-template-areas:
 				'content illustration';
@@ -47,15 +47,15 @@
 		display: none;
 		grid-area: illustration;
 
-		@include breakpoint(big-tablet) {
+		@include daff.breakpoint(big-tablet) {
 			display: block;
 			position: absolute;
 			right: -288px;
 			top: -40px;
 			width: 736px;
 		}
 
-		@include breakpoint(desktop) {
+		@include daff.breakpoint(desktop) {
 			top: -60px;
 		}
 	}

diff --git a/apps/daffio/src/app/content/support/component/support.component.scss b/apps/daffio/src/app/content/support/component/support.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-support {
@@ -11,7 +11,7 @@
     grid-template-columns: 1fr;
     grid-gap: 16px;
 
-    @include breakpoint(tablet) {
+    @include daff.breakpoint(tablet) {
       grid-template-columns: 1fr 1fr;
     }
   }

diff --git a/...affio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss b/...affio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss
@@ -1,19 +1,19 @@
 @use 'sass:map';
-@use 'daffio-theme' as theme;
+@use 'theme' as daff-theme;
 
 @mixin daffio-feature-comparison-theme($theme){
     $secondary: map.get($theme, secondary);
-    $base: theme.daff-map-deep-get($theme, "core.base");
-    $base-contrast: theme.daff-map-deep-get($theme, "core.base-contrast");
+    $base: daff-theme.daff-map-deep-get($theme, "core.base");
+    $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast");
 
     .feature-comparison {
         background: $base;
         box-shadow: 0 0 30px 0 rgba($base-contrast, 0.05);
 
         > * {
             &:nth-child(4n-2) {
-                background: theme.daff-color($secondary);
-                color: theme.daff-text-contrast(theme.daff-color($secondary));
+                background: daff-theme.daff-color($secondary);
+                color: daff-theme.daff-text-contrast(daff-theme.daff-color($secondary));
             }
         }
     }

diff --git a/...o/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss b/...o/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 @mixin comparison-cell {
   display: flex;
@@ -16,22 +16,22 @@
     align-items: flex-start;
     font-size: 0.75rem;
     padding: 15px 5px;
-    @include embolden();
-    @include uppercase();
+    @include daff.embolden();
+    @include daff.uppercase();
 
-    @include breakpoint(tablet) {
+    @include daff.breakpoint(tablet) {
       padding: 25px 5px;
-      font-size: $small-font-size;
+      font-size: daff.$small-font-size;
     }
   }
 
   &__cell {
     @include comparison-cell();
     align-items: center;
-    font-size: $small-font-size;
+    font-size: daff.$small-font-size;
     padding: 10px 15px;
 
-    @include breakpoint(tablet) {
+    @include daff.breakpoint(tablet) {
       font-size: 1rem;
       padding: 15px 25px;
     }

diff --git a/...affio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss b/...affio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-why-pwa-examples {
@@ -7,7 +7,7 @@
     grid-template-columns: 1fr;
     grid-gap: 24px;
 
-    @include breakpoint(big-tablet) {
+    @include daff.breakpoint(big-tablet) {
       grid-template-columns: 1fr 1fr 1fr;
 			grid-gap: 24px;
     }

diff --git a/...affio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss b/...affio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-why-pwa-overview {
@@ -12,15 +12,15 @@
 			'd';
 		grid-gap: 16px;
 
-    @include breakpoint(mobile) {
+    @include daff.breakpoint(mobile) {
       grid-template-columns: 1fr 1fr;
 			grid-template-areas:
 				'a  b'
 				'c  d';
 			grid-gap: 16px;
     }
 
-    @include breakpoint(tablet) {
+    @include daff.breakpoint(tablet) {
       grid-template-columns: 1fr 1fr 1fr 1fr;
 			grid-template-areas: 'a b c d';
 			grid-gap: 16px;

diff --git a/...affio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss b/...affio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-why-pwa-solution {
@@ -11,7 +11,7 @@
     grid-gap: 48px;
     align-items: center;
 
-    @include breakpoint(big-tablet) {
+    @include daff.breakpoint(big-tablet) {
       grid-template-columns: 2fr 1fr;
       grid-template-areas: 'feature-comparison list';
     }

diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss
@@ -1,4 +1,4 @@
-@import 'utilities';
+@use 'utilities' as daff;
 
 /* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */
 .daffio-why-pwa-stats {
@@ -10,7 +10,7 @@
 			'b';
     grid-gap: 24px;
 
-    @include breakpoint(big-tablet) {
+    @include daff.breakpoint(big-tablet) {
       grid-template-columns: 1fr 1fr;
 			grid-template-areas: 'a b';
 			grid-gap: 24px;