Astro UXDS 设计托肯斯

此套件包括所有 天体XDS 以不同格式设计符号,供您在应用程序中消费.

文档

天体设计托肯斯

安装

npm i @astrouxds/tokens

结构

每个导出目标都有以下文件:

• base. 参考。 *
  • 所有可能的变量.
  • 在没有任何系统选项的情况下有用.
• 基础。系统
  • 有语义含义的有限变量集
  • 用于创建自定义的 UI 部件 .
• 基础. 组件。 *
  • 特定组成部分变量
  • 用于重建已有的 Astro 组件 .

CSS 自定义属性

@import "node_modules/@astrouxds/tokens/dist/css/index.css";

或者说

@import "node_modules/@astrouxds/tokens/dist/css/base.reference.css";
@import "node_modules/@astrouxds/tokens/dist/css/base.system.css";
@import "node_modules/@astrouxds/tokens/dist/css/base.component.css";

轻主题类

@import "node_modules/@astrouxds/tokens/dist/css/theme.light.css";

A 类 light-theme 包括Astro轻主题的类.

类型

@import "node_modules/@astrouxds/tokens/dist/css/classes/typography.css";

应用Astro打字法的几个实用类.

索马里

@import "node_modules/@astrouxds/tokens/dist/scss/base.reference.scss";
@import "node_modules/@astrouxds/tokens/dist/scss/base.system.scss";
@import "node_modules/@astrouxds/tokens/dist/scss/base.component.scss";

SASS 地图

@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.reference.scss";
@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.system.scss";
@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.component.scss";

管道

graph TD
    A[Figma] --> B(data/tokens.json)
    B -->|Token Transformer| D["/tokens/*.json"]
    D -->|Style Dictionary| E["/dist"]
    E -->F[CSS]
    E -->G[SASS]
    E -->H[iOS]
    E -->I[JSON]

捐款

当地建筑

yarn make