脚趾

这个软件包为戴金设计系统(DDS)提供多种格式的设计标志:

• JS/Type 脚本: 具有类型脚本声明的无害环境管理和通用JS模块
• 支助科: CSS 自定义属性( CSS 变量)
• 常设委员会: 用于灵活整合的混音器
• 尾风 CSS v4: Tailwind CSS 集成的主题文件
• 贾森: 用于工具和集成的调试元数据

可用主题 :

• 品牌: Daikin 财务报告和审定财务报表 AAF
• 颜色方案 : Light 财务报告和审定财务报表 Dark 每个品牌的模式
• 密度 : Default 财务报告和审定财务报表 Compact 规模,独立于品牌/颜色计划

[注] 品牌/颜色和密度是独立的轴,每个轴被分割成独立的文件. 您必须导入 两者 一个色彩主题文件和一个密度文件来注册一些组件依赖的所有 CSS 变量.

对于完整的输出文件列表,请检查 build 安装后文件夹 .

使用量

安装软件包 :

npm install @daikin-oss/dds-tokens

导入 CSS

import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css";

或者说

@import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");

此导入所有设计符作为 CSS 自定义属性 :root 选择器.

密度代币(为高能控件的尺寸)与品牌/彩色CSS文件相分离,可以独立导入,再与任何品牌/彩色主题相组合:

@import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");
@import url("@daikin-oss/dds-tokens/css/density/Compact/variables.css");

可用密度文件 :

• css/density/Default/variables.css
• css/density/Compact/variables.css

导入 SCSS 混音器

SCSS混接器需要SCSS编译器,但它们在CSS变量的部署位置上提供了灵活性.

导入全部主题 :

@use "pkg:@daikin-oss/dds-tokens/scss/mixins" as dds-tokens;

:root {
  @include dds-tokens.daikin-Light-variables;
}

:root[data-theme="aaf"] {
  @include dds-tokens.aaf-Light-variables;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include dds-tokens.daikin-Dark-variables;
  }

  :root[data-theme="aaf"] {
    @include dds-tokens.aaf-Dark-variables;
  }
}

导入单个主题 :

@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Light/mixins" as daikin-Light;
@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Dark/mixins" as daikin-Dark;

:root {
  @include daikin-Light.variables;
}

:root.dark {
  @include daikin-Dark.variables;
}

密度混合剂可以采用同样的方式,独立于品牌/颜色主题:

@use "pkg:@daikin-oss/dds-tokens/scss/density/Default/mixins" as density-Default;
@use "pkg:@daikin-oss/dds-tokens/scss/density/Compact/mixins" as density-Compact;

:root {
  @include density-Default.variables;
}

:root[data-density="compact"] {
  @include density-Compact.variables;
}

尾风 CSS v4 集成

此软件包提供 Tailwind CSS v4 主题文件,将 DDS 令牌映射到 Tailwind CSS 变量.

共同主题文件(主题不可判断)

这个 tailwind4.css 文件提供了与任何 DDS 主题合作的主题不可知映射 :

@import "@daikin-oss/dds-tokens/tailwind4.css";

此文件使用 @theme inline 和参考 DDS CSS 变量,不含倒数。 您必须单独装入一个 DDS 主题 CSS 文件以提供实际符号值 .

示例

@import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
@import "@daikin-oss/dds-tokens/css/density/Default/variables.css";

@import "@daikin-oss/dds-tokens/tailwind4.css";

主题文件

您也可以使用针对主题的 Tailwind CSS 文件,其中包括倒置值:

@import "@daikin-oss/dds-tokens/css/daikin/Light/tailwind4.css";
@import "@daikin-oss/dds-tokens/css/density/Default/tailwind4.css";

可用文件 :

• css/daikin/Light/tailwind4.css
• css/daikin/Dark/tailwind4.css
• css/aaf/Light/tailwind4.css
• css/aaf/Dark/tailwind4.css
• css/density/Default/tailwind4.css
• css/density/Compact/tailwind4.css

使用这些文件 @theme (不是内置的)带有倒置值,允许它们独立工作而不需要单独的DDS主题CSS文件.

可变映射

DDS 符號被映射到 Tailwind CSS 根据符號類型的變數:

• color → --color-dds-*
• spacing → --spacing-dds-*
• borderRadius → --radius-dds-*
• borderWidth → --border-width-dds-*
• fontSize → --font-size-dds-*
• fontWeight → --font-weight-dds-*
• fontFamily → --font-family-dds-*
• lineHeight → --line-height-dds-*

示例输出 :

/* Common file (build/tailwind4.css) */
@theme inline {
  --color-dds-color-blue-10: var(--dds-color-blue-10);
  --spacing-dds-space-100: var(--dds-space-100);
  /* ... */
}

/* Theme-specific file (build/css/daikin/Light/tailwind4.css) */
@theme {
  --color-dds-color-blue-10: var(--dds-color-blue-10, #ddf3fc);
  --spacing-dds-space-100: var(--dds-space-100, 4px);
  /* ... */
}

导入 JS 变量

// ESM
import { colorBlue10 } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
import { inputHeight } from "@daikin-oss/dds-tokens/js/density/Default/variables.js";

// CommonJS
const {
  colorBlue10,
} = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");

使用 JSON 文件

JSON 下的文件 json/ 提供符号元数据,包括类型和值。 这些主要用于内部使用和工具整合.

可用文件 :

• json/daikin/Light/tokens.json
• json/daikin/Dark/tokens.json
• json/aaf/Light/tokens.json
• json/aaf/Dark/tokens.json
• json/density/Default/tokens.json
• json/density/Compact/tokens.json

文件结构 : { "<token name>": ["<token value>", "<style-dictionary token type>", "<tokens-studio token type>" | null] }

示例

{
  "color-blue-10": ["#ddf3fc", "color", null],
  "space-100": ["4px", "dimension", "spacing"]
}

此外,源主题JSON文件(位于 themes/)在软件包内的同一路径上发布,用于高级使用案例.