feat: moved Base aspects from DB UI Core to DB UI Base

package.json

@@ -36,6 +36,9 @@
     "zeplin:tokens": "node scripts/zeplin-styleguide.js"
   },
   "license": "Apache-2.0",
+  "dependencies": {
+    "@csstools/normalize.css": "^12.0.0"
+  },
   "devDependencies": {
     "@commitlint/cli": "17.2.0",
     "@commitlint/config-conventional": "17.2.0",

scripts/color-classes-generator.js

@@ -35,7 +35,10 @@ const generateBGVariants = (value, index) => {
  * @returns scss string
  */
 exports.generateColorUtilitityClasses = (colorToken) => {
-	let output = '@import "variables";\n@import "color-placeholder";\n';
+	let output = `
+	@use "variables" as *;
+	@use "color-placeholder" as *;
+	`;
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
 		output += `/**

scripts/color-placeholders-generator.js

@@ -86,7 +86,7 @@ const generateBGVariants = (
  * @returns scss string
  */
 exports.generateColorUtilitityPlaceholder = (colorToken) => {
-	let output = '';
+	let output = '@use "variables" as *;\n';
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
 		output += `/**

scripts/scss-scaling-generator.js

@@ -1,5 +1,5 @@
 const fileHeader =
-	'\n' +
+	'@use "variables" as *;\n' +
 	'// Do not edit directly\n' +
 	'// Generated on ' +
 	new Date().toString() +
@@ -9,7 +9,7 @@ const generateSpacings = (utility) => {
 	let allClasses = fileHeader;
 
 	if (utility) {
-		allClasses += `@import "variables";\n@import "scaling-placeholder";\n`;
+		allClasses += `@use "scaling-placeholder" as *;\n`;
 	}
 
 	const scaleTypeKey = ['normal', 'functional', 'expressive'];

scripts/scss-typography-generator.js

@@ -1,11 +1,12 @@
 const prefix = 'db';
 
-const fileHeader =
-	'@import "icon-family-calc";\n' +
-	'// Do not edit directly\n' +
-	'// Generated on ' +
-	new Date().toString() +
-	'\n';
+const fileHeader = `
+	@use "variables" as *;
+	@use "icon/icon-family-calc" as *;
+	// Do not edit directly
+	// Generated on
+	// ${new Date().toString()}
+	`;
 
 const getShortSize = (size) => {
 	if (size === '3xlarge') {
@@ -112,7 +113,7 @@ const generateClasses = (typography, utility) => {
 	let allClasses = fileHeader;
 
 	if (utility) {
-		allClasses += `@import "variables";\n@import "typography-placeholder";\n`;
+		allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`;
 	}
 
 	// ScaleTypeKey = [normal, functional, expressive]

scss/_default.assets-paths.scss

@@ -0,0 +1,3 @@
+$icons-path: "assets/icons/" !default;
+$images-path: "assets/images/" !default;
+$fonts-path: "assets/fonts/" !default;

scss/_font-faces.scss

@@ -1,35 +1,38 @@
+@use "variables" as *;
+@use "default.assets-paths" as *;
+
 @font-face {
 	font-family: $db-font-db-screenhead-light-font-family;
 	font-style: normal;
 	font-weight: $db-font-db-screenhead-light-font-weight;
 	src: local($db-font-db-screenhead-light-name),
-		url($db-font-db-screenhead-light-woff2) format("woff2"),
-		url($db-font-db-screenhead-light-woff) format("woff");
+		url($fonts-path + $db-font-db-screenhead-light-woff2) format("woff2"),
+		url($fonts-path + $db-font-db-screenhead-light-woff) format("woff");
 }
 
 @font-face {
 	font-family: $db-font-db-screenhead-black-font-family;
 	font-style: normal;
 	font-weight: $db-font-db-screenhead-black-font-weight;
 	src: local($db-font-db-screenhead-black-name),
-		url($db-font-db-screenhead-black-woff2) format("woff2"),
-		url($db-font-db-screenhead-black-woff) format("woff");
+		url($fonts-path + $db-font-db-screenhead-black-woff2) format("woff2"),
+		url($fonts-path + $db-font-db-screenhead-black-woff) format("woff");
 }
 
 @font-face {
 	font-family: $db-font-db-screensans-regular-font-family;
 	font-style: normal;
 	font-weight: $db-font-db-screensans-regular-font-weight;
 	src: local($db-font-db-screensans-regular-name),
-		url($db-font-db-screensans-regular-woff2) format("woff2"),
-		url($db-font-db-screensans-regular-woff) format("woff");
+		url($fonts-path + $db-font-db-screensans-regular-woff2) format("woff2"),
+		url($fonts-path + $db-font-db-screensans-regular-woff) format("woff");
 }
 
 @font-face {
 	font-family: $db-font-db-screensans-bold-font-family;
 	font-style: normal;
 	font-weight: $db-font-db-screensans-bold-font-weight;
 	src: local($db-font-db-screensans-bold-name),
-		url($db-font-db-screensans-bold-woff2) format("woff2"),
-		url($db-font-db-screensans-bold-woff) format("woff");
+		url($fonts-path + $db-font-db-screensans-bold-woff2) format("woff2"),
+		url($fonts-path + $db-font-db-screensans-bold-woff) format("woff");
 }

scss/_rollup.assets-paths.scss

@@ -0,0 +1,4 @@
+// If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
+$icons-path: "@db-ui/core/dist/icons/";
+$images-path: "@db-ui/core/dist/images/";
+$fonts-path: "@db-ui/core/dist/fonts/";

scss/_tonality.scss

@@ -1,6 +1,7 @@
-@import "font-faces";
-@import "typography-placeholder";
-@import "scaling-placeholder";
+@use "variables" as *;
+@use "font-faces" as *;
+@use "typography-placeholder" as *;
+@use "scaling-placeholder" as *;
 
 :root {
 	font-family: $db-font-family-sans;
@@ -21,15 +22,15 @@
 		.db-ui-#{nth($styles, $i + 1)} {
 			@extend %db-scaling-#{nth($styles, $i + 1)};
 
-			[data-size="large"] {
-				@extend %db-#{nth($styles, $i + 1)}-body-lg;
-			}
-
-			:not(small),
+			*,
 			[data-size="medium"] {
 				@extend %db-#{nth($styles, $i + 1)}-body-md;
 			}
 
+			[data-size="large"] {
+				@extend %db-#{nth($styles, $i + 1)}-body-lg;
+			}
+
 			small,
 			[data-size="small"] {
 				@extend %db-#{nth($styles, $i + 1)}-body-sm;

scss/_webpack.assets-paths.scss

@@ -0,0 +1,4 @@
+// If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
+$icons-path: "~@db-ui/core/dist/icons/";
+$images-path: "~@db-ui/core/dist/images/";
+$fonts-path: "~@db-ui/core/dist/fonts/";

scss/db-ui-base.scss

@@ -1,7 +1,9 @@
-@import "variables";
-@import "variables.global";
-@import "color-placeholder";
-@import "tonality";
+@use "@csstools/normalize.css/normalize.css";
+
+@use "variables" as *;
+@use "variables.global" as *;
+@use "color-placeholder" as *;
+@use "tonality" as *;
 
 :root {
 	@extend %db-ui-normal;

scss/helpers/_a11y.scss

@@ -0,0 +1,8 @@
+%a11y-visually-hidden {
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	overflow: hidden;
+	position: absolute !important;
+	white-space: nowrap;
+	width: 1px;
+}

scss/helpers/_clearfix.scss

@@ -0,0 +1,5 @@
+%clearfix::after {
+	clear: both;
+	content: " ";
+	display: table;
+}

scss/helpers/_functions.scss

@@ -0,0 +1,37 @@
+@use "sass:math";
+@use "a11y" as *;
+@use "clearfix" as *;
+
+@function to-rem($pxValue) {
+	@return #{$pxValue * 0.0625}rem;
+}
+
+@function to-em($pxValue) {
+	@return #{$pxValue * 0.0625}em;
+}
+
+// TODO: We might be able to simplify the following placeholder/mixins afterwards by partial construct out of DB UI Core
+// Mixin wrappers around the SCSS placeholders
+@mixin a11y-visually-hidden($partial: false) {
+	@if $partial {
+		clip: rect(0, 0, 0, 0);
+		height: 1px;
+		overflow: hidden;
+		position: absolute !important;
+		white-space: nowrap;
+		width: 1px;
+	} @else {
+		@extend %a11y-visually-hidden;
+	}
+}
+@mixin clearfix($partial: false) {
+	@if $partial {
+		&::after {
+			clear: both;
+			content: " ";
+			display: table;
+		}
+	} @else {
+		@extend %clearfix;
+	}
+}

scss/icon/_icons.attributes-mappings.scss

@@ -0,0 +1,14 @@
+@use "icons.variables" as *;
+
+// *** Attribute based method ***
+@each $icon-name, $icon-glyph in $icon-glyphs {
+	[data-icon="#{$icon-name}"],
+	[data-icon-before="#{$icon-name}"] {
+		&::before {
+			--icon-glyph: "#{$icon-glyph}";
+		}
+	}
+	[data-icon-after="#{$icon-name}"]::after {
+		--icon-glyph: "#{$icon-glyph}";
+	}
+}

scss/icon/_icons.custom-properties.scss

@@ -0,0 +1,35 @@
+@use "icons.variables" as *;
+@use "icons.helpers" as *;
+@use "icons.placeholder" as *;
+
+// TODO: The following construct was especially meant to enable a branch (EDS & FV) specific result - probably we could refactor this the sooner the later
+[data-icon]:not([data-icon-variant]),
+[data-icon-before]:not([data-icon-variant-before]) {
+	&::before {
+		@extend %default-icon-custom-properties !optional;
+	}
+}
+
+[data-icon-after]:not([data-icon-variant-after]) {
+	&::after {
+		@extend %default-icon-custom-properties !optional;
+	}
+}
+
+// DB UX Icons
+@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+	@each $icon-size, $icon-categories in $icon-sizes {
+		[data-icon-variant="#{$icon-size}-#{$icon-style}"],
+		[data-icon-variant-before="#{$icon-size}-#{$icon-style}"] {
+			&[data-icon],
+			&[data-icon-before] {
+				@include icon-meta($icon-size, $icon-style);
+			}
+		}
+		[data-icon-variant-after="#{$icon-size}-#{$icon-style}"] {
+			&[data-icon-after] {
+				@include icon-meta($icon-size, $icon-style, "after");
+			}
+		}
+	}
+}

scss/icon/_icons.font-faces.scss

@@ -0,0 +1,36 @@
+@use "icons.variables" as *;
+@use "../default.assets-paths" as *;
+
+// Potential TODO: usage of the standard filenames described by https://marketingportal.extranet.deutschebahn.com/de/icons-2
+
+@font-face {
+	font-display: block;
+	font-family: "missing-icons";
+	src: url("#{$icons-path}functional/fonts/icons-empty.woff2?4r2095")
+			format("woff2"),
+		url("#{$icons-path}functional/fonts/icons-empty.woff?4r2095")
+			format("woff");
+}
+
+// DB UX Icons
+@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+	@each $icon-size, $icon-categories in $icon-sizes {
+		@each $icon-category, $icon-font-unicodes in $icon-categories {
+			@font-face {
+				$icon-font-family: "icons-" + $icon-size + "-" + $icon-style;
+
+				font-display: block;
+
+				font-family: $icon-font-family;
+				font-style: normal;
+				font-weight: normal;
+				src: url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2095")
+						format("woff2"),
+					url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2095")
+						format("woff");
+
+				unicode-range: unquote($icon-font-unicodes);
+			}
+		}
+	}
+}