feat(design-land): update theming and utilities module implementation (…

…#2184)
graycoreio · May 15, 2023 · fa594ca · fa594ca
1 parent 0ef4921
commit fa594ca
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 72 deletions.
diff --git a/apps/design-land/src/app/core/code-preview/component/code-preview-theme.scss b/apps/design-land/src/app/core/code-preview/component/code-preview-theme.scss
@@ -1,13 +1,13 @@
 @use 'sass:map';
-@use '../../../../scss/dl-theme';
+@use 'theme' as daff-theme;
 
 @mixin code-preview-theme($theme) {
-	$gray: dl-theme.daff-map-deep-get($theme, 'core.gray');
-	$base: dl-theme.daff-map-deep-get($theme, 'core.base');
+	$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
+	$base: daff-theme.daff-map-deep-get($theme, 'core.base');
 
 	.design-land-code-preview {
 		&__content {
-			border: 1px solid rgba(dl-theme.daff-illuminate($base, $gray, 2), 0.6);
+			border: 1px solid rgba(daff-theme.daff-illuminate($base, $gray, 2), 0.6);
 			border-bottom: 0;
 		}
 	}

diff --git a/apps/design-land/src/app/core/code-preview/component/code-preview.component.scss b/apps/design-land/src/app/core/code-preview/component/code-preview.component.scss
@@ -1,5 +1,3 @@
-@import 'utilities';
-
 :host {
 	display: block;
 	margin: 20px 0;

diff --git a/apps/design-land/src/app/foundations/color/color-theme.scss b/apps/design-land/src/app/foundations/color/color-theme.scss
@@ -1,23 +1,23 @@
-@use '../../../scss/dl-theme';
+@use 'theme' as daff-theme;
 
 @mixin color-theme($theme) {
-	$white: dl-theme.daff-map-deep-get($theme, 'core.white');
-	$black: dl-theme.daff-map-deep-get($theme, 'core.black');
+	$white: daff-theme.daff-map-deep-get($theme, 'core.white');
+	$black: daff-theme.daff-map-deep-get($theme, 'core.black');
 
 	.dl-color {
 		&__palette {
 			> * {
 				&:nth-child(n+6) {
-					color: dl-theme.$white;
+					color: daff-theme.$white;
 				}
 			}
 
 			&.brand-yellow {
 				> * {
-					color: dl-theme.$black;
+					color: daff-theme.$black;
 
 					&:last-child {
-						color: dl-theme.$white;
+						color: daff-theme.$white;
 					}
 				}
 			}

diff --git a/apps/design-land/src/app/foundations/color/color.component.scss b/apps/design-land/src/app/foundations/color/color.component.scss
@@ -1,4 +1,4 @@
-@use 'utilities' as *;
+@use 'utilities' as daff;
 
 .dl-color {
 	&__grid {
@@ -10,14 +10,14 @@
 			'secondary'
 			'tertiary';
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			grid-template-columns: repeat(2, 1fr);
 			grid-template-areas: 
 				'primary   secondary'
 				'tertiary  .';
 		}
 
-		@include breakpoint(big-tablet) {
+		@include daff.breakpoint(big-tablet) {
 			grid-template-columns: repeat(3, 1fr);
 			grid-template-areas: 
 				'primary secondary tertiary';
@@ -34,14 +34,14 @@
 			'red-palette'
 			'green-palette';
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			grid-template-columns: repeat(2, 1fr);
 			grid-template-areas:
 				'brand-yellow  bronze'
 				'red-palette   green-palette';
 		}
 
-		@include breakpoint(big-tablet) {
+		@include daff.breakpoint(big-tablet) {
 			grid-template-columns: repeat(4, 1fr);
 			grid-template-areas:
 				'brand-yellow bronze red-palette green-palette';
@@ -103,6 +103,6 @@
 	}
 
 	&__hue {
-		@include uppercase();
+		text-transform: uppercase;
 	}
 }
diff --git a/apps/design-land/src/app/foundations/variables/variables.component.scss b/apps/design-land/src/app/foundations/variables/variables.component.scss
@@ -1,8 +0,0 @@
-@import 'utilities';
-@import 'theme';
-
-.variables {
-	&__custom {
-		background: var(--daff-theme-primary);
-	}
-}

diff --git a/apps/design-land/src/app/typography/typography-theme.scss b/apps/design-land/src/app/typography/typography-theme.scss
@@ -1,17 +1,17 @@
 @use 'sass:map';
-@use 'dl-theme';
+@use 'theme' as daff-theme;
 
 @mixin typography-theme($theme) {
-	$gray: dl-theme.daff-map-deep-get($theme, 'core.gray');
+	$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
 
 	.dl-typography {
 		&__typescale-card {
-			border: 1px solid dl-theme.daff-color($gray, 20);
+			border: 1px solid daff-theme.daff-color($gray, 20);
 		}
 
 		&__desktop-subheading,
 		&__mobile-subheading {
-			color: dl-theme.daff-color($gray);
+			color: daff-theme.daff-color($gray);
 		}
 	}	
 }
diff --git a/apps/design-land/src/app/typography/typography.component.scss b/apps/design-land/src/app/typography/typography.component.scss
@@ -1,4 +1,4 @@
-@use 'utilities' as *;
+@use 'utilities' as daff;
 
 .dl-typography {
 	&__typescale-card {
@@ -9,64 +9,64 @@
 
 	&__desktop-subheading,
 	&__mobile-subheading {
-		@include subheading();
+		@include daff.subheading();
 		margin: 0 0 8px;
 		padding: 0;
 	}
 
 	&__desktop-subheading {
 		display: none;
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			display: block;
 		}
 	}
 
 	&__mobile-subheading {
 		display: block;
 
-		@include breakpoint(tablet) {
+		@include daff.breakpoint(tablet) {
 			display: none;
 		}
 	}
 
 	&__headline-xl {
-		@include headline-xl();
+		@include daff.headline-xl();
 	}
 
 	&__headline-lg {
-		@include headline-lg();
+		@include daff.headline-lg();
 	}
 
 	&__headline-md {
-		@include headline-md();
+		@include daff.headline-md();
 	}
 
 	&__headline-sm {
-		@include headline-sm();
+		@include daff.headline-sm();
 	}
 
 	&__body-lg {
-		@include body-lg();
+		@include daff.body-lg();
 	}
 
 	&__body-md {
-		@include body-md();
+		@include daff.body-md();
 	}
 
 	&__body-sm {
-		@include body-sm();
+		@include daff.body-sm();
 	}
 
 	&__body-xs {
-		@include body-xs();
+		@include daff.body-xs();
 	}
 
 	&__subheading {
-		@include subheading();
+		@include daff.subheading();
 	}
 
 	&__caption {
-		@include caption();
+		@include daff.caption();
 	}
 }
diff --git a/apps/design-land/src/scss/dl-theme.scss b/apps/design-land/src/scss/dl-theme.scss
diff --git a/apps/design-land/src/scss/styles.scss b/apps/design-land/src/scss/styles.scss
@@ -2,26 +2,27 @@
 * DO NOT IMPORT THIS FILE ANYWHERE ELSE
 ************************************/
 
-@use 'daff-global';
+@use 'global';
 
-@use 'dl-theme';
 @use 'theme' as daff-theme;
 @use './component-themes' as dl-components;
 
 .daff-theme-light {
   @import 'highlight.js/scss/a11y-light.scss';
-  @include daff-theme.daff-theme(dl-theme.$theme);
-  @include dl-components.component-themes(dl-theme.$theme);
 
-  background: dl-theme.$white;
-	color: dl-theme.daff-text-contrast(dl-theme.$white);
+  @include daff-theme.daff-theme(daff-theme.$theme);
+  @include dl-components.component-themes(daff-theme.$theme);
+
+  background: var(--daff-base-background);
+	color: var(--daff-base-text);
 }
 
 .daff-theme-dark {
   @import 'highlight.js/scss/a11y-dark.scss';
-  @include daff-theme.daff-theme(dl-theme.$theme-dark);
-  @include dl-components.component-themes(dl-theme.$theme-dark);
 
-  background: dl-theme.$black;
-	color: dl-theme.daff-text-contrast(dl-theme.$black);
+  @include daff-theme.daff-theme(daff-theme.$theme-dark);
+  @include dl-components.component-themes(daff-theme.$theme-dark);
+
+  background: var(--daff-base-background);
+	color: var(--daff-base-text);
 }
diff --git a/apps/design-land/src/scss/utilities.scss b/apps/design-land/src/scss/utilities.scss