@db-ux/core-foundations

中文文档

6.3.2发布于 2026/11/11Apache-2.0TypeScriptES Module零依赖构建来源已验证近 30 天下载 9200

基于 DB UX 设计系统 – Generation 3 提供基本符和资产

文档目录17 节

何时使用此软件包
安装
使用量
支助科
常设委员会
尾风
优化依赖性
主题、资产和输入
字体预装
如何预装字体
用于识别要预装字体的提示
重要说明
移徙
德国Bahn品牌
捐款
行为守则
许可证

@db-ux/核心创始人

包含所有符号(颜色、间距、字体格式等)和资产(相册)的库 DB UX 设计系统 - 第3代。。。 .

何时使用此软件包

寻找UI组件? 你也许想要 @db-ux/core-components 相反,哪个 自动包含 这个包裹.

如果您 :

只需要设计符号( 颜色、间距、字体) 没有组件样式
想要使用设计系统符号构建自定义组件
只需要没有预建组件的图标和字体

使用 @db-ux/core-components 当你:

想要使用现成的UI组件(按钮,输入,导航等)
既需要设计符号,也需要组件样式(最常见的使用大小写)

目前我们支持:

支助科
常设委员会
尾风

安装

npm i @db-ux/core-foundations

使用量

如果您需要颜色、间距等, 请使用此库 .

tl; 医生 : 通过导入使用默认主题和捆绑样式 bundle.css 财务报告和审定财务报表 theme/[relative|absolute|rollup|webpack].css。。。 .

首先, 您需要导入一个包含所有符号( css- propertys) 的主题。我们提供 theme/[relative|absolute|rollup|webpack].css 它也处理暗/光模式.

之后,您可以导入帮助类 / 占位符来方便地从您的主题中消耗符号。有一些类别:

输入: 适用于所有或大组选择者的全局样式。确保导入 inits/required.css 普通标记 body 此外,我们提供一些默认样式.
图标: 要装入的图标类 宽度2 文件和添加 [data-icon] 财务报告和审定财务报表 [data-icon-trailing] 以启用所有标签和组件的图标.
帮助者: 使用分隔符或焦点边框
字体: 覆盖默认 font-size, (中文(简体) ), line-height 财务报告和审定财务报表 icon-size
密度: 覆盖默认密度以使用密度在容器内缩放适应性组件
颜色: 设置一个容器的适应性颜色,将所有所需的cs财产传给儿童

这个 bundle.css 应用这些默认 :

密度数字 : regular
适应色彩数字 : neutral-bg-lvl-1

支助科

默认资产路径 relative.css 实值 ../../../assets,与软件包结构相匹配(build/styles/ 财务报告和审定财务报表 assets/) (中文(简体) ). 这使得您可以直接从包装CSS,例如从CDN装入. 如果你把文件复制到您的 public 文件夹中,请保留此结构. 或者说 你用现代的捆绑机帮你处理捆绑在这种情况下,使用 [rollup|webpack].css。。。 .

导入

导入主样式 .css 文档.

/* index.css */
@layer whitelabel-theme, db-ux;

@import "@db-ux/core-foundations/build/styles/theme/relative.css" layer(theme);

@import "@db-ux/core-foundations/build/styles/bundle.css" layer(db-ux);

/* Optional: Use [data-divider] & [data-focus] everywhere */
@import "@db-ux/core-foundations/build/styles/helpers/classes/all.css"
    layer(db-ux);
/* Optional: Use [data-density] everywhere */
@import "@db-ux/core-foundations/build/styles/density/classes/all.css"
    layer(db-ux);
/* Optional: Use [data-font-size] everywhere */
@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css"
    layer(db-ux);
/* Optional: Use [data-color] everywhere */
@import "@db-ux/core-foundations/build/styles/colors/classes/all.css"
    layer(db-ux);

使用

在CSS中:

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

在 HTML 中:

<!-- With data attributes-->
<div
    class="my-container"
    data-density="functional"
    data-color="successful-bg-lvl-1"
></div>

说明: 在CSS中,您可能更多使用类或数据属性,因为您不能使用占位符或混音符,就像我们有它缩写。如果您使用 3 党的库, 并且无法应用类或数据属性, 您可能想要复制我们帮助类的内容, 以便应用到 3 党的类 .

常设委员会

使用

在常设委员会:

@use "@db-ux/core-foundations/build/styles/variables";

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

在具有占位符的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;
}

在 HTML 中:

<!-- With data attributes-->
<div
    class="my-container"
    data-density="functional"
    data-color="successful-bg-lvl-1"
></div>

尾风

检查所需进口支助科以启用所有符号和默认值.

尾风 v4

@import "tailwindcss";
@import "@db-ux/core-foundations/build/tailwind/theme/index.css";

尾风 v3

说明: 在 Tailwind v4 中, 您可以使用配置 @config "tailwind.config.[js|ts]"; 在你体内 .css 还有档案.

在此之后, 您可以扩展尾风配置 :

Java 脚本

//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")
        })
    }
};

类型脚本

//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;

在你身边 tailwind.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;
    }
}

使用

<div class="grid gap-fix-sm p-res-md"></div>

优化依赖性

如果您想要优化加载样式的大小, 可能要跳过加载 @db-ux/core-foundations/build/styles/[relative|absolute|rollup|webpack].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/theme/relative.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 required styles normalize css, add focus, set the default body font, and apply the mandatory headline typography (font-sizes & line-heights) to h1-h6. */
@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 the optional font-weight utilities ([data-font], heading [data-variant]) and the small/code font-size. The headline h1-h6 typography is no longer here - it moved to default-required.css. */
@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";

字体预装

确保最佳性能和可靠性——特别是在片面或离线互联网条件下—— 您可以预装或至少预选应用程序所依赖的任何字体。。。 .

如何预装字体

在识别您应用程序的 UI 所需的关键字体后, 请使用以下 <link> 标记在 <head> 预装的 HTML 中:

<link
    rel="preload"
    href="/media/dbneoscreensans-regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin="anonymous"
/>

否则,如果最初不需要字体,但稍后会请求,或者由一些动态插入的内容请求,则仍然可以预选这个优先级低于 preload数字 :

<link
    rel="prefetch"
    href="/assets/icons/fonts/default/db-ux.woff2"
    crossorigin="anonymous"
/>

用于识别要预装字体的提示

使用浏览器 Dev 工具跟踪对您的应用程序至关重要的字体请求
在不稳定连接中无法加载的字体应当优先排序 .

重要说明

确保 href 路径在运行时正确且可访问.
总是使用 crossorigin="anonymous" 对于从您域或CDN服务过的字体,除非您的服务器需要证书(仅限字体).
通过这种方式预先加载字体,提高了所感知的性能并避免了在初始渲染过程中的布局转变或隐形文字.

移徙

关于不同版本之间的移徙指导,见迁移文件。。。 .

德国Bahn品牌

由于我们想在数字化旅程中完全支持我们的用户和客户,即使使用我们提供的这个产品代码,Deutsche Bahn品牌和商标的使用也有明确的指导方针和限制; Deutsche Bahn完全保留了对Deutsche Bahn品牌的所有权利,尽管我们正在提供DB UX Design System产品的代码,根据Apache 2.0许可证可以自由使用并发布. 请看看我们的品牌门户 https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆就任何品牌问题与谁联系.

对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和设计资产以及受保护的特征和商标,用于不包括DB主题.

捐款

发言非常受欢迎,请参看捐款指南。。。 .

行为守则

作为成员、贡献者和领导人,我们保证参与我们的工作人人无骚扰的体验《公约》的行为守则。。。 .

许可证

这个项目的许可证根据阿帕奇 - 2.0。。。 .

版本与发布记录

@db-ux/core-foundations 共发布 200 个版本，首次发布于 2025/02/13；过去 12 个月发布了 119 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`6.3.2`latest	2026/11/11	今天
`6.3.1`	2026/11/10	1 天前
`6.3.0`	2026/11/05	6 天前
`6.2.1`	2026/11/04	7 天前
`6.2.1-optimized-icon-fonts-amount2-b78987e`next	2026/11/04	7 天前
`6.2.0`	2026/10/29	13 天前

关于 @db-ux/core-foundations 的常见问题