fix: update from zeplin and fix naming issues (normal -> regular) (#173)

db-ui · Nov 29, 2022 · 344f053 · 344f053
1 parent 2be1b3f
commit 344f053
Show file tree

Hide file tree

Showing 14 changed files with 300 additions and 333 deletions.
diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js
@@ -12,7 +12,7 @@ const generateSpacings = (utility) => {
 		allClasses += `@use "scaling-placeholder" as *;\n`;
 	}
 
-	const scaleTypeKey = ['normal', 'functional', 'expressive'];
+	const scaleTypeKey = ['regular', 'functional', 'expressive'];
 
 	for (const scale of scaleTypeKey) {
 		allClasses += `

diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js
@@ -61,6 +61,8 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 
 	if (isHeadline) {
 		result += `
+	font-weight: 700;
+
     &-light,
     &[data-variant="light"] {
         font-weight: 300;
@@ -140,7 +142,7 @@ const generateClasses = (typography, utility) => {
 		allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`;
 	}
 
-	// ScaleTypeKey = [normal, functional, expressive]
+	// ScaleTypeKey = [regular, functional, expressive]
 	for (const scaleTypeKey of Object.keys(typography)) {
 		const scaleObject = typography[scaleTypeKey];
 		const mediaQueryKeys = Object.keys(scaleObject);

diff --git a/scripts/tailwind-config-generator.mjs b/scripts/tailwind-config-generator.mjs
@@ -20,6 +20,7 @@ const run = async () => {
   theme: {
 			screens: tokens.screens,
 			spacing: tokens.spacing,
+			boxShadow: tokens.elevation,
 			gap: ({ theme }) => ({
 				...theme('spacing')
 			}),

diff --git a/scripts/zeplin-styleguide.js b/scripts/zeplin-styleguide.js
@@ -151,8 +151,10 @@ const convertTextStyles = (data) => {
 			.replace('foundation-', '')
 			.replace('typography-', '')
 			.replace('token-', '')
-			.replace('regular-', '')
-			.replace('black-', '');
+			.replace('black-', '')
+			.replace('regular-center', 'center')
+			.replace('regular-left', 'left')
+			.replace('regular-right', 'right');
 		newTextStyles[cKey] = { value: textStyle.value };
 	}
 
@@ -165,8 +167,9 @@ const convertSpacings = (data) => {
 	);
 	const spacings = {};
 	const sizes = {};
-	for (const key of keys) {
+	for (let key of keys) {
 		const spacing = data.spacing[key];
+		key = key.replace('normal', 'regular');
 		if (key?.includes('sizing')) {
 			sizes[key.replace('sizing-', '')] = {
 				value: `${spacing.value}`,

diff --git a/scss/_tonality.scss b/scss/_tonality.scss
@@ -23,17 +23,35 @@
 			@extend %db-scaling-#{nth($styles, $i + 1)};
 
 			*, // TODO: let's check whether we could even also enable this without the asterisk just by inheriting line-height and font-size on non-inheriting elements like buttons
-			[data-size="medium"] {
+			[data-size="medium"],
+			%db-body-md {
 				@extend %db-#{nth($styles, $i + 1)}-body-md;
 			}
 
-			[data-size="large"] {
+			small,
+			[data-size="small"],
+			%db-body-sm {
+				@extend %db-#{nth($styles, $i + 1)}-body-sm;
+			}
+
+			%db-body-2xl {
+				@extend %db-#{nth($styles, $i + 1)}-body-2xl;
+			}
+
+			%db-body-xl {
+				@extend %db-#{nth($styles, $i + 1)}-body-xl;
+			}
+
+			%db-body-lg {
 				@extend %db-#{nth($styles, $i + 1)}-body-lg;
 			}
 
-			small,
-			[data-size="small"] {
-				@extend %db-#{nth($styles, $i + 1)}-body-sm;
+			%db-body-xs {
+				@extend %db-#{nth($styles, $i + 1)}-body-xs;
+			}
+
+			%db-body-2xs {
+				@extend %db-#{nth($styles, $i + 1)}-body-2xs;
 			}
 
 			h1 {
@@ -63,4 +81,4 @@
 	}
 }
 
-@include styles("expressive", "normal", "functional");
+@include styles("expressive", "regular", "functional");
diff --git a/scss/_variables.global.scss b/scss/_variables.global.scss
@@ -16,19 +16,3 @@ $db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
 $db-spacing-responsive-md: var(--db-spacing-responsive-md);
 $db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
 $db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
-
-$db-type-font-size-2xl: var(--db-type-body-font-size-2xl);
-$db-type-font-size-xl: var(--db-type-body-font-size-xl);
-$db-type-font-size-lg: var(--db-type-body-font-size-lg);
-$db-type-font-size-md: var(--db-type-body-font-size-md);
-$db-type-font-size-sm: var(--db-type-body-font-size-sm);
-$db-type-font-size-xs: var(--db-type-body-font-size-xs);
-$db-type-font-size-2xs: var(--db-type-body-font-size-2xs);
-
-$db-type-line-height-2xl: var(--db-type-body-line-height-2xl);
-$db-type-line-height-xl: var(--db-type-body-line-height-xl);
-$db-type-line-height-lg: var(--db-type-body-line-height-lg);
-$db-type-line-height-md: var(--db-type-body-line-height-md);
-$db-type-line-height-sm: var(--db-type-body-line-height-sm);
-$db-type-line-height-xs: var(--db-type-body-line-height-xs);
-$db-type-line-height-2xs: var(--db-type-body-line-height-2xs);
diff --git a/scss/db-ui-base.scss b/scss/db-ui-base.scss
@@ -7,5 +7,5 @@
 @use "init" as *;
 
 :root {
-	@extend %db-ui-normal;
+	@extend %db-ui-regular;
 }
diff --git a/source/_patterns/sizings/examples.hbs b/source/_patterns/sizings/examples.hbs
@@ -8,7 +8,7 @@
 			</h3>
 
 			<div style="display: flex; flex-wrap: wrap; gap: 8px">
-				{{spacing-examples @root "sizings" "Normal" "normal"}}
+				{{spacing-examples @root "sizings" "Regular" "regular"}}
 			</div>
 
 
@@ -32,7 +32,7 @@
 
 		<db-tab label="Normal" name="tab-bar">
 			<div style="display: flex; flex-wrap: wrap; gap: 8px">
-				{{spacing-examples @root "sizings" "Normal" "normal"}}
+				{{spacing-examples @root "sizings" "Regular" "regular"}}
 			</div>
 		</db-tab>
 

diff --git a/source/_patterns/spacings/examples.hbs b/source/_patterns/spacings/examples.hbs
@@ -4,14 +4,14 @@
 	<db-tab-bar>
 		<db-tab label="All" name="tab-bar" active>
 			<h3>
-				Tables of all "normal" styles
+				Tables of all "Regular" styles
 			</h3>
 
 			<div style="display: flex; flex-wrap: wrap; gap: 8px">
-				{{spacing-examples @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
-				{{spacing-examples @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
-				{{spacing-examples @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
-				{{spacing-examples @root "spacings" "Normal Fixed" "fixed-normal"}}
+				{{spacing-examples @root "spacings" "Regular Desktop" "responsive-regular-desktop"}}
+				{{spacing-examples @root "spacings" "Regular Tablet" "responsive-regular-tablet"}}
+				{{spacing-examples @root "spacings" "Regular Mobile" "responsive-regular-mobile"}}
+				{{spacing-examples @root "spacings" "Regular Fixed" "fixed-regular"}}
 			</div>
 
 
@@ -39,12 +39,12 @@
 			</div>
 		</db-tab>
 
-		<db-tab label="Normal" name="tab-bar">
+		<db-tab label="Regular" name="tab-bar">
 			<div style="display: flex; flex-wrap: wrap; gap: 8px">
-				{{spacing-examples @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
-				{{spacing-examples @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
-				{{spacing-examples @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
-				{{spacing-examples @root "spacings" "Normal Fixed" "fixed-normal"}}
+				{{spacing-examples @root "spacings" "Regular Desktop" "responsive-regular-desktop"}}
+				{{spacing-examples @root "spacings" "Regular Tablet" "responsive-regular-tablet"}}
+				{{spacing-examples @root "spacings" "Regular Mobile" "responsive-regular-mobile"}}
+				{{spacing-examples @root "spacings" "Regular Fixed" "fixed-regular"}}
 			</div>
 		</db-tab>
 

diff --git a/source/_patterns/spacings/intro.hbs b/source/_patterns/spacings/intro.hbs
@@ -11,10 +11,10 @@
 			</h3>
 
 			<div style="display: flex; flex-direction: column; gap: 8px">
-				{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
-				{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
-				{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
-				{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-normal"}}
+				{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-regular-desktop"}}
+				{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-regular-tablet"}}
+				{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-regular-mobile"}}
+				{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-regular"}}
 			</div>
 
 
@@ -43,10 +43,10 @@
 		</db-tab>
 		<db-tab label="Normal" name="tab-bar">
 			<div style="display: flex; flex-wrap: wrap; gap: 8px">
-				{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
-				{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
-				{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
-				{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-normal"}}
+				{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-regular-desktop"}}
+				{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-regular-tablet"}}
+				{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-regular-mobile"}}
+				{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-regular"}}
 			</div>
 		</db-tab>
 		<db-tab label="Functional" name="tab-bar">

diff --git a/source/_patterns/typography/usage.hbs b/source/_patterns/typography/usage.hbs
@@ -48,9 +48,9 @@ body {
 @import "@db-ui-base/scss/typography-classes";
 </code>
 			</pre>
-			<strong>Example html (class='db-normal-body-xs'):</strong>
+			<strong>Example html (class='db-regular-body-xs'):</strong>
 			<p>Default: <strong>14px</strong></p>
-			<p class='db-normal-body-xs'>SM: <strong>12px</strong></p>
+			<p class='db-regular-body-xs'>SM: <strong>12px</strong></p>
 
 		</db-tab>
 		<db-tab label="Tailwind" name="tab-bar">

diff --git a/source/css/documentation.scss b/source/css/documentation.scss
@@ -23,11 +23,11 @@ textarea {
 @import "../_patterns/elevation/examples.demonstration";
 
 main {
-	padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-l;
+	padding: $db-spacing-fixed-regular-xs $db-spacing-fixed-regular-l;
 }
 
 .typography-table {
 	tr > td {
-		padding: $db-spacing-fixed-normal-2xs $db-spacing-fixed-normal-xs;
+		padding: $db-spacing-fixed-regular-2xs $db-spacing-fixed-regular-xs;
 	}
 }
diff --git a/style-dictionary.js b/style-dictionary.js
@@ -13,7 +13,6 @@ const generateScaling = require('./scripts/scss-scaling-generator');
 const modifyTailwind = (dictionary) => {
 	for (const token of [
 		'colors',
-		'elevation',
 		'font',
 		'transition',
 		'sizing',