@aziontech/主题

Azion的设计托克系统,编成单一的 尾风 CSS v4 样式表:原始调色板、品牌颜色、轻度/暗度语义符号、全文版缩放、运动工具以及 @keyframes,则 @font-face 设置 —— 加上作为可导入 JavaScript 的原始符号数据.

货包装有一件预先建造的文物dist/v4/globals.css以及4个JS小切入点. 没有 Tailwind 预设, 插件, 或 tailwind.config.js 步骤——v4读取 @theme 编号 : @utility 定义直接取自导入的 CSS .

安装

npm install @aziontech/theme
# or
pnpm add @aziontech/theme
# or
yarn add @aziontech/theme

Tailwind CSS v4 必须在耗入的构建中存在 — 样式表以 @import "tailwindcss"。 。 。 .

快开始

1. 导入样式表

在您的应用程序根 CSS 中:

@import '@aziontech/theme';

或来自 JavaScript( Vite and friends) :

import '@aziontech/theme'

该单项进口规定:

• 页:1 @font-face azion 类型系统的申报(不需要单独导入字体);
• 每个原始CSS变量(颜色、间隔、形状、打字、效果、断点);
• 语义上的光/暗变量(--primary, (中文(简体) ), --text-default, (中文(简体) ), --surface-0(......);
• 文本风格的公用事业text-heading-2xl, (中文(简体) ), text-big-number-md具有响应性大小;
• 动画公用事业及其 @keyframes (消费者将每门运动课与 motion-reduce: 倒计时).

2. 切换主题

光是默认值( L):root) (中文(简体) ). 黑暗模式在这些钩子上激活:

<html data-theme="dark">
  <!-- or -->
  <body class="dark">
    <!-- or the legacy pair -->
    <div class="azion azion-dark"></div>
  </body>
</html>

// Toggle at runtime
document.documentElement.dataset.theme = 'dark' // or 'light'

光模式选择器 : :root, (中文(简体) ), [data-theme='light'], (中文(简体) ), .azion.azion-light。 。 。 . 暗模式选择器 : [data-theme='dark'], (中文(简体) ), .dark, (中文(简体) ), .azion.azion-dark。 。 。 .

出口

整个公共表面,从 package.json#exports数字 :

JavaScript 令牌访问

颜色原始

import { primitives, brandPrimitives, surfacePrimitives } from '@aziontech/theme/colors'

primitives.orange[500] // '#F3652B' — primary brand
primitives.blue[500] // '#0072F5' — accent
primitives.violet[500] // '#8A84EC' — brand.accent palette
primitives.gray[900] // '#141414'

brandPrimitives.primary[500] // '#F3652B'
brandPrimitives.absolute.white // '#FFFFFF'

surfacePrimitives.surface[0] // '#FFFFFF'
surfacePrimitives.surface[950] // '#0A0A0A'

可用的调色板 : base, (中文(简体) ), blue, (中文(简体) ), gray, (中文(简体) ), slate, (中文(简体) ), orange, (中文(简体) ), violet, (中文(简体) ), yellow, (中文(简体) ), green, (中文(简体) ), red - 再加上 brand, (中文(简体) ), surface,以及 alpha 组合.

原始运动

import { curve, duration, animate } from '@aziontech/theme/animations'

curve['productive-exit'] // easing cubic-bezier
duration['fast-02'] // ms value
animate.shimmer // keyframe-backed animation definition

文本样式

import { textsData } from '@aziontech/theme/texts'

textsData['text-heading-2xl']
// { fontSize: { _: '1.875rem', sm: '3rem', md: '3.5rem' }, lineHeight: 1.25, fontWeight: 400 }

响应 fontSize 键_, (中文(简体) ), sm, (中文(简体) ), md变成 @media (min-width: …) 超过编译的公用事业.

语义变量作为JS(节点/构建步骤/运行时间)

import { compileThemeVars, compileThemeCss, injectThemeCss } from '@aziontech/theme/theme-colors'

compileThemeVars()
// → { light: { '--primary': '#F3652B', '--text-default': '#141414', … }, dark: { … } }

compileThemeCss()
// → ':root, [data-theme=light], .azion.azion-light { … }\n\n[data-theme=dark], .dark, … { … }'

injectThemeCss() // appends a <style data-azion-theme> element to <head>

只有在无法预先编译时才有用——生产用法应该更偏好静态样式表.

CSS 变量

语义层在模式间自动翻转 :

:root,
[data-theme='light'],
.azion.azion-light {
  --primary: #f3652b;
  --text-default: #141414;
  /* … */
}

[data-theme='dark'],
.dark,
.azion.azion-dark {
  --text-default: #fafafa;
  /* … */
}

直接使用它们 :

.custom-component {
  color: var(--text-default);
  border-color: var(--primary);
}

同样式表(如:. @utility text-default),这样 class="text-default" 泰风在任何地方都行.

调制解析

Tokens 使用可维护性参考系统:

// Define token reference
const textColor = tokenRef('primitives.gray.900')

// The compilers (scripts/compile-primitives.js, scripts/compile-theme.js)
// resolve refs to literal values at build time — and throw, listing every
// miss, if a ref does not resolve.
compileThemeVars()
// Output: { light: { '--text-default': '#141414', … }, dark: { … } }

全文——得到支持 tokenRef 前缀, 构建管道, 如何添加一个符号—— 生活在 src/tokens/README.md。 。 。 .

发展

pnpm build:tokens # node src/scripts/build-tokens.mjs → dist/v4/globals.{css,scss}
pnpm build:dts    # vue-tsc --declaration (emit .d.ts next to sources)
pnpm format       # prettier over scripts/ and src/
pnpm pack:dry     # inspect the tarball contents

dist/ 承诺 prepack 重运行 build:tokens + 键 build:dts ——每所出版的作品都从源头重建出文物,故作"活活"或"活活" dist/ 永远不能飞船.

项目结构

packages/theme/
├── tokens.js                    # in-repo JS barrel (not shipped — use the subpath exports)
├── src/
│   ├── tokens/
│   │   ├── primitives/          # colors (brand/surface/alpha), typography, shape, effects, animations, …
│   │   ├── semantic/            # texts/containers/spacings/z-indices data + semantic color refs
│   │   ├── theme/               # light/dark semantic groups (primary, background, text, ring, feedback/…)
│   │   └── README.md            # in-depth token documentation
│   └── scripts/
│       ├── refs.js              # tokenRef + isTokenRef + assertResolvedRefs
│       ├── compile-primitives.js
│       ├── compile-theme.js     # exported as ./theme-colors
│       └── build-tokens.mjs     # main entrypoint: emits dist/v4
├── dist/v4/globals.css          # the shipped stylesheet (committed; rebuilt on publish)
└── package.json

浏览器支持

有CSS自定义属性支持的现代常绿浏览器(Chrome,Firefox,Safari,Edge).

版本

此软件包随后 语义版本。版本由 请放行: 合并为 main 更新一个 Release PR,并合并 Release PR 剪切版本并发布.

捐款

这个包是Azion WebKit monorepo的一部分. 请参看捐款准则的主要存放处.

许可证

麻省理工学院阿齐翁技术

链接

• GitHub 仓库
• 国家防范机制一揽子计划
• 问题跟踪器

更改日志

见 变动情况 为释放历史.