@db-ui/foundations

@db-ui/foundations

A library containing all tokens of DB UX System.

We currently support:

• CSS
• SCSS
• Tailwind

Install

npm i @db-ui/foundations

Usage

CSS

// main.ts / main.js
import "@db-ui/foundations/build/db-ui-foundations.css";
// optional: to use classes like e.g. db-ui-bg-success
import "@db-ui/foundations/build/color-classes.css";

.my-container {
	padding: var(--db-spacing-fixed-md);
}

<div class="db-ui-regular db-ui-bg-success my-container"></div>

SCSS

Based on your technology/setup you need to change the paths of the assets folder:

• Default: points to ../assets
• Webpack: points to ~@db-ui/foundations/assets
• Rollup: points to @db-ui/foundations/assets

// index.scss
@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
@use "@db-ui/foundations/build/scss/icon/icons" as *;
@use "@db-ui/foundations/build/db-ui-foundations" as *;
// optional: to use db-ui-bg-success
@import "@db-ui/foundations/build/color-classes" as *;
// optional: to use use $db-spacing-fixed-md
@use "@db-ui/foundations/build/scss/variables.global" as *;

.my-container {
	padding: $db-spacing-fixed-md;
}

<div class="db-ui-regular db-ui-bg-success my-container"></div>

Tailwind

//tailwind.config.cjs

const tokens = require("@db-ui/foundations/build/tailwind/tailwind-tokens.json");

module.exports = {
	content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
	plugins: [],
	theme: {
		screens: tokens.screens,
		spacing: tokens.spacing,
		boxShadow: tokens.elevation,
		gap: ({ theme }) => ({
			...theme("spacing")
		}),
		space: ({ theme }) => ({
			...theme("spacing")
		})
	}
};

<div class="p-fix-md"></div>