@db-ux/core-foundations 1.0.0-test-13b991d

package/README.md

@@ -0,0 +1,351 @@
+# @db-ux/core-foundations
+
+![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
+
+A library containing all tokens (colors, spacings, font formatting, etc.) and assets (icons) of [DB UX Design System v3](https://github.com/db-ux-design-system/core-web).
+
+We currently support:
+
+- [CSS](https://db-ux-design-system.github.io/core-web/review/main/foundations/readme?current=css)
+- [SCSS](https://db-ux-design-system.github.io/core-web/review/main/foundations/readme?current=scss)
+- [Tailwind](https://db-ux-design-system.github.io/core-web/review/main/foundations/readme?current=tailwind)
+
+## Install
+
+```shell
+npm i @db-ux/core-foundations
+```
+
+## Usage
+
+You use this library if you need some colors, spacings etc.
+
+> **tl;dr:** Use the default theme and the bundled styles by importing [relative|absolute|rollup|webpack].css`.
+
+---
+
+First of all you need to import a theme which contains all tokens (css-properties). We provide a `default-theme.css` which handles dark/light mode as well.
+
+Afterward, you may import helper classes / placeholders to easily consume the tokens from your theme. There are some categories:
+
+- **init**: Global styles which apply to all or a large group of selectors. Make sure to import `inits/required.css` to normalize tags like `body` etc. Furthermore, we provide some default styles.
+- **icons**: Icons classes to load **woff2** files and adds `[data-icon]` and `[data-icon-after]` to enable icons for all tags and components.
+- **helpers**: Use dividers or focus border
+- **fonts**: Overwrite default `font-size`, `line-height` and `icon-size`
+- **density**: Overwrite default density to scale adaptive components inside container using density
+- **colors**: Sets an adaptive color to a container, which passes all required css-properties to children
+
+You can import the complete **init** styles with `[relative|absolute|rollup|webpack].css` which apply the default:
+
+- [Density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=und%20Textfarben%20sicherstellt.-,Sizing,-Adaptive%20Sizing%20ist): `regular`
+- [Adaptive Coloring](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=Akzeptieren-,Coloring,-Adaptive%20Coloring%20bezieht): `neutral-bg-lvl-1`
+
+### CSS
+
+Default assets path for `relative.css` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].css`.
+
+#### Import
+
+Import the styles in your main `.js | .ts` file or in your main `.css` file.
+
+CSS:
+
+```css
+/* index.css */
+@import "@db-ux/core-foundations/build/styles/relative.css";
+
+/* Optional: Use [data-divider] & [data-focus] everywhere */
+@import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
+/* Optional: Use [data-density] everywhere */
+@import "@db-ux/core-foundations/build/styles/density/classes/all.css";
+/* Optional: Use [data-font-size] everywhere */
+@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
+/* Optional: Use [data-color] everywhere */
+@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";
+```
+
+JS/TS:
+
+```ts
+// main.[js|ts]
+/* index.css */
+import "@db-ux/core-foundations/build/styles/relative.css";
+
+/* Optional: Use [data-divider] & [data-focus] everywhere */
+import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
+/* Optional: Use [data-density] everywhere */
+import "@db-ux/core-foundations/build/styles/density/classes/all.css";
+/* Optional: Use [data-font-size] everywhere */
+import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
+/* Optional: Use [data-color] everywhere */
+import "@db-ux/core-foundations/build/styles/colors/classes/all.css";
+```
+
+#### Use
+
+In CSS:
+
+```css
+.my-container {
+	padding: var(--db-spacing-fixed-md);
+}
+```
+
+In HTML:
+
+```html
+<!-- With classes-->
+<div
+	data-density="functional"
+	class="db-successful-bg-lvl-1 my-container"
+></div>
+
+<!-- With data attributes-->
+<div
+	class="my-container"
+	data-density="functional"
+	data-color="successful-bg-lvl-1"
+></div>
+```
+
+> **Note:** In CSS you might to use the classes or data-attributes even more because you cannot use placeholders or mixins like we have it in **scss**. If you use a 3rd party library and cannot apply classes or data-attributes you might want to copy the content of our helper classes to apply it to the 3rd party class.
+
+### SCSS
+
+Default assets path for `relative.scss` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].scss`.
+
+#### Import
+
+Import the styles in your main `.js | .ts` file or in your main `.scss` file.
+
+SCSS:
+
+```scss
+/* index.css */
+@forward "@db-ux/core-foundations/build/styles/relative";
+
+/* Optional: Use [data-divider] & [data-focus] everywhere */
+@forward "@db-ux/core-foundations/build/styles/helpers/classes/all";
+/* Optional: Use [data-density] everywhere */
+@forward "@db-ux/core-foundations/build/styles/density/classes/all";
+/* Optional: Use [data-font-size] everywhere */
+@forward "@db-ux/core-foundations/build/styles/fonts/classes/all";
+/* Optional: Use [data-color] everywhere */
+@forward "@db-ux/core-foundations/build/styles/colors/classes/all";
+```
+
+> **Note:** Besides of forwarding the classes you can use placeholders to include only some specific styles.
+
+JS/TS:
+
+```ts
+// main.[js|ts]
+import "@db-ux/core-foundations/build/styles/relative.scss";
+
+/* Optional: Use [data-divider] & [data-focus] everywhere */
+import "@db-ux/core-foundations/build/styles/helpers/classes/all.scss";
+/* Optional: Use [data-density] everywhere */
+import "@db-ux/core-foundations/build/styles/density/classes/all.scss";
+/* Optional: Use [data-font-size] everywhere */
+import "@db-ux/core-foundations/build/styles/fonts/classes/all.scss";
+/* Optional: Use [data-color] everywhere */
+import "@db-ux/core-foundations/build/styles/colors/classes/all.scss";
+```
+
+#### Use
+
+In SCSS:
+
+```scss
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.my-container {
+	padding: variables.$db-spacing-fixed-md;
+}
+```
+
+In SCSS with placeholder:
+
+```scss
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/colors";
+
+.placeholder-container {
+	@extend %db-overwrite-font-size-sm;
+	@extend %db-successful-bg-lvl-1;
+}
+```
+
+In HTML:
+
+```html
+<!-- With classes-->
+<div
+	data-density="functional"
+	class="db-successful-bg-lvl-1 my-container"
+></div>
+
+<!-- With data attributes-->
+<div
+	class="my-container"
+	data-density="functional"
+	data-color="successful-bg-lvl-1"
+></div>
+```
+
+### Tailwind
+
+Check the required imports for [CSS](https://db-ux-design-system.github.io/core-web/review/main/foundations/readme?current=css) to enable all tokens and defaults.
+
+#### Tailwind v4
+
+```css
+@import "tailwindcss";
+@import "@db-ux/core-foundations/build/tailwind/theme/index.css";
+```
+
+#### Tailwind v3
+
+> **Note:** In Tailwind v4 you can use the config with `@config "tailwind.config.[js|ts]";` inside your `.css` file as well.
+
+After this you can extend your tailwind config like this:
+
+##### Javascript
+
+```javascript
+//tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+import tokens from "@db-ux/core-foundations/build/tailwind/tailwind-tokens.json";
+
+export default {
+	content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+	plugins: [],
+	theme: {
+		...tokens,
+		gap: ({ theme }) => ({
+			...theme("spacing")
+		}),
+		space: ({ theme }) => ({
+			...theme("spacing")
+		})
+	}
+};
+```
+
+##### Typescript
+
+```typescript
+//tailwind.config.ts
+import type { Config } from "tailwindcss";
+import { CustomThemeConfig } from "tailwindcss/types/config";
+import tokens from "@db-ux/core-foundations/build/tailwind/tailwind-tokens.json";
+const customThemeConfig: CustomThemeConfig = tokens as any;
+
+export default {
+	content: [],
+	theme: {
+		...customThemeConfig,
+		gap: ({ theme }) => ({
+			...theme("spacing")
+		}),
+		space: ({ theme }) => ({
+			...theme("spacing")
+		})
+	},
+	plugins: []
+} satisfies Config;
+```
+
+In your `tailwind.css` add this to enable default headlines:
+
+```css
+@layer base {
+	h1 {
+		@apply text-head-xl font-head;
+	}
+	h2 {
+		@apply text-head-lg font-head;
+	}
+	h3 {
+		@apply text-head-md font-head;
+	}
+	h4 {
+		@apply text-head-sm font-head;
+	}
+	h5 {
+		@apply text-head-xs font-head;
+	}
+	h6 {
+		@apply text-head-2xs font-head;
+	}
+}
+```
+
+#### Use
+
+```html
+<div class="grid gap-fix-sm p-res-md"></div>
+```
+
+## Optimize dependencies
+
+If you want to optimize the size of the loaded styles, you might want to skip loading `@db-ux/core-foundations/build/styles/[relative|absolute|rollup|webpack].css`. But there are some required styles for this Design System to work properly.
+
+### Theme, Assets & Init
+
+```css
+/* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */
+@import "@db-ux/core-foundations/build/styles/default-theme.css";
+/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */
+@import "@db-ux/core-foundations/build/styles/fonts/relative.css";
+/* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */
+@import "@db-ux/core-foundations/build/styles/icons/relative.css";
+/* The index file will add some additional styles to normalize html defaults and add some default settings like default density, etc. */
+@import "@db-ux/core-foundations/build/styles/index.css";
+```
+
+#### Optimize index
+
+You are able to optimize the initial settings as well:
+
+```css
+/* The required styles will normalize css and add focus and default font to body */
+@import "@db-ux/core-foundations/build/styles/defaults/default-required.css";
+/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
+@import "@db-ux/core-foundations/build/styles/defaults/default-root.css";
+/* Adds font-sizes & line-heights to headlines and paragraph tags. You probably need this, but you might strip some styles if you don't need the range of h1-h6. */
+@import "@db-ux/core-foundations/build/styles/defaults/default-fonts.css";
+/* Adds "[data-icon]" and other icon related styles. If you don't need icons in your application you could skip this. */
+@import "@db-ux/core-foundations/build/styles/defaults/default-icons.css";
+/* Adds "[data-elevation]" and other icon related styles. If you don't need elevation in your application you could skip this. */
+@import "@db-ux/core-foundations/build/styles/defaults/default-elevation.css";
+/* Adds defaults for `blockquote`, `code` and `pre`. If you don't need them in your application you could skip this. */
+@import "@db-ux/core-foundations/build/styles/defaults/default-code.css";
+```
+
+## Migration
+
+We provide a [CLI tool](https://github.com/db-ux-design-system/core-web/blob/main/packages/migration/README.md) to auto migrate your source code.
+
+## Deutsche Bahn brand
+
+As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
+Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
+
+You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+
+## Contributions
+
+Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).
+
+## Code of conduct
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
+
+## License
+
+This project is licensed under [Apache-2.0](LICENSE).

package/assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/README.md

@@ -0,0 +1,23 @@
+# Generate fonts
+
+To generate optimal fonts we use [fonttools](https://github.com/fonttools/fonttools). To use the tools you need python installed:
+
+1. Install [python](https://docs.python-guide.org/starting/installation/#installation) and [ensure that you can run Python from the command line](https://packaging.python.org/en/latest/tutorials/installing-packages/#ensure-you-can-run-python-from-the-command-line)
+2. Install fonttools: `pip3 install fonttools`
+3. Install brotli: `pip3 install brotli`
+
+Afterward, you can generate a font by running the following command:
+
+```shell
+pyftsubset OpenSans-Regular.ttf --layout-features=* --flavor=woff2 --unicodes-file=unicode-eu.txt --output-file=OpenSans-Regular-EU.woff2
+```
+
+## Local development
+
+You can use `packages/foundations/assets/fonts/generate-eu-fonts.ts` to generate all fonts inside this directory. To do so, run the following command:
+
+```shell
+tsx packages/foundations/assets/fonts/generate-eu-fonts.ts
+```
+
+To check if everything works fine you can check all glyphs with an [opentype.js.org glyph inspector tool](https://opentype.js.org/glyph-inspector.html).

package/assets/fonts/generate-eu-fonts.ts

@@ -0,0 +1,46 @@
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+import { glob } from 'glob';
+
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename).replaceAll('\\', '/');
+
+const execAsync = promisify(exec);
+
+const generateFonts = async () => {
+	console.log('Generating EU fonts...');
+	try {
+		await execAsync('pyftsubset --help');
+	} catch (e) {
+		console.warn(
+			'You need to install pyftsubset. Check packages/foundations/assets/fonts/README.md for more information.'
+		);
+	}
+
+	try {
+		const files = await glob(`${__dirname}/*.ttf`);
+		const commands = files.map((file) =>
+			[
+				'pyftsubset',
+				file,
+				'--layout-features=*',
+				'--flavor=woff2',
+				`--unicodes-file=${__dirname}/unicode-eu.txt`,
+				`--output-file=${file.replace('.ttf', '-EU.woff2')}`
+			].join(' ')
+		);
+
+		for (const command of commands) {
+			const { stdout, stderr } = await execAsync(command);
+			if (stdout) console.log(`stdout: ${stdout}`);
+			if (stderr) console.error(`stderr: ${stderr}`);
+		}
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+	}
+};
+
+void generateFonts();

package/assets/fonts/unicode-eu.txt

@@ -0,0 +1,14 @@
+# compare to https://symbl.cc/de/unicode-table/
+U+0000-024F # Latin (all)
+U+0020,U+0009,U+000A,U+000D # white space characters
+U+00E4,U+00F6,U+00FC,U+00DF # German characters
+U+00E9, U+00E8, U+00EA, U+00E0, U+00E7, U+0153 # French characters
+U+00E0, U+00E8, U+00E9, U+00F2, U+00F9, U+00EC, U+00C0, U+00C8, U+00C9, U+00D2, U+00D9, U+00CC # Italian characters
+U+FB00, U+FB01, U+FB02, U+FB03, U+FB04, U+FB05, U+FB06 # ligatures
+U+00E1, U+00E9, U+00ED, U+00F3, U+00FA, U+00F1, U+00BF, U+00A1 # Spanish characters
+U+00E5, U+00F8, U+00E6, U+00C5, U+00D8, U+00C6 # Scandinavian characters
+U+0104, U+0105, U+0106, U+0107, U+0118, U+0119, U+0141, U+0142, U+0143, U+0144, U+015A, U+015B, U+0179, U+017A, U+017B, U+017C # Polish characters
+U+010C, U+010D, U+010E, U+010F, U+011A, U+011B, U+0147, U+0148, U+0158, U+0159, U+0160, U+0161, U+0164, U+0165, U+016E, U+016F, U+017D, U+017E # Czech characters
+U+00E9, U+00E8, U+00EB, U+00E4, U+00FC, U+00F6, U+00EF, U+00C9, U+00C8, U+00CB, U+00C4, U+00DC, U+00D6, U+00CF # Netherlands characters
+U+0391-03A9, U+03B1-03C9 # Greek characters
+U+0410-042F, U+0430-044F # Cyrillic characters