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

package/build/styles/webpack.scss

@@ -0,0 +1,3 @@
+@use "webpack.assets-paths";
+
+@forward "./index";

package/build/tailwind/tailwind-tokens.json

@@ -0,0 +1,252 @@
+{
+	"colors": {
+		"adaptive": {
+			"bg": {
+				"basic": {
+					"level-1": {
+						"default": "var(--db-adaptive-bg-basic-level-1-default)",
+						"hovered": "var(--db-adaptive-bg-basic-level-1-hovered)",
+						"pressed": "var(--db-adaptive-bg-basic-level-1-pressed)"
+					},
+					"level-2": {
+						"default": "var(--db-adaptive-bg-basic-level-2-default)",
+						"hovered": "var(--db-adaptive-bg-basic-level-2-hovered)",
+						"pressed": "var(--db-adaptive-bg-basic-level-2-pressed)"
+					},
+					"level-3": {
+						"default": "var(--db-adaptive-bg-basic-level-3-default)",
+						"hovered": "var(--db-adaptive-bg-basic-level-3-hovered)",
+						"pressed": "var(--db-adaptive-bg-basic-level-3-pressed)"
+					},
+					"transparent": {
+						"full-default": "var(--db-adaptive-bg-basic-transparent-full-default)",
+						"semi-default": "var(--db-adaptive-bg-basic-transparent-semi-default)",
+						"hovered": "var(--db-adaptive-bg-basic-transparent-hovered)",
+						"pressed": "var(--db-adaptive-bg-basic-transparent-pressed)"
+					}
+				},
+				"inverted": {
+					"contrast": {
+						"max": {
+							"default": "var(--db-adaptive-bg-inverted-contrast-max-default)",
+							"hovered": "var(--db-adaptive-bg-inverted-contrast-max-hovered)",
+							"pressed": "var(--db-adaptive-bg-inverted-contrast-max-pressed)"
+						},
+						"high": {
+							"default": "var(--db-adaptive-bg-inverted-contrast-high-default)",
+							"hovered": "var(--db-adaptive-bg-inverted-contrast-high-hovered)",
+							"pressed": "var(--db-adaptive-bg-inverted-contrast-high-pressed)"
+						},
+						"low": {
+							"default": "var(--db-adaptive-bg-inverted-contrast-low-default)",
+							"hovered": "var(--db-adaptive-bg-inverted-contrast-low-hovered)",
+							"pressed": "var(--db-adaptive-bg-inverted-contrast-low-pressed)"
+						}
+					}
+				}
+			},
+			"on": {
+				"basic": {
+					"emphasis-100": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-100-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-100-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-100-pressed)"
+					},
+					"emphasis-90": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-90-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-90-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-90-pressed)"
+					},
+					"emphasis-80": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-80-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-80-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-80-pressed)"
+					},
+					"emphasis-70": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-70-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-70-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-70-pressed)"
+					},
+					"emphasis-60": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-60-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-60-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-60-pressed)"
+					},
+					"emphasis-50": {
+						"default": "var(--db-adaptive-on-bg-basic-emphasis-50-default)",
+						"hovered": "var(--db-adaptive-on-bg-basic-emphasis-50-hovered)",
+						"pressed": "var(--db-adaptive-on-bg-basic-emphasis-50-pressed)"
+					}
+				},
+				"inverted": {
+					"default": "var(--db-adaptive-on-bg-inverted-default)",
+					"hovered": "var(--db-adaptive-on-bg-inverted-hovered)",
+					"pressed": "var(--db-adaptive-on-bg-inverted-pressed)"
+				},
+				"origin": {
+					"default": "var(--db-adaptive-on-origin-default)",
+					"hovered": "var(--db-adaptive-on-origin-hovered)",
+					"pressed": "var(--db-adaptive-on-origin-pressed)"
+				}
+			},
+			"origin": {
+				"default": "var(--db-adaptive-origin-default)",
+				"hovered": "var(--db-adaptive-origin-hovered)",
+				"pressed": "var(--db-adaptive-origin-pressed)"
+			}
+		}
+	},
+	"fontFamily": {
+		"sans": "var(--db-font-family-sans)",
+		"head": "var(--db-font-family-head)"
+	},
+	"fontSize": {
+		"base": [
+			"var(--db-type-body-font-size-md)",
+			"var(--db-type-body-line-height-md)"
+		],
+		"body-3xs": [
+			"var(--db-type-body-font-size-3xs)",
+			"var(--db-type-body-line-height-3xs)"
+		],
+		"body-2xs": [
+			"var(--db-type-body-font-size-2xs)",
+			"var(--db-type-body-line-height-2xs)"
+		],
+		"body-2xl": [
+			"var(--db-type-body-font-size-2xl)",
+			"var(--db-type-body-line-height-2xl)"
+		],
+		"body-3xl": [
+			"var(--db-type-body-font-size-3xl)",
+			"var(--db-type-body-line-height-3xl)"
+		],
+		"body-xs": [
+			"var(--db-type-body-font-size-xs)",
+			"var(--db-type-body-line-height-xs)"
+		],
+		"body-sm": [
+			"var(--db-type-body-font-size-sm)",
+			"var(--db-type-body-line-height-sm)"
+		],
+		"body-md": [
+			"var(--db-type-body-font-size-md)",
+			"var(--db-type-body-line-height-md)"
+		],
+		"body-lg": [
+			"var(--db-type-body-font-size-lg)",
+			"var(--db-type-body-line-height-lg)"
+		],
+		"body-xl": [
+			"var(--db-type-body-font-size-xl)",
+			"var(--db-type-body-line-height-xl)"
+		],
+		"head-3xs": [
+			"var(--db-type-headline-font-size-3xs)",
+			"var(--db-type-headline-line-height-3xs)"
+		],
+		"head-2xs": [
+			"var(--db-type-headline-font-size-2xs)",
+			"var(--db-type-headline-line-height-2xs)"
+		],
+		"head-2xl": [
+			"var(--db-type-headline-font-size-2xl)",
+			"var(--db-type-headline-line-height-2xl)"
+		],
+		"head-3xl": [
+			"var(--db-type-headline-font-size-3xl)",
+			"var(--db-type-headline-line-height-3xl)"
+		],
+		"head-xs": [
+			"var(--db-type-headline-font-size-xs)",
+			"var(--db-type-headline-line-height-xs)"
+		],
+		"head-sm": [
+			"var(--db-type-headline-font-size-sm)",
+			"var(--db-type-headline-line-height-sm)"
+		],
+		"head-md": [
+			"var(--db-type-headline-font-size-md)",
+			"var(--db-type-headline-line-height-md)"
+		],
+		"head-lg": [
+			"var(--db-type-headline-font-size-lg)",
+			"var(--db-type-headline-line-height-lg)"
+		],
+		"head-xl": [
+			"var(--db-type-headline-font-size-xl)",
+			"var(--db-type-headline-line-height-xl)"
+		]
+	},
+	"borderRadius": {
+		"DEFAULT": "var(--db-border-radius-xs)",
+		"none": "0px",
+		"3xs": "var(--db-border-radius-3xs)",
+		"2xs": "var(--db-border-radius-2xs)",
+		"xs": "var(--db-border-radius-xs)",
+		"sm": "var(--db-border-radius-sm)",
+		"md": "var(--db-border-radius-md)",
+		"lg": "var(--db-border-radius-lg)",
+		"xl": "var(--db-border-radius-xl)",
+		"2xl": "var(--db-border-radius-2xl)",
+		"3xl": "var(--db-border-radius-3xl)",
+		"full": "var(--db-border-radius-full)"
+	},
+	"borderWidth": {
+		"DEFAULT": "var(--db-border-height-3xs)",
+		"none": "0px",
+		"3xs": "var(--db-border-height-3xs)",
+		"2xs": "var(--db-border-height-2xs)",
+		"xs": "var(--db-border-height-xs)",
+		"sm": "var(--db-border-height-sm)",
+		"md": "var(--db-border-height-md)",
+		"lg": "var(--db-border-height-lg)",
+		"xl": "var(--db-border-height-xl)",
+		"2xl": "var(--db-border-height-2xl)",
+		"3xl": "var(--db-border-height-3xl)"
+	},
+	"screens": {
+		"xs": "360px",
+		"sm": "720px",
+		"md": "1024px",
+		"lg": "1440px",
+		"xl": "1920px"
+	},
+	"elevation": {
+		"DEFAULT": "var(--db-elevation-md)",
+		"sm": "var(--db-elevation-sm)",
+		"md": "var(--db-elevation-md)",
+		"lg": "var(--db-elevation-lg)"
+	},
+	"spacing": {
+		"none": "0px",
+		"0": "0px",
+		"fix-3xs": "var(--db-spacing-fixed-3xs)",
+		"fix-2xs": "var(--db-spacing-fixed-2xs)",
+		"fix-xs": "var(--db-spacing-fixed-xs)",
+		"fix-sm": "var(--db-spacing-fixed-sm)",
+		"fix-md": "var(--db-spacing-fixed-md)",
+		"fix-lg": "var(--db-spacing-fixed-lg)",
+		"fix-xl": "var(--db-spacing-fixed-xl)",
+		"fix-2xl": "var(--db-spacing-fixed-2xl)",
+		"fix-3xl": "var(--db-spacing-fixed-3xl)",
+		"res-3xs": "var(--db-spacing-responsive-3xs)",
+		"res-2xs": "var(--db-spacing-responsive-2xs)",
+		"res-xs": "var(--db-spacing-responsive-xs)",
+		"res-sm": "var(--db-spacing-responsive-sm)",
+		"res-md": "var(--db-spacing-responsive-md)",
+		"res-lg": "var(--db-spacing-responsive-lg)",
+		"res-xl": "var(--db-spacing-responsive-xl)",
+		"res-2xl": "var(--db-spacing-responsive-2xl)",
+		"res-3xl": "var(--db-spacing-responsive-3xl)",
+		"siz-3xs": "var(--db-sizing-3xs)",
+		"siz-2xs": "var(--db-sizing-2xs)",
+		"siz-xs": "var(--db-sizing-xs)",
+		"siz-sm": "var(--db-sizing-sm)",
+		"siz-md": "var(--db-sizing-md)",
+		"siz-lg": "var(--db-sizing-lg)",
+		"siz-xl": "var(--db-sizing-xl)",
+		"siz-2xl": "var(--db-sizing-2xl)",
+		"siz-3xl": "var(--db-sizing-3xl)"
+	}
+}

package/build/tailwind/tailwind.config.cjs

@@ -0,0 +1,15 @@
+const tokens = require('./tailwind-tokens.json');
+
+module.exports = {
+	content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+	plugins: [],
+	theme: {
+		...tokens,
+		gap: ({ theme }) => ({
+			...theme('spacing')
+		}),
+		space: ({ theme }) => ({
+			...theme('spacing')
+		})
+	}
+};

package/build/tailwind/tailwind.config.mjs

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-anonymous-default-export */
+import tokens from './tailwind-tokens.json';
+
+export default {
+	content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+	plugins: [],
+	theme: {
+		...tokens,
+		gap: ({ theme }) => ({
+			...theme('spacing')
+		}),
+		space: ({ theme }) => ({
+			...theme('spacing')
+		})
+	}
+};

package/build/tailwind/theme/colors.css

@@ -0,0 +1,154 @@
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	/* stylelint-disable-next-line custom-property-pattern */
+	--color-*: initial; /* 	Color utilities like */
+
+	/* Basic-Level */
+	--color-adaptive-bg-basic-level-1-default: var(
+		--db-adaptive-bg-basic-level-1-default
+	);
+	--color-adaptive-bg-basic-level-1-hovered: var(
+		--db-adaptive-bg-basic-level-1-hovered
+	);
+	--color-adaptive-bg-basic-level-1-pressed: var(
+		--db-adaptive-bg-basic-level-1-pressed
+	);
+	--color-adaptive-bg-basic-level-2-default: var(
+		--db-adaptive-bg-basic-level-2-default
+	);
+	--color-adaptive-bg-basic-level-2-hovered: var(
+		--db-adaptive-bg-basic-level-2-hovered
+	);
+	--color-adaptive-bg-basic-level-2-pressed: var(
+		--db-adaptive-bg-basic-level-2-pressed
+	);
+	--color-adaptive-bg-basic-level-3-default: var(
+		--db-adaptive-bg-basic-level-3-default
+	);
+	--color-adaptive-bg-basic-level-3-hovered: var(
+		--db-adaptive-bg-basic-level-3-hovered
+	);
+	--color-adaptive-bg-basic-level-3-pressed: var(
+		--db-adaptive-bg-basic-level-3-pressed
+	);
+
+	/* Transparent */
+	--color-adaptive-bg-basic-transparent-full-default: var(
+		--db-adaptive-bg-basic-transparent-full-default
+	);
+	--color-adaptive-bg-basic-transparent-semi-default: var(
+		--db-adaptive-bg-basic-transparent-semi-default
+	);
+	--color-adaptive-bg-basic-transparent-hovered: var(
+		--db-adaptive-bg-basic-transparent-hovered
+	);
+	--color-adaptive-bg-basic-transparent-pressed: var(
+		--db-adaptive-bg-basic-transparent-pressed
+	);
+
+	/* Inverted */
+	--color-adaptive-bg-inverted-contrast-max-default: var(
+		--db-adaptive-bg-inverted-contrast-max-default
+	);
+	--color-adaptive-bg-inverted-contrast-max-hovered: var(
+		--db-adaptive-bg-inverted-contrast-max-hovered
+	);
+	--color-adaptive-bg-inverted-contrast-max-pressed: var(
+		--db-adaptive-bg-inverted-contrast-max-pressed
+	);
+	--color-adaptive-bg-inverted-contrast-high-default: var(
+		--db-adaptive-bg-inverted-contrast-high-default
+	);
+	--color-adaptive-bg-inverted-contrast-high-hovered: var(
+		--db-adaptive-bg-inverted-contrast-high-hovered
+	);
+	--color-adaptive-bg-inverted-contrast-high-pressed: var(
+		--db-adaptive-bg-inverted-contrast-high-pressed
+	);
+	--color-adaptive-bg-inverted-contrast-low-default: var(
+		--db-adaptive-bg-inverted-contrast-low-default
+	);
+	--color-adaptive-bg-inverted-contrast-low-hovered: var(
+		--db-adaptive-bg-inverted-contrast-low-hovered
+	);
+	--color-adaptive-bg-inverted-contrast-low-pressed: var(
+		--db-adaptive-bg-inverted-contrast-low-pressed
+	);
+
+	/* On Colors */
+
+	--color-adaptive-on-bg-basic-emphasis-100-default: var(
+		--db-adaptive-on-bg-basic-emphasis-100-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-100-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-100-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-100-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-100-pressed
+	);
+	--color-adaptive-on-bg-basic-emphasis-90-default: var(
+		--db-adaptive-on-bg-basic-emphasis-90-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-90-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-90-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-90-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-90-pressed
+	);
+	--color-adaptive-on-bg-basic-emphasis-80-default: var(
+		--db-adaptive-on-bg-basic-emphasis-80-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-80-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-80-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-80-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-80-pressed
+	);
+	--color-adaptive-on-bg-basic-emphasis-70-default: var(
+		--db-adaptive-on-bg-basic-emphasis-70-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-70-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-70-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-70-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-70-pressed
+	);
+	--color-adaptive-on-bg-basic-emphasis-60-default: var(
+		--db-adaptive-on-bg-basic-emphasis-60-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-60-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-60-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-60-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-60-pressed
+	);
+	--color-adaptive-on-bg-basic-emphasis-50-default: var(
+		--db-adaptive-on-bg-basic-emphasis-50-default
+	);
+	--color-adaptive-on-bg-basic-emphasis-50-hovered: var(
+		--db-adaptive-on-bg-basic-emphasis-50-hovered
+	);
+	--color-adaptive-on-bg-basic-emphasis-50-pressed: var(
+		--db-adaptive-on-bg-basic-emphasis-50-pressed
+	);
+
+	/* On Inverted */
+	--color-adaptive-on-bg-inverted-default: var(
+		--db-adaptive-on-bg-inverted-default
+	);
+	--color-adaptive-on-bg-inverted-hovered: var(
+		--db-adaptive-on-bg-inverted-hovered
+	);
+	--color-adaptive-on-bg-inverted-pressed: var(
+		--db-adaptive-on-bg-inverted-pressed
+	);
+
+	/* On Origin */
+	--color-adaptive-on-origin-default: var(--db-adaptive-on-origin-default);
+	--color-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered);
+	--color-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed);
+	--color-adaptive-origin-default: var(--db-adaptive-origin-default);
+	--color-adaptive-origin-hovered: var(--db-adaptive-origin-hovered);
+	--color-adaptive-origin-pressed: var(--db-adaptive-origin-pressed);
+}

package/build/tailwind/theme/index.css

@@ -0,0 +1,176 @@
+/* stylelint-disable custom-property-pattern, custom-property-empty-line-before */
+
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line import-notation */
+@import "./colors.css";
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	--font-*: initial; /* Font family utilities like font-sans */
+	--font-sans: var(--db-font-family-sans);
+	--font-head: var(--db-font-family-head);
+
+	--text-*: initial; /* Font size utilities like text-body-xl */
+	--text-base: var(--db-type-body-font-size-md);
+	--text-base--line-height: var(--db-type-body-line-height-md);
+	--text-body-3xs: var(--db-type-body-font-size-3xs);
+	--text-body-3xs--line-height: var(--db-type-body-line-height-3xs);
+	--text-body-2xs: var(--db-type-body-font-size-2xs);
+	--text-body-2xs--line-height: var(--db-type-body-line-height-2xs);
+	--text-body-xs: var(--db-type-body-font-size-xs);
+	--text-body-xs--line-height: var(--db-type-body-line-height-xs);
+	--text-body-sm: var(--db-type-body-font-size-sm);
+	--text-body-sm--line-height: var(--db-type-body-line-height-sm);
+	--text-body-md: var(--db-type-body-font-size-md);
+	--text-body-md--line-height: var(--db-type-body-line-height-md);
+	--text-body-lg: var(--db-type-body-font-size-lg);
+	--text-body-lg--line-height: var(--db-type-body-line-height-lg);
+	--text-body-xl: var(--db-type-body-font-size-xl);
+	--text-body-xl--line-height: var(--db-type-body-line-height-xl);
+	--text-body-2xl: var(--db-type-body-font-size-2xl);
+	--text-body-2xl--line-height: var(--db-type-body-line-height-2xl);
+	--text-body-3xl: var(--db-type-body-font-size-3xl);
+	--text-body-3xl--line-height: var(--db-type-body-line-height-3xl);
+	--text-head-3xs: var(--db-type-headline-font-size-3xs);
+	--text-head-3xs--line-height: var(--db-type-headline-line-height-3xs);
+	--text-head-2xs: var(--db-type-headline-font-size-2xs);
+	--text-head-2xs--line-height: var(--db-type-headline-line-height-2xs);
+	--text-head-xs: var(--db-type-headline-font-size-xs);
+	--text-head-xs--line-height: var(--db-type-headline-line-height-xs);
+	--text-head-sm: var(--db-type-headline-font-size-sm);
+	--text-head-sm--line-height: var(--db-type-headline-line-height-sm);
+	--text-head-md: var(--db-type-headline-font-size-md);
+	--text-head-md--line-height: var(--db-type-headline-line-height-md);
+	--text-head-lg: var(--db-type-headline-font-size-lg);
+	--text-head-lg--line-height: var(--db-type-headline-line-height-lg);
+	--text-head-xl: var(--db-type-headline-font-size-xl);
+	--text-head-xl--line-height: var(--db-type-headline-line-height-xl);
+	--text-head-2xl: var(--db-type-headline-font-size-2xl);
+	--text-head-2xl--line-height: var(--db-type-headline-line-height-2xl);
+	--text-head-3xl: var(--db-type-headline-font-size-3xl);
+	--text-head-3xl--line-height: var(--db-type-headline-line-height-3xl);
+
+	--breakpoint-*: initial; /* Responsive breakpoint variants like sm:* */
+	--breakpoint-xs: 360px;
+	--breakpoint-sm: 720px;
+	--breakpoint-md: 1024px;
+	--breakpoint-lg: 1440px;
+	--breakpoint-xl: 1920px;
+
+	--spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */
+	--spacing-none: 0;
+	--spacing-0: 0;
+	--spacing-fix-3xs: var(--db-spacing-fixed-3xs);
+	--spacing-fix-2xs: var(--db-spacing-fixed-2xs);
+	--spacing-fix-xs: var(--db-spacing-fixed-xs);
+	--spacing-fix-sm: var(--db-spacing-fixed-sm);
+	--spacing-fix-md: var(--db-spacing-fixed-md);
+	--spacing-fix-lg: var(--db-spacing-fixed-lg);
+	--spacing-fix-xl: var(--db-spacing-fixed-xl);
+	--spacing-fix-2xl: var(--db-spacing-fixed-2xl);
+	--spacing-fix-3xl: var(--db-spacing-fixed-3xl);
+	--spacing-res-3xs: var(--db-spacing-responsive-3xs);
+	--spacing-res-2xs: var(--db-spacing-responsive-2xs);
+	--spacing-res-xs: var(--db-spacing-responsive-xs);
+	--spacing-res-sm: var(--db-spacing-responsive-sm);
+	--spacing-res-md: var(--db-spacing-responsive-md);
+	--spacing-res-lg: var(--db-spacing-responsive-lg);
+	--spacing-res-xl: var(--db-spacing-responsive-xl);
+	--spacing-res-2xl: var(--db-spacing-responsive-2xl);
+	--spacing-res-3xl: var(--db-spacing-responsive-3xl);
+	--spacing-siz-3xs: var(--db-sizing-3xs);
+	--spacing-siz-2xs: var(--db-sizing-2xs);
+	--spacing-siz-xs: var(--db-sizing-xs);
+	--spacing-siz-sm: var(--db-sizing-sm);
+	--spacing-siz-md: var(--db-sizing-md);
+	--spacing-siz-lg: var(--db-sizing-lg);
+	--spacing-siz-xl: var(--db-sizing-xl);
+	--spacing-siz-2xl: var(--db-sizing-2xl);
+	--spacing-siz-3xl: var(--db-sizing-3xl);
+
+	--gap-*: initial; /* Gap */
+	--gap-none: 0;
+	--gap-0: 0;
+	--gap-3xs: var(--db-gap-fixed-3xs);
+	--gap-2xs: var(--db-gap-fixed-2xs);
+	--gap-xs: var(--db-gap-fixed-xs);
+	--gap-sm: var(--db-gap-fixed-sm);
+	--gap-md: var(--db-gap-fixed-md);
+	--gap-lg: var(--db-gap-fixed-lg);
+	--gap-xl: var(--db-gap-fixed-xl);
+	--gap-2xl: var(--db-gap-fixed-2xl);
+	--gap-3xl: var(--db-gap-fixed-3xl);
+
+	--border-*: initial; /* Border width */
+	--border: var(--db-border-height-3xs);
+	--border-none: 0;
+	--border-0: 0;
+	--border-3xs: var(--db-border-height-3xs);
+	--border-2xs: var(--db-border-height-2xs);
+	--border-xs: var(--db-border-height-xs);
+	--border-sm: var(--db-border-height-sm);
+	--border-md: var(--db-border-height-md);
+	--border-lg: var(--db-border-height-lg);
+	--border-xl: var(--db-border-height-xl);
+	--border-2xl: var(--db-border-height-2xl);
+	--border-3xl: var(--db-border-height-3xl);
+
+	--radius-*: initial; /* Border radius utilities like rounded-sm */
+	--radius: var(--db-border-radius-xs);
+	--radius-none: 0;
+	--radius-0: 0;
+	--radius-3xs: var(--db-border-radius-3xs);
+	--radius-2xs: var(--db-border-radius-2xs);
+	--radius-xs: var(--db-border-radius-xs);
+	--radius-sm: var(--db-border-radius-sm);
+	--radius-md: var(--db-border-radius-md);
+	--radius-lg: var(--db-border-radius-lg);
+	--radius-xl: var(--db-border-radius-xl);
+	--radius-2xl: var(--db-border-radius-2xl);
+	--radius-3xl: var(--db-border-radius-3xl);
+	--radius-full: var(--db-border-radius-full);
+
+	--shadow-*: initial; /* Box shadow utilities like shadow-md */
+	--shadow: var(--db-elevation-md);
+	--shadow-sm: var(--db-elevation-sm);
+	--shadow-md: var(--db-elevation-md);
+	--shadow-lg: var(--db-elevation-lg);
+}
+
+@layer components {
+	.typography {
+		p {
+			font-size: var(--text-body-md);
+		}
+
+		h1 {
+			font-size: var(--text-xl);
+			line-height: var(--text-xl--line-height);
+		}
+
+		h2 {
+			font-size: var(--text-lg);
+			line-height: var(--text-lg--line-height);
+		}
+
+		h3 {
+			font-size: var(--text-md);
+			line-height: var(--text-md--line-height);
+		}
+
+		h4 {
+			font-size: var(--text-sm);
+			line-height: var(--text-sm--line-height);
+		}
+
+		h5 {
+			font-size: var(--text-xs);
+			line-height: var(--text-xs--line-height);
+		}
+
+		h6 {
+			font-size: var(--text-2xs);
+			line-height: var(--text-2xs--line-height);
+		}
+	}
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@db-ux/core-foundations",
+  "version": "1.0.0-test-13b991d",
+  "type": "module",
+  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/db-ux-design-system/core-web.git"
+  },
+  "license": "DB Design License",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "assets",
+    "build"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "build:01_normalize": "npm-run-all copy-prepare:*",
+    "build:02_copy": "npm run copy:scss",
+    "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles",
+    "build:04_tailwind": "cpr tailwind build/tailwind -o",
+    "build:05_postcss": "postcss build/styles/**/*.css --replace",
+    "build:06_ide": "cpr ide build/ide -o",
+    "build:06_ts": "tsc",
+    "clean": "rm -rf build",
+    "copy-build": "npm-run-all copy-build:*",
+    "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets -o",
+    "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json -o",
+    "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md -o",
+    "copy-build:web": "cpr build ../../build-outputs/foundations/build -o",
+    "copy-prepare:icon-overview": "tsx scripts/local/generate-icon-overview.ts",
+    "copy-prepare:normalize": "cpr ../../node_modules/@csstools/normalize.css/normalize.css scss/_normalize.scss -o",
+    "copy:scss": "cpr scss build/styles -o",
+    "dev": "vite --open",
+    "generate:fonts": "tsx assets/fonts/generate-eu-fonts.ts",
+    "generate:icons": "tsx scripts/local/generate-icon-font.ts",
+    "prebuild": "npm-run-all copy-prepare:*",
+    "predev": "npm-run-all copy-prepare:*",
+    "prestart": "npm-run-all copy-prepare:*",
+    "regenerate:screenshots": "npx playwright test -c ./test/playwright.config.js --update-snapshots",
+    "start": "nodemon --config nodemon.json",
+    "test:e2e": "npx playwright test --config=./test/playwright.config.js"
+  },
+  "devDependencies": {
+    "@csstools/normalize.css": "12.1.1",
+    "@db-ux/icon-font-tools": "0.3.2",
+    "cpr": "3.0.1",
+    "cssnano": "^7.0.6",
+    "dotenv": "^16.4.7",
+    "glob": "11.0.1",
+    "nodemon": "3.1.9",
+    "prettier": "^3.5.0",
+    "sass": "1.77.4",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5",
+    "vite": "^6.1.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}