@astryxdesign/cli 0.0.15 → 0.1.0-canary.08d4cf4
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.
- package/CHANGELOG.md +88 -0
- package/README.md +118 -76
- package/bin/astryx.mjs +22 -7
- package/docs/getting-started.doc.mjs +15 -15
- package/docs/icons.doc.mjs +1 -1
- package/docs/migration.doc.mjs +6 -6
- package/docs/shape.doc.mjs +1 -1
- package/docs/styling-libraries.doc.mjs +3 -3
- package/docs/styling.doc.mjs +4 -5
- package/docs/theme.doc.dense.mjs +2 -2
- package/docs/theme.doc.mjs +53 -19
- package/docs/theme.doc.zh.mjs +2 -2
- package/docs/working-with-ai.doc.mjs +4 -4
- package/package.json +10 -14
- package/src/api/doctor.mjs +4 -4
- package/src/api/search.mjs +207 -13
- package/src/api/template.mjs +2 -1
- package/src/codemods/__tests__/registry.test.mjs +1 -0
- package/src/codemods/registry.mjs +1 -0
- package/src/codemods/runner.mjs +105 -51
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-config-surfaces.test.mjs +116 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-module-specifiers.test.mjs +51 -0
- package/src/codemods/transforms/v0.1.0/index.mjs +28 -0
- package/src/codemods/transforms/v0.1.0/migrate-xds-config-surfaces.mjs +230 -0
- package/src/codemods/transforms/v0.1.0/migrate-xds-module-specifiers.mjs +84 -0
- package/src/commands/agent-docs.mjs +119 -66
- package/src/commands/agent-docs.path-safety.test.mjs +1 -1
- package/src/commands/agent-docs.test.mjs +87 -31
- package/src/commands/build-theme.import-path.test.mjs +1 -1
- package/src/commands/build-theme.path-safety.test.mjs +1 -1
- package/src/commands/build-theme.prose.test.mjs +1 -1
- package/src/commands/build.mjs +196 -0
- package/src/commands/component-package.test.mjs +1 -1
- package/src/commands/component.test.mjs +1 -1
- package/src/commands/docs.test.mjs +1 -1
- package/src/commands/doctor.test.mjs +4 -4
- package/src/commands/external-showcase.test.mjs +1 -1
- package/src/commands/init.mjs +12 -4
- package/src/commands/interactive-guard.test.mjs +1 -1
- package/src/commands/json-contract.test.mjs +10 -3
- package/src/commands/swizzle-gap-safety.test.mjs +1 -1
- package/src/commands/swizzle.path-safety.test.mjs +1 -1
- package/src/commands/template.path-safety.test.mjs +1 -1
- package/src/commands/template.test.mjs +1 -1
- package/src/commands/upgrade.mjs +353 -169
- package/src/commands/upgrade.test.mjs +41 -27
- package/src/index.mjs +1 -0
- package/src/lib/config.mjs +12 -0
- package/src/lib/config.test.mjs +42 -0
- package/src/lib/error-codes.mjs +3 -0
- package/src/types/error-codes.d.ts +1 -0
- package/src/utils/interactive.mjs +1 -1
- package/src/utils/interactive.test.mjs +2 -0
- package/src/utils/package-manager.mjs +1 -1
- package/src/utils/package-manager.test.mjs +1 -1
- package/src/utils/path-safety.test.mjs +1 -1
- package/src/utils/paths.test.mjs +8 -8
- package/src/utils/update-check.mjs +4 -26
- package/src/utils/update-check.test.mjs +2 -64
- package/templates/blocks/components/AppShell/AppShellContentOnly.tsx +1 -9
- package/templates/blocks/components/AppShell/AppShellShowcase.tsx +1 -10
- package/templates/blocks/components/AppShell/AppShellSideNavOnly.tsx +1 -9
- package/templates/blocks/components/AppShell/AppShellTopNavOnly.tsx +1 -9
- package/templates/blocks/components/AppShell/AppShellTopNavWithSideNav.tsx +1 -9
- package/templates/blocks/components/AppShell/AppShellWithBanner.tsx +1 -9
- package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx +12 -19
- package/templates/blocks/components/Banner/BannerShowcase.tsx +1 -8
- package/templates/blocks/components/Blockquote/BlockquoteShowcase.tsx +1 -8
- package/templates/blocks/components/Carousel/CarouselShowcase.tsx +2 -12
- package/templates/blocks/components/ChatComposerDrawer/ChatComposerDrawerShowcase.tsx +6 -9
- package/templates/blocks/components/ChatLayout/ChatLayoutPanelChat.tsx +10 -12
- package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx +1 -9
- package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx +1 -9
- package/templates/blocks/components/ChatMessageList/ChatMessageListShowcase.tsx +1 -9
- package/templates/blocks/components/ChatMessageMetadata/ChatMessageMetadataShowcase.tsx +1 -8
- package/templates/blocks/components/ChatSendButton/ChatSendButtonInComposer.tsx +1 -8
- package/templates/blocks/components/Citation/CitationInlineText.tsx +4 -4
- package/templates/blocks/components/Code/CodeInlineInParagraph.tsx +1 -8
- package/templates/blocks/components/CodeBlock/CodeBlockBashCommand.tsx +1 -1
- package/templates/blocks/components/CodeBlock/CodeBlockJSONConfig.tsx +1 -1
- package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx +9 -12
- package/templates/blocks/components/ContextMenu/ContextMenuShowcase.tsx +13 -15
- package/templates/blocks/components/Divider/DividerShowcase.tsx +1 -8
- package/templates/blocks/components/Divider/DividerVertical.tsx +7 -9
- package/templates/blocks/components/Field/FieldShowcase.tsx +1 -8
- package/templates/blocks/components/FormLayout/FormLayoutHorizontal.tsx +1 -6
- package/templates/blocks/components/Grid/GridResponsiveAutoFit.tsx +1 -9
- package/templates/blocks/components/HoverCard/HoverCardInlineTextHoverCard.tsx +4 -6
- package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.tsx +1 -6
- package/templates/blocks/components/HoverCard/HoverCardProfileHoverCard.tsx +2 -8
- package/templates/blocks/components/HoverCard/HoverCardShowcase.tsx +1 -8
- package/templates/blocks/components/MoreMenu/MoreMenuInToolbar.tsx +2 -12
- package/templates/blocks/components/OverflowList/OverflowListOverflowBadges.tsx +8 -11
- package/templates/blocks/components/OverflowList/OverflowListOverflowDropdownActions.tsx +9 -12
- package/templates/blocks/components/Overlay/OverlayBottomStrip.tsx +4 -17
- package/templates/blocks/components/Overlay/OverlayHoverReveal.tsx +15 -16
- package/templates/blocks/components/Overlay/OverlayShowcase.tsx +5 -21
- package/templates/blocks/components/Pagination/PaginationDotsCarousel.tsx +2 -14
- package/templates/blocks/components/Pagination/PaginationPageSize.tsx +12 -14
- package/templates/blocks/components/Pagination/PaginationVariants.tsx +1 -8
- package/templates/blocks/components/Pagination/PaginationWithTable.tsx +2 -14
- package/templates/blocks/components/Tokenizer/TokenizerClear.tsx +1 -6
- package/templates/blocks/components/Tokenizer/TokenizerCreatable.tsx +2 -7
- package/templates/blocks/components/Tokenizer/TokenizerEndContent.tsx +1 -6
- package/templates/blocks/components/Tokenizer/TokenizerIcon.tsx +1 -6
- package/templates/blocks/components/Tokenizer/TokenizerMaxEntries.tsx +1 -6
- package/templates/blocks/components/Tokenizer/TokenizerOverflow.tsx +2 -7
- package/templates/blocks/components/Tokenizer/TokenizerShowcase.tsx +1 -6
- package/templates/blocks/components/Tokenizer/TokenizerStates.tsx +4 -9
- package/templates/blocks/components/Toolbar/ToolbarCardHeader.tsx +1 -10
- package/templates/blocks/components/Toolbar/ToolbarSizes.tsx +1 -8
- package/templates/blocks/components/Toolbar/ToolbarTableFilter.tsx +1 -8
- package/templates/blocks/components/Toolbar/ToolbarThreeSlot.tsx +1 -10
- package/templates/blocks/components/Toolbar/ToolbarWithTabs.tsx +8 -11
- package/templates/pages/ai-chat/page.tsx +71 -64
- package/templates/pages/ai-chat-landing/page.tsx +8 -12
- package/templates/pages/centered-hero/page.tsx +13 -15
- package/templates/pages/classic-gallery/page.tsx +27 -34
- package/templates/pages/detail-page/page.tsx +18 -18
- package/templates/pages/documentation/page.tsx +42 -58
- package/templates/pages/documentation-design/page.tsx +82 -60
- package/templates/pages/documentation-technical/page.tsx +101 -60
- package/templates/pages/editor/page.tsx +42 -54
- package/templates/pages/file-explorer/page.tsx +13 -16
- package/templates/pages/form-two-column/page.tsx +22 -43
- package/templates/pages/gallery-hero/page.tsx +13 -15
- package/templates/pages/ide/page.tsx +188 -264
- package/templates/pages/library/page.tsx +16 -23
- package/templates/pages/login/page.tsx +14 -18
- package/templates/pages/login-card/page.tsx +14 -18
- package/templates/pages/login-split/page.tsx +50 -48
- package/templates/pages/login-sso/page.tsx +9 -13
- package/templates/pages/mixed-gallery/page.tsx +51 -45
- package/templates/pages/payment-form/page.tsx +56 -70
- package/templates/pages/product-detail/page.tsx +27 -33
- package/templates/pages/product-gallery/page.tsx +7 -13
- package/templates/pages/settings-dialog/page.tsx +35 -43
- package/templates/pages/settings-sidebar/page.tsx +39 -47
- package/templates/pages/side-gallery/page.tsx +6 -9
- package/templates/pages/table-grouped/page.tsx +11 -15
- package/templates/pages/theme-showcase/page.tsx +33 -37
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,93 @@
|
|
|
1
1
|
# @xds/cli
|
|
2
2
|
|
|
3
|
+
# 0.1.0
|
|
4
|
+
|
|
5
|
+
#### Breaking Changes
|
|
6
|
+
|
|
7
|
+
- Read project config from `astryx.config.mjs` (was `xds.config.mjs`)
|
|
8
|
+
The CLI now resolves its optional project config from `astryx.config.mjs`
|
|
9
|
+
instead of `xds.config.mjs` — a hard cut, no fallback. Consumers with an
|
|
10
|
+
`xds.config.mjs` must rename it to `astryx.config.mjs` (the config shape and
|
|
11
|
+
all fields are unchanged). Part of removing `xds` naming from the public API.
|
|
12
|
+
- Rename the CLI command/bin from `xds` to `astryx`
|
|
13
|
+
The CLI binary is now `astryx` (was `xds`); `bin/xds.mjs` is renamed to
|
|
14
|
+
`bin/astryx.mjs`, the dual `xds`+`astryx` bin entries collapse to a single
|
|
15
|
+
`astryx`, and the program/manifest name is `astryx`. Invoke the CLI as
|
|
16
|
+
`npx astryx <command>` (e.g. `npx astryx component Button`). The swizzle
|
|
17
|
+
default output dir moves from `./components/xds` to `./components/astryx`.
|
|
18
|
+
Consumers using `npx xds`, an `xds` npm-script alias, or the `xds` MCP server
|
|
19
|
+
name should switch to `astryx`. Part of removing `xds` naming from the public API.
|
|
20
|
+
- Rename the exported `XDSError` class to `AstryxError`
|
|
21
|
+
The CLI's programmatic API error class is renamed `XDSError` -> `AstryxError`
|
|
22
|
+
(exported from `@xds/cli` + declared in its types). Consumers that catch or
|
|
23
|
+
reference `XDSError` from the CLI's API should switch to `AstryxError`. Part of
|
|
24
|
+
removing `xds` naming from the public API.
|
|
25
|
+
- Remove the XDS-prefix compatibility layer — astryx is now the only public surface
|
|
26
|
+
This release erases all `xds` naming from the public API; there is no compatibility
|
|
27
|
+
window. Consumers must migrate (we own all consumers pre-OSS):
|
|
28
|
+
- Remove the daily, brutalist, and default themes; neutral is the new baseline
|
|
29
|
+
Three theme packages are removed from the repo and will no longer be published:
|
|
30
|
+
|
|
31
|
+
#### Fixes
|
|
32
|
+
|
|
33
|
+
- `theme build` generates valid bare type imports (IconRegistry/DefinedTheme)
|
|
34
|
+
`astryx theme build` emitted `.d.ts` files importing `XDSIconRegistry` /
|
|
35
|
+
`XDSDefinedTheme` from `@xds/core`, but those aliases were removed — the
|
|
36
|
+
generated types failed to resolve. Generate `IconRegistry` / `DefinedTheme`
|
|
37
|
+
(the bare names `@xds/core` now exports) instead.
|
|
38
|
+
|
|
39
|
+
#### Documentation
|
|
40
|
+
|
|
41
|
+
- Update CLI theme docs to the current theme set
|
|
42
|
+
Refreshes the `astryx docs theme`, `getting-started`, `styling`,
|
|
43
|
+
`styling-libraries`, and `migration` reference docs to reflect the published
|
|
44
|
+
themes: `neutral`, `butter`, `chocolate`, `gothic`, `matcha`, `stone`, and
|
|
45
|
+
`y2k`. The removed `theme-default`, `theme-brutalist`, and `theme-daily`
|
|
46
|
+
packages are dropped from the docs, and install/import examples now use
|
|
47
|
+
`@astryxdesign/theme-neutral` as the recommended starting theme.
|
|
48
|
+
|
|
49
|
+
#### Other Changes
|
|
50
|
+
|
|
51
|
+
- **Component names:** the `XDS*` aliases are gone — use bare names (`Button` not
|
|
52
|
+
`XDSButton`, `useTheme` not `useXDSTheme`, `ButtonProps` not `XDSButtonProps`). The
|
|
53
|
+
`drop-xds-prefix-imports` codemod automates this.
|
|
54
|
+
- **CSS classes:** components emit only `.astryx-*` (the dual `.xds-*` class is gone).
|
|
55
|
+
Update custom CSS selectors `.xds-button` -> `.astryx-button` (prop/state value classes
|
|
56
|
+
like `.primary`/`.sm` are unchanged).
|
|
57
|
+
- **data attributes:** only `data-astryx-theme` / `data-astryx-media` are written; update
|
|
58
|
+
custom selectors and SSR root attributes off `data-xds-*`.
|
|
59
|
+
- **CSS layers:** `@layer xds-base` / `xds-theme` are renamed to `astryx-base` /
|
|
60
|
+
`astryx-theme`; update your `@layer` order line and any PostCSS `layersBefore` config.
|
|
61
|
+
`@astryxdesign/build`'s default library layer is now `astryx-base`.
|
|
62
|
+
- **Pre-compiled stylesheet:** the `@astryxdesign/core/xds.css` export is removed — import
|
|
63
|
+
`@astryxdesign/core/astryx.css`.
|
|
64
|
+
- **CSS custom properties:** the `--xds-*` padding fallback is gone; set `--astryx-*`.
|
|
65
|
+
- **CLI config key:** `@astryxdesign/cli` reads the package.json `"astryx"` field (was `"xds"`).
|
|
66
|
+
Rename the block; a stale `"xds"` key silently drops the package from discovery.
|
|
67
|
+
- `@astryxdesign/theme-daily`
|
|
68
|
+
- `@astryxdesign/theme-brutalist`
|
|
69
|
+
- `@astryxdesign/theme-default`
|
|
70
|
+
- import {defaultTheme} from '@astryxdesign/theme-default/built';
|
|
71
|
+
- import {neutralTheme} from '@astryxdesign/theme-neutral/built';
|
|
72
|
+
- <Theme theme={defaultTheme}>...</Theme>
|
|
73
|
+
- <Theme theme={neutralTheme}>...</Theme>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
- Remove the internal `drop-xds-meta-prefix` codemod from the OSS repo (#2970)
|
|
78
|
+
This codemod has been moved to its own package's tooling, where it belongs. It was registered as an optional, version-independent transform and is not part of any standard upgrade path, so removing it does not affect the public `0.0.13 → 0.0.15` migration.
|
|
79
|
+
- Rename the npm package scope from `@xds/*` to `@astryxdesign/*`
|
|
80
|
+
All published packages move to the new `@astryxdesign` scope (e.g. `@xds/core` → `@astryxdesign/core`), along with the workspace lockfile, build/runtime scope-directory scans, and docsite slug derivation. Consumers must update their imports and dependency names. The internal ESLint plugin namespace (`@xds/*` rules) is intentionally untouched and tracked separately. Existing `@xds/*` codemods continue to target the old scope so projects still on `@xds/*` can migrate.
|
|
81
|
+
|
|
82
|
+
#### Contributors
|
|
83
|
+
|
|
84
|
+
Thanks to everyone who contributed to this release:
|
|
85
|
+
|
|
86
|
+
- @cixzhang
|
|
87
|
+
- @ejhammond
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
3
91
|
# 0.0.15
|
|
4
92
|
|
|
5
93
|
#### Breaking Changes
|
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ npx astryx docs migration
|
|
|
11
11
|
npx astryx template --list
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## Finding things: `astryx search`
|
|
15
15
|
|
|
16
16
|
When you don't know whether what you need is a component, a hook, a docs topic,
|
|
17
17
|
or a template, search across all of them at once. Results are ranked by
|
|
@@ -50,20 +50,20 @@ Options:
|
|
|
50
50
|
|
|
51
51
|
## Commands
|
|
52
52
|
|
|
53
|
-
| Command | Description
|
|
54
|
-
| ------------- |
|
|
53
|
+
| Command | Description |
|
|
54
|
+
| ------------- | ---------------------------------------------------------------------------------------------------- |
|
|
55
55
|
| `init` | Initialize the design system in your project: installs packages, sets up theming, adds AI agent docs |
|
|
56
|
-
| `component` | List components or print detailed docs, props, usage examples, and source
|
|
57
|
-
| `search` | Find components, hooks, docs, and templates in one ranked, cross-domain result set
|
|
58
|
-
| `docs` | Print reference documentation (tokens, theme, color, typography, spacing, etc.)
|
|
59
|
-
| `template` | Inject page or block templates into your project
|
|
60
|
-
| `hook` | List hooks and print hook documentation
|
|
61
|
-
| `swizzle` | Copy component source into your project for deep customization
|
|
62
|
-
| `upgrade` | Run codemods to migrate between versions
|
|
63
|
-
| `theme build` | Compile a defineTheme file to production CSS and JS
|
|
64
|
-
| `discover` | Discover external packages and components
|
|
65
|
-
| `gap-report` | Report a gap when a component doesn't meet your needs
|
|
66
|
-
| `doctor` | Diagnose your XDS setup and report problems with fixes (CI-friendly via exit code)
|
|
56
|
+
| `component` | List components or print detailed docs, props, usage examples, and source |
|
|
57
|
+
| `search` | Find components, hooks, docs, and templates in one ranked, cross-domain result set |
|
|
58
|
+
| `docs` | Print reference documentation (tokens, theme, color, typography, spacing, etc.) |
|
|
59
|
+
| `template` | Inject page or block templates into your project |
|
|
60
|
+
| `hook` | List hooks and print hook documentation |
|
|
61
|
+
| `swizzle` | Copy component source into your project for deep customization |
|
|
62
|
+
| `upgrade` | Run codemods to migrate between versions |
|
|
63
|
+
| `theme build` | Compile a defineTheme file to production CSS and JS |
|
|
64
|
+
| `discover` | Discover external packages and components |
|
|
65
|
+
| `gap-report` | Report a gap when a component doesn't meet your needs |
|
|
66
|
+
| `doctor` | Diagnose your XDS setup and report problems with fixes (CI-friendly via exit code) |
|
|
67
67
|
|
|
68
68
|
### Global options
|
|
69
69
|
|
|
@@ -122,46 +122,46 @@ if (isError(result)) {
|
|
|
122
122
|
|
|
123
123
|
### Error codes
|
|
124
124
|
|
|
125
|
-
| Code
|
|
126
|
-
|
|
|
127
|
-
| `ERR_UNKNOWN`
|
|
128
|
-
| `ERR_UNKNOWN_COMMAND`
|
|
129
|
-
| `ERR_UNKNOWN_SUBCOMMAND` | A subcommand under a group was not recognized (e.g. `astryx theme bogus`).
|
|
130
|
-
| `ERR_INVALID_OPTION`
|
|
131
|
-
| `ERR_INVALID_ARGUMENT`
|
|
132
|
-
| `ERR_MISSING_ARGUMENT`
|
|
133
|
-
| `ERR_INVALID_LANG`
|
|
134
|
-
| `ERR_INVALID_DETAIL`
|
|
135
|
-
| `ERR_NODE_VERSION`
|
|
136
|
-
| `ERR_CORE_NOT_FOUND`
|
|
137
|
-
| `ERR_UNKNOWN_COMPONENT`
|
|
138
|
-
| `ERR_UNKNOWN_HOOK`
|
|
139
|
-
| `ERR_UNKNOWN_TOPIC`
|
|
140
|
-
| `ERR_UNKNOWN_SECTION`
|
|
141
|
-
| `ERR_UNKNOWN_CATEGORY`
|
|
142
|
-
| `ERR_UNKNOWN_TEMPLATE`
|
|
143
|
-
| `ERR_UNKNOWN_PACKAGE`
|
|
144
|
-
| `ERR_UNKNOWN_AGENT`
|
|
145
|
-
| `ERR_UNKNOWN_FEATURE`
|
|
146
|
-
| `ERR_UNKNOWN_CODEMOD`
|
|
147
|
-
| `ERR_NOT_FOUND`
|
|
148
|
-
| `ERR_NO_DOC`
|
|
149
|
-
| `ERR_NO_SHOWCASE`
|
|
150
|
-
| `ERR_NO_SOURCE`
|
|
151
|
-
| `ERR_INVALID_DOC`
|
|
152
|
-
| `ERR_FILE_NOT_FOUND`
|
|
153
|
-
| `ERR_FILE_EXISTS`
|
|
154
|
-
| `ERR_PATH_TRAVERSAL`
|
|
155
|
-
| `ERR_WRITE_FAILED`
|
|
156
|
-
| `ERR_THEME_INVALID`
|
|
157
|
-
| `ERR_THEME_LOAD`
|
|
158
|
-
| `ERR_TEMPLATE_CONFIG`
|
|
159
|
-
| `ERR_TEMPLATE_GET`
|
|
160
|
-
| `ERR_VERSION_DETECT`
|
|
161
|
-
| `ERR_INVALID_VERSION`
|
|
162
|
-
| `ERR_DEP_MISSING`
|
|
163
|
-
| `ERR_GH_CLI`
|
|
164
|
-
| `ERR_GAP_REPORT_FAILED`
|
|
125
|
+
| Code | Meaning |
|
|
126
|
+
| ------------------------ | -------------------------------------------------------------------------------------- |
|
|
127
|
+
| `ERR_UNKNOWN` | Generic fallback for any error without a more specific code. |
|
|
128
|
+
| `ERR_UNKNOWN_COMMAND` | A top-level command name was not recognized (e.g. `astryx bogus`). |
|
|
129
|
+
| `ERR_UNKNOWN_SUBCOMMAND` | A subcommand under a group was not recognized (e.g. `astryx theme bogus`). |
|
|
130
|
+
| `ERR_INVALID_OPTION` | An unknown flag was passed, or `--json` was used on a command that doesn't support it. |
|
|
131
|
+
| `ERR_INVALID_ARGUMENT` | An option/argument value was rejected, or required flags were missing. |
|
|
132
|
+
| `ERR_MISSING_ARGUMENT` | A required positional argument was omitted (e.g. `astryx theme build` with no file). |
|
|
133
|
+
| `ERR_INVALID_LANG` | `--lang` was given a value outside its choices (`en`, `zh`, `dense`). |
|
|
134
|
+
| `ERR_INVALID_DETAIL` | `--detail` was given a value outside its choices (`full`, `compact`, `brief`). |
|
|
135
|
+
| `ERR_NODE_VERSION` | The running Node.js version is below the supported minimum. |
|
|
136
|
+
| `ERR_CORE_NOT_FOUND` | `@astryxdesign/core` could not be located (not installed / not in a monorepo). |
|
|
137
|
+
| `ERR_UNKNOWN_COMPONENT` | No component matched the requested name. |
|
|
138
|
+
| `ERR_UNKNOWN_HOOK` | No hook matched the requested name. |
|
|
139
|
+
| `ERR_UNKNOWN_TOPIC` | No docs topic matched the requested name. |
|
|
140
|
+
| `ERR_UNKNOWN_SECTION` | A docs topic exists but the requested section within it does not. |
|
|
141
|
+
| `ERR_UNKNOWN_CATEGORY` | A `--category` filter value did not match any known category. |
|
|
142
|
+
| `ERR_UNKNOWN_TEMPLATE` | No template matched the requested name. |
|
|
143
|
+
| `ERR_UNKNOWN_PACKAGE` | No package matched the requested name (discover). |
|
|
144
|
+
| `ERR_UNKNOWN_AGENT` | An unrecognized `--agent` value was passed (agent docs / init). |
|
|
145
|
+
| `ERR_UNKNOWN_FEATURE` | An unrecognized `--features` value was passed to `init`. |
|
|
146
|
+
| `ERR_UNKNOWN_CODEMOD` | A `--codemod` value did not match any registered codemod (upgrade). |
|
|
147
|
+
| `ERR_NOT_FOUND` | A discover/lookup query matched nothing in any package. |
|
|
148
|
+
| `ERR_NO_DOC` | A component exists but has no typed `.doc.mjs` file. |
|
|
149
|
+
| `ERR_NO_SHOWCASE` | No showcase exists for the requested component. |
|
|
150
|
+
| `ERR_NO_SOURCE` | No source file could be located for the component/template. |
|
|
151
|
+
| `ERR_INVALID_DOC` | A component's docs failed validation (malformed `.doc.mjs`). |
|
|
152
|
+
| `ERR_FILE_NOT_FOUND` | A required input file did not exist. |
|
|
153
|
+
| `ERR_FILE_EXISTS` | Refused to overwrite an existing file in non-interactive mode. |
|
|
154
|
+
| `ERR_PATH_TRAVERSAL` | A path escaped its allowed root, or a name contained traversal markers. |
|
|
155
|
+
| `ERR_WRITE_FAILED` | Writing output files failed (and was rolled back). |
|
|
156
|
+
| `ERR_THEME_INVALID` | A theme definition was missing a required property (e.g. `name`). |
|
|
157
|
+
| `ERR_THEME_LOAD` | A theme file could not be loaded / parsed into a `defineTheme` result. |
|
|
158
|
+
| `ERR_TEMPLATE_CONFIG` | `template.get` is not configured in `astryx.config.mjs` (fetch-by-id). |
|
|
159
|
+
| `ERR_TEMPLATE_GET` | A configured `template.get` threw or returned an invalid value. |
|
|
160
|
+
| `ERR_VERSION_DETECT` | The current `@astryxdesign/core` version could not be detected. |
|
|
161
|
+
| `ERR_INVALID_VERSION` | A `--from`/`--to` value was not a valid semver string. |
|
|
162
|
+
| `ERR_DEP_MISSING` | A required external dependency (e.g. jscodeshift) is missing. |
|
|
163
|
+
| `ERR_GH_CLI` | GitHub CLI (`gh`) is not installed or not authenticated. |
|
|
164
|
+
| `ERR_GAP_REPORT_FAILED` | Filing a gap report failed (disabled, or the integration errored). |
|
|
165
165
|
|
|
166
166
|
## Capability manifest (agent discovery)
|
|
167
167
|
|
|
@@ -186,25 +186,59 @@ Shape:
|
|
|
186
186
|
"version": "0.0.14",
|
|
187
187
|
"description": "Design system CLI — components, themes, and tooling",
|
|
188
188
|
"globalOptions": [
|
|
189
|
-
{
|
|
190
|
-
|
|
191
|
-
|
|
189
|
+
{
|
|
190
|
+
"flag": "--json",
|
|
191
|
+
"type": "boolean",
|
|
192
|
+
"description": "Output as typed JSON…",
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"flag": "--lang <locale>",
|
|
196
|
+
"type": "enum",
|
|
197
|
+
"choices": ["en", "zh", "dense"],
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"flag": "--detail <level>",
|
|
201
|
+
"type": "enum",
|
|
202
|
+
"choices": ["full", "compact", "brief"],
|
|
203
|
+
"default": "full",
|
|
204
|
+
},
|
|
192
205
|
],
|
|
193
206
|
"commands": [
|
|
194
207
|
{
|
|
195
208
|
"name": "component",
|
|
196
209
|
"description": "List components or print component docs",
|
|
197
|
-
"arguments": [
|
|
198
|
-
|
|
210
|
+
"arguments": [
|
|
211
|
+
{
|
|
212
|
+
"name": "name",
|
|
213
|
+
"required": false,
|
|
214
|
+
"variadic": false,
|
|
215
|
+
"description": "",
|
|
216
|
+
},
|
|
217
|
+
],
|
|
218
|
+
"options": [
|
|
219
|
+
{
|
|
220
|
+
"flag": "--props",
|
|
221
|
+
"type": "boolean",
|
|
222
|
+
"description": "Print only the props table",
|
|
223
|
+
},
|
|
224
|
+
],
|
|
199
225
|
"json": true,
|
|
200
|
-
"responseTypes": [
|
|
201
|
-
|
|
202
|
-
|
|
226
|
+
"responseTypes": [
|
|
227
|
+
"component.list",
|
|
228
|
+
"component.detail",
|
|
229
|
+
"component.detail.props",
|
|
230
|
+
"…",
|
|
231
|
+
],
|
|
232
|
+
"examples": ["astryx component Button --props --json"],
|
|
233
|
+
},
|
|
203
234
|
// …one entry per command; subcommands (e.g. `theme build`) nest under `subcommands`
|
|
204
235
|
],
|
|
205
236
|
"jsonSupported": ["component", "docs", "…"],
|
|
206
|
-
"responseTypes": {
|
|
207
|
-
|
|
237
|
+
"responseTypes": {
|
|
238
|
+
"component": ["component.list", "…"],
|
|
239
|
+
"theme build": ["theme.build"],
|
|
240
|
+
},
|
|
241
|
+
},
|
|
208
242
|
}
|
|
209
243
|
```
|
|
210
244
|
|
|
@@ -225,7 +259,15 @@ For the standalone manifest envelope (`type: "manifest"`), use `astryx manifest
|
|
|
225
259
|
The same logic that powers `xds --json` is available as importable, type-safe functions:
|
|
226
260
|
|
|
227
261
|
```typescript
|
|
228
|
-
import {
|
|
262
|
+
import {
|
|
263
|
+
component,
|
|
264
|
+
docs,
|
|
265
|
+
discover,
|
|
266
|
+
template,
|
|
267
|
+
hook,
|
|
268
|
+
search,
|
|
269
|
+
AstryxError,
|
|
270
|
+
} from '@astryxdesign/cli/api';
|
|
229
271
|
|
|
230
272
|
// Same result as: xds --json component Button
|
|
231
273
|
const btn = await component('Button');
|
|
@@ -341,7 +383,7 @@ astryx doctor — diagnosing your setup
|
|
|
341
383
|
@astryxdesign/core v0.0.14 is in step with @astryxdesign/cli v0.0.14.
|
|
342
384
|
⚠ Theme packages
|
|
343
385
|
No @astryxdesign/theme-* packages are installed.
|
|
344
|
-
→ fix: Install a theme, e.g. `npm install @astryxdesign/theme-
|
|
386
|
+
→ fix: Install a theme, e.g. `npm install @astryxdesign/theme-neutral`, then import its CSS or set xds.theme.
|
|
345
387
|
ℹ astryx.config.mjs
|
|
346
388
|
No astryx.config.mjs found — using defaults.
|
|
347
389
|
ℹ AI agent docs
|
|
@@ -359,16 +401,16 @@ No failures — but review the ⚠ warnings above when you can.
|
|
|
359
401
|
|
|
360
402
|
### Checks
|
|
361
403
|
|
|
362
|
-
| Check
|
|
363
|
-
|
|
|
364
|
-
| Node.js version
|
|
365
|
-
| @astryxdesign/core installed
|
|
366
|
-
| Version alignment
|
|
367
|
-
| Theme packages
|
|
368
|
-
| astryx.config.mjs
|
|
369
|
-
| AI agent docs
|
|
370
|
-
| Peer dependencies
|
|
371
|
-
| Package manager
|
|
404
|
+
| Check | Status it can return | What it verifies |
|
|
405
|
+
| ---------------------------- | -------------------- | -------------------------------------------------------------------- |
|
|
406
|
+
| Node.js version | pass / fail | Running Node meets the CLI's minimum |
|
|
407
|
+
| @astryxdesign/core installed | pass / fail | `@astryxdesign/core` is resolvable from the project |
|
|
408
|
+
| Version alignment | pass / warn / info | Installed `@astryxdesign/core` is in step with `@astryxdesign/cli` |
|
|
409
|
+
| Theme packages | pass / warn | An `@astryxdesign/theme-*` package is installed and a theme is wired |
|
|
410
|
+
| astryx.config.mjs | pass / fail / info | Config (if present) loads cleanly with a valid shape |
|
|
411
|
+
| AI agent docs | pass / warn / info | Agent docs exist and contain the XDS section markers |
|
|
412
|
+
| Peer dependencies | pass / warn / info | `@astryxdesign/core`'s peer deps (react, …) are installed |
|
|
413
|
+
| Package manager | info | Reports the detected package manager |
|
|
372
414
|
|
|
373
415
|
### CI gate
|
|
374
416
|
|
package/bin/astryx.mjs
CHANGED
|
@@ -12,10 +12,25 @@
|
|
|
12
12
|
//
|
|
13
13
|
// `node-version.mjs` is intentionally dependency-free so it loads on the
|
|
14
14
|
// unsupported runtimes this guard protects against.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
//
|
|
16
|
+
// Sibling `src/` modules are resolved by this bin's REAL path. When the CLI is
|
|
17
|
+
// installed as a package, `npx astryx` runs this file through the
|
|
18
|
+
// `node_modules/.bin/astryx` symlink, and some Node versions resolve relative
|
|
19
|
+
// specifiers from the symlink's directory (→ `node_modules/src/...`) rather
|
|
20
|
+
// than the real package — breaking bare `../src/...` imports with a cryptic
|
|
21
|
+
// ERR_MODULE_NOT_FOUND. realpath-ing `import.meta.url` makes these imports
|
|
22
|
+
// resolve correctly however the bin is invoked (symlink, copy, or Windows
|
|
23
|
+
// shim). Uses only built-ins, so the version gate below still runs first.
|
|
24
|
+
import {fileURLToPath, pathToFileURL} from 'node:url';
|
|
25
|
+
import {realpathSync} from 'node:fs';
|
|
26
|
+
import {dirname, join} from 'node:path';
|
|
27
|
+
|
|
28
|
+
const binDir = dirname(realpathSync(fileURLToPath(import.meta.url)));
|
|
29
|
+
const importSrc = rel =>
|
|
30
|
+
import(pathToFileURL(join(binDir, '..', 'src', rel)).href);
|
|
31
|
+
|
|
32
|
+
const {isNodeVersionSupported, unsupportedNodeMessage} =
|
|
33
|
+
await importSrc('lib/node-version.mjs');
|
|
19
34
|
|
|
20
35
|
if (!isNodeVersionSupported(process.versions.node)) {
|
|
21
36
|
const msg = unsupportedNodeMessage(process.versions.node);
|
|
@@ -39,9 +54,9 @@ if (!isNodeVersionSupported(process.versions.node)) {
|
|
|
39
54
|
|
|
40
55
|
// Imports that transitively load `styleText` must happen AFTER the gate above,
|
|
41
56
|
// so they are dynamically imported here rather than at the top of the module.
|
|
42
|
-
const {program} = await
|
|
43
|
-
const {isJsonMode, toErrorEnvelope} = await
|
|
44
|
-
const {handleCommanderError} = await
|
|
57
|
+
const {program} = await importSrc('index.mjs');
|
|
58
|
+
const {isJsonMode, toErrorEnvelope} = await importSrc('lib/json.mjs');
|
|
59
|
+
const {handleCommanderError} = await importSrc('lib/json-shim.mjs');
|
|
45
60
|
|
|
46
61
|
/**
|
|
47
62
|
* Top-level error boundary (contract guarantee #4): an uncaught throw must
|
|
@@ -21,7 +21,7 @@ export const docs = {
|
|
|
21
21
|
type: 'code',
|
|
22
22
|
lang: 'text',
|
|
23
23
|
label: 'Paste this into your AI',
|
|
24
|
-
code: 'Install @astryxdesign/core, @astryxdesign/theme-
|
|
24
|
+
code: 'Install @astryxdesign/core, @astryxdesign/theme-neutral, and @astryxdesign/cli in this project. Run `npx astryx init` to set up agent docs. Read the generated files to learn the conventions.',
|
|
25
25
|
},
|
|
26
26
|
],
|
|
27
27
|
},
|
|
@@ -36,7 +36,7 @@ export const docs = {
|
|
|
36
36
|
type: 'code',
|
|
37
37
|
lang: 'bash',
|
|
38
38
|
label: 'Terminal',
|
|
39
|
-
code: `npm install @astryxdesign/core @astryxdesign/theme-
|
|
39
|
+
code: `npm install @astryxdesign/core @astryxdesign/theme-neutral @astryxdesign/cli`,
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
type: 'prose',
|
|
@@ -63,11 +63,11 @@ export const docs = {
|
|
|
63
63
|
label: 'globals.css',
|
|
64
64
|
code: `@import '@astryxdesign/core/reset.css';
|
|
65
65
|
@import '@astryxdesign/core/astryx.css';
|
|
66
|
-
@import '@astryxdesign/theme-
|
|
66
|
+
@import '@astryxdesign/theme-neutral/theme.css';`,
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
type: 'prose',
|
|
70
|
-
text: 'Available themes: @astryxdesign/theme-
|
|
70
|
+
text: 'Available themes: @astryxdesign/theme-neutral (muted minimal, a good starting point), @astryxdesign/theme-butter, @astryxdesign/theme-chocolate, @astryxdesign/theme-gothic (dark-only), @astryxdesign/theme-matcha, @astryxdesign/theme-stone, and @astryxdesign/theme-y2k. See `npx astryx docs theme` for the full theming guide.',
|
|
71
71
|
},
|
|
72
72
|
],
|
|
73
73
|
},
|
|
@@ -88,7 +88,7 @@ import {VStack} from '@astryxdesign/core/Layout';
|
|
|
88
88
|
export default function Page() {
|
|
89
89
|
return (
|
|
90
90
|
<VStack gap={2}>
|
|
91
|
-
<Button label="Hello
|
|
91
|
+
<Button label="Hello Astryx" onClick={() => alert('Hi!')} />
|
|
92
92
|
</VStack>
|
|
93
93
|
);
|
|
94
94
|
}`,
|
|
@@ -96,11 +96,11 @@ export default function Page() {
|
|
|
96
96
|
],
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
|
-
title: 'Customize with
|
|
99
|
+
title: 'Customize with StyleX',
|
|
100
100
|
content: [
|
|
101
101
|
{
|
|
102
102
|
type: 'prose',
|
|
103
|
-
text: '
|
|
103
|
+
text: 'Astryx components support various styling solutions, from plain CSS and `className` to Tailwind and CSS-in-JS. See the [styling docs](/docs/styling) for the full guide. Astryx also has a deep integration with [StyleX](https://stylexjs.com/), an atomic CSS-in-JS library: create styles with `stylex.create()` and pass them to components with the `xstyle` prop.',
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
type: 'code',
|
|
@@ -127,19 +127,19 @@ const overrides = stylex.create({
|
|
|
127
127
|
type: 'table',
|
|
128
128
|
headers: ['Example', 'Stack', 'Path'],
|
|
129
129
|
rows: [
|
|
130
|
-
['Next.js', 'Next.js + theme CSS', 'apps/example-nextjs'],
|
|
131
|
-
['Next.js + StyleX', 'Next.js + StyleX for custom styles', 'apps/example-nextjs-stylex'],
|
|
132
|
-
['Next.js + Tailwind', 'Next.js + Tailwind bridge', 'apps/example-nextjs-tailwind'],
|
|
133
|
-
['Next.js Source', 'Next.js importing from source', 'apps/example-nextjs-source'],
|
|
134
|
-
['Vite', 'Vite', 'apps/example-vite'],
|
|
130
|
+
['Next.js', 'Next.js + theme CSS', '[apps/example-nextjs](https://github.com/facebook/astryx/tree/main/apps/example-nextjs)'],
|
|
131
|
+
['Next.js + StyleX', 'Next.js + StyleX for custom styles', '[apps/example-nextjs-stylex](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-stylex)'],
|
|
132
|
+
['Next.js + Tailwind', 'Next.js + Tailwind bridge', '[apps/example-nextjs-tailwind](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-tailwind)'],
|
|
133
|
+
['Next.js Source', 'Next.js importing from source', '[apps/example-nextjs-source](https://github.com/facebook/astryx/tree/main/apps/example-nextjs-source)'],
|
|
134
|
+
['Vite', 'Vite', '[apps/example-vite](https://github.com/facebook/astryx/tree/main/apps/example-vite)'],
|
|
135
135
|
],
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
type: 'code',
|
|
139
139
|
lang: 'bash',
|
|
140
140
|
label: 'Clone and run an example',
|
|
141
|
-
code: `git clone https://github.com/
|
|
142
|
-
cd
|
|
141
|
+
code: `git clone https://github.com/facebook/astryx.git
|
|
142
|
+
cd astryx/apps/example-nextjs
|
|
143
143
|
pnpm install
|
|
144
144
|
pnpm dev`,
|
|
145
145
|
},
|
|
@@ -157,7 +157,7 @@ pnpm dev`,
|
|
|
157
157
|
lang: 'json',
|
|
158
158
|
label: 'package.json',
|
|
159
159
|
code: `"scripts": {
|
|
160
|
-
"
|
|
160
|
+
"astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
|
|
161
161
|
}`,
|
|
162
162
|
},
|
|
163
163
|
{
|
package/docs/icons.doc.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* @file Icons reference doc: semantic icon names available in
|
|
4
|
+
* @file Icons reference doc: semantic icon names available in Astryx
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/** @type {import('../../core/src/docs-types').ReferenceDoc} */
|
package/docs/migration.doc.mjs
CHANGED
|
@@ -91,15 +91,15 @@ npx astryx component Button --json`,
|
|
|
91
91
|
lang: 'tsx',
|
|
92
92
|
label: 'Root provider with explicit mode',
|
|
93
93
|
code: `import {Theme} from '@astryxdesign/core/theme';
|
|
94
|
-
import {
|
|
94
|
+
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
|
|
95
95
|
import {useState} from 'react';
|
|
96
|
-
import '@astryxdesign/theme-
|
|
96
|
+
import '@astryxdesign/theme-neutral/theme.css';
|
|
97
97
|
|
|
98
98
|
export function AppRoot({children}: {children: React.ReactNode}) {
|
|
99
99
|
const [mode, setMode] = useState<'system' | 'light' | 'dark'>('system');
|
|
100
100
|
|
|
101
101
|
return (
|
|
102
|
-
<Theme theme={
|
|
102
|
+
<Theme theme={neutralTheme} mode={mode}>
|
|
103
103
|
<SettingsContext.Provider value={{mode, setMode}}>
|
|
104
104
|
{children}
|
|
105
105
|
</SettingsContext.Provider>
|
|
@@ -121,7 +121,7 @@ export function AppRoot({children}: {children: React.ReactNode}) {
|
|
|
121
121
|
@import "tailwindcss/preflight.css" layer(base);
|
|
122
122
|
@import "@astryxdesign/core/reset.css";
|
|
123
123
|
@import "@astryxdesign/core/astryx.css";
|
|
124
|
-
@import "@astryxdesign/theme-
|
|
124
|
+
@import "@astryxdesign/theme-neutral/theme.css";
|
|
125
125
|
@import "@astryxdesign/core/tailwind-theme.css";
|
|
126
126
|
@import "tailwindcss/utilities.css" layer(utilities);`,
|
|
127
127
|
},
|
|
@@ -234,7 +234,7 @@ export function AppRoot({children}: {children: React.ReactNode}) {
|
|
|
234
234
|
type: 'code',
|
|
235
235
|
lang: 'text',
|
|
236
236
|
label: 'Paste this into your AI',
|
|
237
|
-
code: `We are migrating this existing Tailwind/shadcn app to
|
|
237
|
+
code: `We are migrating this existing Tailwind/shadcn app to Astryx incrementally.
|
|
238
238
|
|
|
239
239
|
First run:
|
|
240
240
|
- npx astryx docs migration --dense
|
|
@@ -242,7 +242,7 @@ First run:
|
|
|
242
242
|
- npx astryx docs styling --dense
|
|
243
243
|
- npx astryx template AppShellTopNavWithSideNav --skeleton
|
|
244
244
|
|
|
245
|
-
Then migrate one route or shell surface at a time. Keep business logic and routing intact. Replace shadcn/Radix/Tailwind primitives with
|
|
245
|
+
Then migrate one route or shell surface at a time. Keep business logic and routing intact. Replace shadcn/Radix/Tailwind primitives with Astryx components, remove hardcoded colors, verify light and dark mode, and take screenshots before moving to the next surface.`,
|
|
246
246
|
},
|
|
247
247
|
],
|
|
248
248
|
},
|
package/docs/shape.doc.mjs
CHANGED
|
@@ -44,7 +44,7 @@ export const docs = {
|
|
|
44
44
|
type: 'code',
|
|
45
45
|
lang: 'css',
|
|
46
46
|
label: 'Concentric radius formula',
|
|
47
|
-
code: `/* Automatic in
|
|
47
|
+
code: `/* Automatic in Astryx Card */
|
|
48
48
|
--card-concentric-radius: max(0px, calc(var(--_card-radius) - var(--card-padding)));`,
|
|
49
49
|
},
|
|
50
50
|
],
|
|
@@ -162,7 +162,7 @@ const styles = stylex.create({
|
|
|
162
162
|
@import "tailwindcss/preflight.css" layer(base);
|
|
163
163
|
@import "@astryxdesign/core/reset.css";
|
|
164
164
|
@import "@astryxdesign/core/astryx.css";
|
|
165
|
-
@import "@astryxdesign/theme-
|
|
165
|
+
@import "@astryxdesign/theme-neutral/theme.css";
|
|
166
166
|
@import "@astryxdesign/core/tailwind-theme.css";
|
|
167
167
|
@import "tailwindcss/utilities.css" layer(utilities);`,
|
|
168
168
|
},
|
|
@@ -374,9 +374,9 @@ tokens: {
|
|
|
374
374
|
lang: 'ts',
|
|
375
375
|
label: 'Resolve tokens without React context',
|
|
376
376
|
code: `import {resolveThemeTokens} from '@astryxdesign/core/theme/tokens';
|
|
377
|
-
import {
|
|
377
|
+
import {neutralTheme} from '@astryxdesign/theme-neutral';
|
|
378
378
|
|
|
379
|
-
const tokens = resolveThemeTokens(
|
|
379
|
+
const tokens = resolveThemeTokens(neutralTheme, {mode: 'light'});
|
|
380
380
|
|
|
381
381
|
const chartOptions = {
|
|
382
382
|
textColor: tokens['--color-text-primary'],
|
package/docs/styling.doc.mjs
CHANGED
|
@@ -22,9 +22,8 @@ export const docs = {
|
|
|
22
22
|
type: 'table',
|
|
23
23
|
headers: ['Approach', 'Use for', 'Example'],
|
|
24
24
|
rows: [
|
|
25
|
-
['
|
|
25
|
+
['StyleX', 'Component-specific overrides, reusable styles, pseudo-classes, and typed tokens', 'const styles = stylex.create(...); <Button xstyle={styles.save} />'],
|
|
26
26
|
['Tailwind utilities', 'Layout, wrappers, and utility styling', 'className="flex gap-3 p-4"'],
|
|
27
|
-
['stylex.create', 'Reusable styles, pseudo-classes, typed tokens', 'stylex.create({ card: { ... } })'],
|
|
28
27
|
['className', 'Integrating with external CSS or Tailwind on components', 'className="my-card shadow-lg"'],
|
|
29
28
|
['Styling-library token aliases', 'Keeping Panda, Chakra, MUI, Emotion, styled-components, UnoCSS, CSS Modules, or Sass in sync with the system', "colors.surface = 'var(--color-background-surface)'"],
|
|
30
29
|
],
|
|
@@ -104,7 +103,7 @@ const overrides = stylex.create({
|
|
|
104
103
|
@import "tailwindcss/preflight.css" layer(base);
|
|
105
104
|
@import "@astryxdesign/core/reset.css";
|
|
106
105
|
@import "@astryxdesign/core/astryx.css";
|
|
107
|
-
@import "@astryxdesign/theme-
|
|
106
|
+
@import "@astryxdesign/theme-neutral/theme.css";
|
|
108
107
|
@import "@astryxdesign/core/tailwind-theme.css";
|
|
109
108
|
@import "tailwindcss/utilities.css" layer(utilities);`,
|
|
110
109
|
},
|
|
@@ -232,7 +231,7 @@ const overrides = stylex.create({
|
|
|
232
231
|
content: [
|
|
233
232
|
{
|
|
234
233
|
type: 'prose',
|
|
235
|
-
text: 'When external CSS needs to target an
|
|
234
|
+
text: 'When external CSS needs to target an Astryx component by prop or state, combine the stable component class with reflected data attributes. The component class identifies the component (`.astryx-button`, `.astryx-card`); data attributes identify the axis and value (`data-variant`, `data-size`, `data-level`, etc.). This is the preferred selector surface for new CSS because it is explicit and collision-resistant.',
|
|
236
235
|
},
|
|
237
236
|
{
|
|
238
237
|
type: 'code',
|
|
@@ -274,7 +273,7 @@ const overrides = stylex.create({
|
|
|
274
273
|
content: [
|
|
275
274
|
{
|
|
276
275
|
type: 'prose',
|
|
277
|
-
text: '
|
|
276
|
+
text: 'Astryx still emits legacy bare prop/state classes such as `.primary`, `.sm`, `.level-2`, and `.checked` for compatibility with existing apps and built themes. Do not write new CSS against these bare classes. The stable base component classes (`.astryx-button`, `.astryx-card`, etc.) are not deprecated; only the unprefixed prop/state classes are the legacy surface.',
|
|
278
277
|
},
|
|
279
278
|
{
|
|
280
279
|
type: 'code',
|
package/docs/theme.doc.dense.mjs
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
export const docsDense = {
|
|
6
6
|
description: 'Theme provider, custom themes, light/dark, component overrides',
|
|
7
7
|
sections: [
|
|
8
|
-
{ title: 'Quick Start', content: [null, null, { type: 'prose', text: 'default import = runtime injection. /built import = pre-compiled CSS (pair with theme.css).' }] },
|
|
9
|
-
{ title: 'Themes', content: [null, { type: 'prose', text: '@astryxdesign/theme-{name} = source (runtime). @astryxdesign/theme-{name}/built = optimized (+ theme.css).' }] },
|
|
8
|
+
{ title: 'Quick Start', content: [null, null, null, null, { type: 'prose', text: 'default import = runtime injection. /built import = pre-compiled CSS (pair with theme.css).' }] },
|
|
9
|
+
{ 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
|
{ title: 'Props', content: [null] },
|
|
11
11
|
{ title: 'Custom Theme', content: [{ type: 'prose', text: 'CLI wizard or manual defineTheme. only override tokens that differ.' }, null] },
|
|
12
12
|
{ 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] },
|