hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-12 13:18:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename style pack source files

Browse Source
This commit is contained in:
Ronan Berder
2026-06-03 23:20:23 +08:00
parent c1cf01da45
commit 1268f5a146
27 changed files with 52935 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+21 -21
View File
@@ -18,7 +18,7 @@ Basecoat is not a literal DOM port of shadcn/ui. It is an alternative implementa
- Edit sources only:
- `src/css/base/base.css` – Shared base layer, tokens, and semantic utility classes
- `src/css/components/*.css` – Component CSS classes (Tailwind + custom)
- `src/css/styles/style-*.css` – Style-pack visual rules (`vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`)
- `src/css/styles/*.css` – Style-pack visual rules (`vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`)
- `src/css/basecoat.css` – Aggregate CSS entrypoint
- `src/js/*.js` – Individual component JS files (kebab-case, ESM) + `basecoat.js` (component registry)
- `src/nunjucks/*.njk` and `src/jinja/*.html.jinja` – Component template macros
@@ -41,17 +41,17 @@ Basecoat is not a literal DOM port of shadcn/ui. It is an alternative implementa
- Basecoat keeps its own component class API (`btn`, `dialog`, `popover`, etc.). Do not introduce shadcn `cn-*` classes into Basecoat source.
- Shadcn/ui style packs are used as reference material, but must be mapped onto Basecoat markup and selectors.
- Style-pack architecture is one file per style:
- `src/css/styles/style-vega.css`
- `src/css/styles/style-nova.css`
- `src/css/styles/style-maia.css`
- `src/css/styles/style-lyra.css`
- `src/css/styles/style-mira.css`
- `src/css/styles/style-luma.css`
- `src/css/styles/style-sera.css`
- `src/css/styles/style-rhea.css`
- `src/css/styles/vega.css`
- `src/css/styles/nova.css`
- `src/css/styles/maia.css`
- `src/css/styles/lyra.css`
- `src/css/styles/mira.css`
- `src/css/styles/luma.css`
- `src/css/styles/sera.css`
- `src/css/styles/rhea.css`
- `basecoat.css` and the default CDN bundle remain Vega-compatible for Basecoat backward compatibility. This is a Basecoat compatibility decision; upstream shadcn/ui's current default generated config is Nova.
- Non-default styles must be selected through standalone style bundles (`basecoat-<style>.css`, `basecoat-<style>.cdn.css`, or docs `styles-<style>.css`). Do not load Vega/default first and then layer another style file on top.
- Split style files under `src/css/styles/style-*.css` are for source organization and advanced composition only. They must map upstream style intent directly and should not contain defensive resets whose only purpose is undoing another style pack.
- Split style files under `src/css/styles/*.css` are for source organization and advanced composition only. They must map upstream style intent directly and should not contain defensive resets whose only purpose is undoing another style pack.
- During migration, each component must be reviewed in two layers:
- shared/base component CSS
- style-pack CSS visual rules
@@ -108,7 +108,7 @@ Basecoat is not a literal DOM port of shadcn/ui. It is an alternative implementa
## CSS architecture rules
- Shared component CSS in `src/css/components/*.css` should own structure, layout primitives, accessibility selectors, and behavior hooks.
- Style-pack CSS in `src/css/styles/style-*.css` should own visual choices:
- Style-pack CSS in `src/css/styles/*.css` should own visual choices:
- color
- radius
- shadow/ring
@@ -218,14 +218,14 @@ For each component migration, follow this sequence:
- avoid `!important` unless upstream behavior or Basecoat markup truly requires it
9. Implement or update the component section in:
- `src/css/components/<component>.css`
- `src/css/styles/style-vega.css`
- `src/css/styles/style-nova.css`
- `src/css/styles/style-maia.css`
- `src/css/styles/style-lyra.css`
- `src/css/styles/style-mira.css`
- `src/css/styles/style-luma.css`
- `src/css/styles/style-sera.css`
- `src/css/styles/style-rhea.css`
- `src/css/styles/vega.css`
- `src/css/styles/nova.css`
- `src/css/styles/maia.css`
- `src/css/styles/lyra.css`
- `src/css/styles/mira.css`
- `src/css/styles/luma.css`
- `src/css/styles/sera.css`
- `src/css/styles/rhea.css`
10. Document any non-trivial difference from upstream as either:
- intentional
- drift fixed
@@ -254,7 +254,7 @@ Per-component file checklist:
4. Upstream base component: `../_sandbox/shadcn-ui/apps/v4/registry/bases/base/ui/<component>.tsx`
5. Upstream docs page: `../_sandbox/shadcn-ui/apps/v4/content/docs/components/{base,radix}/<component>.mdx`
6. Upstream styles: `../_sandbox/shadcn-ui/apps/v4/registry/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
7. Basecoat styles: `src/css/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
7. Basecoat styles: `src/css/styles/{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
## Conventions
@@ -298,7 +298,7 @@ Examples:
## Common tasks
- Update a component's CSS/JS: Edit `src/css/basecoat.css` and/or `src/js/*.js`.
- Update a component's CSS/JS: Edit the relevant file in `src/css/components/*.css`, `src/css/styles/style-*.css`, and/or `src/js/*.js`.
- Update a component's CSS/JS: Edit the relevant file in `src/css/components/*.css`, `src/css/styles/*.css`, and/or `src/js/*.js`.
- Update a component template: Edit `src/nunjucks/*.njk` and/or `src/jinja/*.html.jinja`.
- Add a new component: Create JS, CSS, templates, and docs page under `docs/src/components/*.md`.
- Update navigation: Edit files in `docs/src/_includes/partials/`.
docs/src/assets/styles-luma.css
+8841 -1
View File
File diff suppressed because one or more lines are too long
docs/src/assets/styles-lyra.css
+8782 -1
View File
File diff suppressed because one or more lines are too long
docs/src/assets/styles-maia.css
+8778 -1
View File
File diff suppressed because one or more lines are too long
docs/src/assets/styles-mira.css
+8836 -1
View File
File diff suppressed because one or more lines are too long
docs/src/assets/styles-nova.css
+8837 -1
View File
File diff suppressed because one or more lines are too long
docs/src/assets/styles-vega.css
+8790 -1
View File
File diff suppressed because one or more lines are too long
handoff.md
+18 -18
View File
@@ -30,7 +30,7 @@ The earlier five-style assumption was wrong. Luma, Sera, and Rhea are current up
- Basecoat docs page: `docs/src/components/<component>.md`
- Upstream base component: `../_sandbox/shadcn-ui/apps/v4/registry/bases/base/ui/<component>.tsx`
- Upstream styles: `../_sandbox/shadcn-ui/apps/v4/registry/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
- Basecoat styles: `src/css/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
- Basecoat styles: `src/css/styles/{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
## Required Process
@@ -54,7 +54,7 @@ Do not mark a component done just because CSS compiles.
- Split CSS source into:
- `src/css/base/base.css`
- `src/css/components/*.css`
- `src/css/styles/style-*.css`
- `src/css/styles/*.css`
- Kept `src/css/basecoat.css` as the backward-compatible default aggregate.
- Added `src/css/basecoat.all.css` as an explicit all-in-one Tailwind source.
- Updated `scripts/build.js` to copy split CSS folders into `packages/css/dist`.
@@ -71,14 +71,14 @@ Do not mark a component done just because CSS compiles.
- `docs/css/style-sera.css`
- `docs/css/style-rhea.css`
- Added Basecoat style files for all eight upstream styles:
- `src/css/styles/style-vega.css`
- `src/css/styles/style-nova.css`
- `src/css/styles/style-maia.css`
- `src/css/styles/style-lyra.css`
- `src/css/styles/style-mira.css`
- `src/css/styles/style-luma.css`
- `src/css/styles/style-sera.css`
- `src/css/styles/style-rhea.css`
- `src/css/styles/vega.css`
- `src/css/styles/nova.css`
- `src/css/styles/maia.css`
- `src/css/styles/lyra.css`
- `src/css/styles/mira.css`
- `src/css/styles/luma.css`
- `src/css/styles/sera.css`
- `src/css/styles/rhea.css`
## Button Status
@@ -87,14 +87,14 @@ Button is the only component with style-pack sections currently present.
Files involved:
- `src/css/components/button.css`
- `src/css/styles/style-vega.css`
- `src/css/styles/style-nova.css`
- `src/css/styles/style-maia.css`
- `src/css/styles/style-lyra.css`
- `src/css/styles/style-mira.css`
- `src/css/styles/style-luma.css`
- `src/css/styles/style-sera.css`
- `src/css/styles/style-rhea.css`
- `src/css/styles/vega.css`
- `src/css/styles/nova.css`
- `src/css/styles/maia.css`
- `src/css/styles/lyra.css`
- `src/css/styles/mira.css`
- `src/css/styles/luma.css`
- `src/css/styles/sera.css`
- `src/css/styles/rhea.css`
- `docs/src/components/button.md`
Current button work includes:
packages/css/package.json
+20 -11
View File
@@ -83,16 +83,25 @@
"./sera.css": "./dist/basecoat-sera.css",
"./rhea": "./dist/basecoat-rhea.css",
"./rhea.css": "./dist/basecoat-rhea.css",
"./styles/vega": "./dist/styles/style-vega.css",
"./styles/nova": "./dist/styles/style-nova.css",
"./styles/maia": "./dist/styles/style-maia.css",
"./styles/lyra": "./dist/styles/style-lyra.css",
"./styles/mira": "./dist/styles/style-mira.css",
"./styles/luma": "./dist/styles/style-luma.css",
"./styles/sera": "./dist/styles/style-sera.css",
"./styles/rhea": "./dist/styles/style-rhea.css",
"./styles/*": "./dist/styles/style-*.css",
"./styles/*.css": "./dist/styles/style-*.css",
"./package.json": "./package.json"
"./styles/vega": "./dist/styles/vega.css",
"./styles/nova": "./dist/styles/nova.css",
"./styles/maia": "./dist/styles/maia.css",
"./styles/lyra": "./dist/styles/lyra.css",
"./styles/mira": "./dist/styles/mira.css",
"./styles/luma": "./dist/styles/luma.css",
"./styles/sera": "./dist/styles/sera.css",
"./styles/rhea": "./dist/styles/rhea.css",
"./styles/*": "./dist/styles/*.css",
"./styles/*.css": "./dist/styles/*.css",
"./package.json": "./package.json",
"./styles/style-vega.css": "./dist/styles/vega.css",
"./styles/style-nova.css": "./dist/styles/nova.css",
"./styles/style-maia.css": "./dist/styles/maia.css",
"./styles/style-lyra.css": "./dist/styles/lyra.css",
"./styles/style-mira.css": "./dist/styles/mira.css",
"./styles/style-luma.css": "./dist/styles/luma.css",
"./styles/style-sera.css": "./dist/styles/sera.css",
"./styles/style-rhea.css": "./dist/styles/rhea.css",
"./styles/style-*.css": "./dist/styles/*.css"
}
}
plan.md
+3 -3
View File
@@ -21,7 +21,7 @@
- base layer, default token fallbacks, and semantic utilities needed by CDN users
2. `src/css/components/*.css`
- Basecoat component selectors and shared structural behavior
3. `src/css/styles/style-*.css`
3. `src/css/styles/*.css`
- one file per style pack: `vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`
- component visuals: size, spacing, radius, typography, shadows, focus rings, variant colors when style-owned
4. Aggregates
@@ -33,7 +33,7 @@
No `.style-*` wrapper is part of the Basecoat public contract for style selection. Users choose a style by importing a standalone style bundle or using a style-specific generated CDN asset. Docs switch by swapping the single active full stylesheet URL.
Do not load Vega/default first and then layer another style pack on top. Split files under `src/css/styles/style-*.css` are source organization and advanced composition only. They should map upstream style intent directly and avoid defensive resets whose only purpose is undoing another style pack.
Do not load Vega/default first and then layer another style pack on top. Split files under `src/css/styles/*.css` are source organization and advanced composition only. They should map upstream style intent directly and avoid defensive resets whose only purpose is undoing another style pack.
## Per-Component File Checklist
@@ -45,7 +45,7 @@ For every component, check these files before editing:
- Upstream base component: `../_sandbox/shadcn-ui/apps/v4/registry/bases/base/ui/<component>.tsx`
- Upstream docs page: `../_sandbox/shadcn-ui/apps/v4/content/docs/components/{base,radix}/<component>.mdx`
- Upstream style packs: `../_sandbox/shadcn-ui/apps/v4/registry/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
- Basecoat style packs: `src/css/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
- Basecoat style packs: `src/css/styles/{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
## Component Migration Workflow
scripts/generate-css-entrypoints.js
+1 -1
View File
@@ -80,7 +80,7 @@ export async function generateCssEntrypoints({ cssDir = path.resolve('src/css')
for (const style of styles) {
await writeIfChanged(
path.join(cssDir, `basecoat-${style}.css`),
`@import "./basecoat-base.css";\n@import "./styles/style-${style}.css";\n`,
`@import "./basecoat-base.css";\n@import "./styles/${style}.css";\n`,
);
await writeIfChanged(
path.join(cssDir, `basecoat-${style}.cdn.css`),
src/css/basecoat-luma.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-luma.css";
@import "./styles/luma.css";
src/css/basecoat-lyra.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-lyra.css";
@import "./styles/lyra.css";
src/css/basecoat-maia.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-maia.css";
@import "./styles/maia.css";
src/css/basecoat-mira.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-mira.css";
@import "./styles/mira.css";
src/css/basecoat-nova.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-nova.css";
@import "./styles/nova.css";
src/css/basecoat-rhea.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-rhea.css";
@import "./styles/rhea.css";
src/css/basecoat-sera.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-sera.css";
@import "./styles/sera.css";
src/css/basecoat-vega.css
+1 -1
View File
@@ -1,2 +1,2 @@
@import "./basecoat-base.css";
@import "./styles/style-vega.css";
@import "./styles/vega.css";
src/css/styles/style-luma.css → src/css/styles/luma.css
View File
src/css/styles/style-lyra.css → src/css/styles/lyra.css
View File
src/css/styles/style-maia.css → src/css/styles/maia.css
View File
src/css/styles/style-mira.css → src/css/styles/mira.css
View File
src/css/styles/style-nova.css → src/css/styles/nova.css
View File
src/css/styles/style-rhea.css → src/css/styles/rhea.css
View File
src/css/styles/style-sera.css → src/css/styles/sera.css
View File
src/css/styles/style-vega.css → src/css/styles/vega.css
View File