@aleph-alpha/config-css

配置 CSS 预设

@ aleph- alpha/ config- css- preset

这个软件包为CSS提供了基本的配置预设. 它包括一组默认的样式和配置,这些样式和配置可以容易地定制来适应您项目的需求.

安装

要将这个软件包集成到您的工程中, 请使用软件包管理器安装软件包, 例如 pnpm :

pnpm add @aleph-alpha/config-css-preset

使用量

要使用您的工程预设, 请遵循这些步骤 :

CSS 设置

在您的项目中需要设置UnoCSS. UnoCSS是通用第一的CSS框架,可以采用更高效更一致的造型方法.

关于建立UnoCSS的详细指示,请参见: UnoCSS 安装指南。该指南将引导您通过安装 UnoCSS 的过程,并为您的工程配置它.

在设置 UnoCSS后,您需要将 Aleph Alpha CSS 预设添加到您的 UnoCSS 配置中.

// unocss.config.ts
import { defineConfig } from 'unocss';

import { presetAlephAlpha, designSystemContentPathConfig } from '@aleph-alpha/config-css-preset';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';

export default defineConfig({
  ...getDesignSystemContentPathConfig('svelte' | 'vue'),
  presets: [presetAlephAlpha()],
});

如何使用

在此定义所有可用的设计符号 符号。 。 。 . 使用您工程中的设计符号如下:

<p class="color-core-content-primary">color-core-content-primary</p>
<div class="border-r-core-border-primary">border-r-core-border-primary</div>
<p class="label-12">label-12</p>
<div class="shadow-dropdowns">Dropdown Shadow</div>

黑暗主题

如果您想要应用黑暗主题, 请设置顶级 dark 类,例如到身体标记

<body class="dark">
  <p class="color-core-content-primary">color-core-content-primary</p>
</body>

发展

要开发此软件包, 克隆寄存器并运行以下命令:

pnpm install
pnpm build

解释

包的目的是通过 Figma 插件取入 Figma Tokens 托肯斯工作室 并将它转换成在UnoCs中被曝光的托肯斯.

建设步骤如下:

1. 设计者将符号更改从 Figma 推到 a tokens.json 文档并打开 MR.
2. MR合并后,管道会运行并触发建设过程.
3. 来自 tokens.json 被转换、分成不同类别并储存在 transformed-tokens 目录为 符号转换器 这样样式词典就可以读取它们. 类别是: light-mode, (中文(简体) ), dark-mode 财务报告和审定财务报表 global
4. 变形的代币用 样式词典 以生成可在 UnoCs 中使用的符号。 处理过的令牌保存在 sd-output 目录.
5. 处理过的代号 : sd-output 然后用于创建 UnoCs 预设.
6. UnoCs 预设后被用 vite 捆绑,最后的包被存储在 dist 目录.

graph TD
    A[Designer pushes token changes from Figma to tokens.json] --> B[Open MR]
    B --> C{MR merged?}
    C -->|Yes| D[Pipeline runs]
    D --> E[Trigger build process]
    E --> F[Transform and split tokens with token-transformer]
    F --> G[Store transformed tokens in transformed-tokens directory]
    G --> H[Process tokens with style-dictionary]
    H --> I[Store processed tokens in sd-output directory]
    I --> J[Create UnoCss presets]
    J --> K[Bundle presets with Vite]
    K --> L[Store final package in dist directory]
    C -->|No| B
    subgraph Token Categories
        F --> F1[light-mode]
        F --> F2[dark-mode]
        F --> F3[global]
    end

字体转换工具

这个软件包包括一个用于将 WOFF2 字体文件转换为 TypeScript 文件的效用脚本,其中包含有基础64-编码数据. 用于将字体直接嵌入应用程序 .

使用量

这个 convert-fonts.js 脚本位于 packages/config-css-preset/src/utils/convert-fonts.js 并可使用如下:

node packages/config-css-preset/src/utils/convert-fonts.js <input.woff2> <output.ts>

示例

node packages/config-css-preset/src/utils/convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts

这将:

1. 读取 WOFF2 字体文件
2. 转换为 Base64 格式
3. 生成一个包含基数64数据的导出常数的 TypeScript 文件
4. 常数名称来自输出文件名

生成的 TypeScript 文件看起来像 :

export const montserrat600 = 'data:font/woff2;base64,<base64-encoded-font-data>';

配置 CSS 预设帮助 UI 自定义

读到这里

参考资料

以下软件包用于生成预设:

• 未显示
• 预设主题
• @tokens-studio/sd- transforms (英语)
• 符号转换器
• 样式词典

关于Aleph Alpha CSS预设配置的细节,请参见源代码.