F0 核心

F0设计系统的核心标志和公用事业.

安装

npm install @factorialco/f0-core
# or
yarn add @factorialco/f0-core
# or
pnpm add @factorialco/f0-core

使用量

import { semanticColors, spacing, fontSizes } from "@factorialco/f0-core"

// Use tokens in your styles
const styles = {
  container: {
    padding: spacing[4],
    backgroundColor: semanticColors.background.default.light,
  },
  text: {
    fontSize: fontSizes.base,
    color: semanticColors.foreground.default.light,
  },
}

可用的托肯

• semanticColors: 光和暗主题的语义色彩符号
• baseColors: 原始颜色值
• spacing坐标:
• fontSizes: 字体大小缩放
• fontWeights: 字体重量值
• lineHeights:行高值
• letterSpacings: 字母间隔值
• borderRadius: 边框半径值

尾风预设

@factorialco/f0-core/tailwind 提供了 F0 主题和插件。 尾风 只有在源文件中找到完整类名时才会生成类. 写入 f1 全部彩色分类( 例如) bg-f1-background-secondary, (中文(简体) ), 不由变量构建, 如 `bg-f1-background-${tone}`。如果必须 在运行时创建类名, 将准确的类添加到自己的 safelist。 。 。 .

发展

大楼

pnpm build

测试

pnpm test

许可证

麻省理工学院