@astryxdesign/cli 0.4.3-canary.5939961 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,7 +9,7 @@ export const docsDense = {
|
|
|
9
9
|
{ section: 'Available Themes', title: 'Themes', content: [null, null, { type: 'prose', text: 'published: neutral (start here), butter, chocolate, gothic (dark-only), matcha, stone, y2k. @astryxdesign/theme-{name} = source (runtime). @astryxdesign/theme-{name}/built = optimized (+ theme.css).' }] },
|
|
10
10
|
{ section: 'Theme Props', title: 'Props', content: [null] },
|
|
11
11
|
{ section: 'Creating a Custom Theme', title: 'Custom Theme', content: [{ type: 'prose', text: '`theme list` + `theme add <slug>` to start from a shipped theme, or defineTheme from scratch. only override tokens that differ.' }, null, { type: 'prose', text: '`astryx theme template` writes theme.template.ts: every defineTheme field + token families + override syntax, annotated, with the CLI command that prints each reference.' }] },
|
|
12
|
-
{ section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: 'scale configs (color, typography, radius, motion) + explicit token overrides + component overrides. color derives full palette from accent via HCT
|
|
12
|
+
{ section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: 'scale configs (color, typography, radius, motion) + explicit token overrides + component overrides. color derives full palette from accent hex via HCT.' }, null, null] },
|
|
13
13
|
{ section: 'Component Style Overrides', title: 'Component Overrides', content: [{ type: 'prose', text: 'components field uses semantic component keys + style keys (base, variant:value, stateName), not raw selectors. for external CSS, prefer data-* selectors from `astryx docs styling`. write standard CSS (borderRadius, padding) — pipeline expands to internal vars. public vars (--button-focus-offset etc) set directly. private vars (--_*) cannot be set — use CSS properties. run `astryx component <Name>` for details.' }, null, null, null, null] },
|
|
14
14
|
{ section: 'Custom Variants', title: 'Custom Variants', content: [{ type: 'prose', text: 'any unknown prop:value in components becomes a new variant. astryx theme build generates TS augmentations. works on any extensible prop axis (variant, status, etc).' }, null, null, null, null] },
|
|
15
15
|
{ section: 'Building Themes for Production', title: 'Build for Production', content: [{ type: 'prose', text: 'astryx theme build compiles defineTheme to static CSS. outputs .css + .js (__built:true) + .d.ts.' }, null, null, null, null] },
|
|
@@ -162,7 +162,7 @@ function App() {
|
|
|
162
162
|
content: [
|
|
163
163
|
{
|
|
164
164
|
type: 'prose',
|
|
165
|
-
text: 'defineTheme creates a theme from token overrides and optional scale configs. Scale configs generate tokens from parameters. Explicit token overrides always take precedence over scale-generated values
|
|
165
|
+
text: 'defineTheme creates a theme from token overrides and optional scale configs. Scale configs generate tokens from parameters. Explicit token overrides always take precedence over scale-generated values.',
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
type: 'code',
|
|
@@ -172,8 +172,7 @@ function App() {
|
|
|
172
172
|
|
|
173
173
|
const myTheme = defineTheme({
|
|
174
174
|
name: 'my-theme',
|
|
175
|
-
|
|
176
|
-
color: { accent: ['#7B61FF', '#9B85FF'], neutralStyle: 'cool' },
|
|
175
|
+
color: { accent: '#7B61FF', neutralStyle: 'cool' },
|
|
177
176
|
typography: {
|
|
178
177
|
scale: { base: 14, ratio: 1.2 },
|
|
179
178
|
body: { family: 'Inter', fallbacks: '-apple-system, sans-serif' },
|
|
@@ -182,7 +181,7 @@ const myTheme = defineTheme({
|
|
|
182
181
|
motion: { fast: 175, medium: 410, ratio: 0.75 },
|
|
183
182
|
tokens: {
|
|
184
183
|
// Explicit overrides take precedence over scale-generated values
|
|
185
|
-
'--color-
|
|
184
|
+
'--color-accent': ['#7B61FF', '#9B85FF'],
|
|
186
185
|
},
|
|
187
186
|
components: {
|
|
188
187
|
button: { 'variant:primary': { color: 'white' } },
|
|
@@ -196,7 +195,7 @@ const myTheme = defineTheme({
|
|
|
196
195
|
[
|
|
197
196
|
'color',
|
|
198
197
|
'--color-accent, --color-background-*, --color-text-*, --color-border, etc.',
|
|
199
|
-
'accent? (hex
|
|
198
|
+
'accent? (hex; omit for neutral-only), neutralStyle? (warm|cool|neutral), contrast? (standard|high)',
|
|
200
199
|
],
|
|
201
200
|
[
|
|
202
201
|
'typography.scale',
|
|
@@ -9,7 +9,7 @@ export const docsZh = {
|
|
|
9
9
|
{ section: 'Available Themes', title: '可用主题', content: [null, null, { type: 'prose', text: '已发布主题:neutral(推荐起点)、butter、chocolate、gothic(仅暗色)、matcha、stone、y2k。@astryxdesign/theme-{name} = 源码版(运行时注入)。@astryxdesign/theme-{name}/built = 优化版(配合 theme.css)。' }] },
|
|
10
10
|
{ section: 'Theme Props', title: 'Theme 属性', content: [null] },
|
|
11
11
|
{ section: 'Creating a Custom Theme', title: '创建自定义主题', content: [{ type: 'prose', text: '用 `theme list` + `theme add <slug>` 从内置主题开始,或用 defineTheme 从零编写。只覆盖与默认值不同的令牌。' }, null, { type: 'prose', text: '`astryx theme template` 会写入 theme.template.ts:带注释的完整参考,涵盖每个 defineTheme 字段、令牌族和覆盖语法,并标明打印各自参考的 CLI 命令。' }] },
|
|
12
|
-
{ section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: '支持比例配置(
|
|
12
|
+
{ section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: '支持比例配置(typography、radius、motion)+ 显式令牌覆盖 + 组件覆盖。' }, null, null] },
|
|
13
13
|
{ section: 'Building Themes for Production', title: '生产构建', content: [{ type: 'prose', text: 'astryx theme build 将 defineTheme 编译为静态 CSS。输出 .css + .js(__built:true)+ .d.ts。' }, null, null, null, null] },
|
|
14
14
|
{ section: 'Runtime vs Built Themes', title: '运行时 vs 构建', content: [{ type: 'prose', text: '运行时:useInsertionEffect 在客户端注入样式。构建:静态 CSS 在首次渲染时就存在。SSR 应用请使用 /built + theme.css。' }, null, null, null] },
|
|
15
15
|
{ section: 'Light/Dark Mode', title: '亮/暗模式', content: [{ type: 'prose', text: "令牌值使用 [light, dark] 元组实现自动模式切换。Theme 上 mode='system'(默认)跟随系统偏好。" }, null, null] },
|
package/assets/theme.template.ts
CHANGED
|
@@ -105,13 +105,12 @@ export const myTheme = defineTheme({
|
|
|
105
105
|
// ───────────────────────────────────────────────────────────────────────
|
|
106
106
|
|
|
107
107
|
/**
|
|
108
|
-
* Generates the neutral ramp and the accent tokens from
|
|
108
|
+
* Generates the neutral ramp and the accent tokens from one seed colour
|
|
109
109
|
* using the HCT perceptual model: surfaces, text, icons, borders, muted
|
|
110
110
|
* fills, hover and pressed overlays — light and dark both.
|
|
111
111
|
*
|
|
112
|
-
* accent seed hex
|
|
113
|
-
*
|
|
114
|
-
* accent and re-tone only the neutrals
|
|
112
|
+
* accent seed hex; omit to keep the default accent and re-tone only
|
|
113
|
+
* the neutrals
|
|
115
114
|
* neutralStyle 'warm' | 'cool' | 'neutral' — the temperature of the greys
|
|
116
115
|
* contrast 'standard' | 'high' — 'high' widens the text/surface tone
|
|
117
116
|
* gap, for dense data UI or bright and clinical screens
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.4.3
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -84,10 +84,10 @@
|
|
|
84
84
|
"zod": "^4.4.3"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
|
-
"@astryxdesign/charts": "
|
|
88
|
-
"@astryxdesign/core": "
|
|
89
|
-
"@astryxdesign/lab": "
|
|
90
|
-
"@astryxdesign/theme-neutral": "
|
|
87
|
+
"@astryxdesign/charts": "*",
|
|
88
|
+
"@astryxdesign/core": "*",
|
|
89
|
+
"@astryxdesign/lab": "*",
|
|
90
|
+
"@astryxdesign/theme-neutral": "*",
|
|
91
91
|
"gpt-tokenizer": "^3.4.0"
|
|
92
92
|
},
|
|
93
93
|
"peerDependenciesMeta": {
|
|
@@ -105,10 +105,10 @@
|
|
|
105
105
|
}
|
|
106
106
|
},
|
|
107
107
|
"devDependencies": {
|
|
108
|
-
"@astryxdesign/charts": "
|
|
109
|
-
"@astryxdesign/core": "
|
|
110
|
-
"@astryxdesign/lab": "
|
|
111
|
-
"@astryxdesign/theme-neutral": "
|
|
108
|
+
"@astryxdesign/charts": "*",
|
|
109
|
+
"@astryxdesign/core": "*",
|
|
110
|
+
"@astryxdesign/lab": "*",
|
|
111
|
+
"@astryxdesign/theme-neutral": "*",
|
|
112
112
|
"gpt-tokenizer": "^3.4.0"
|
|
113
113
|
},
|
|
114
114
|
"scripts": {
|