From 7e7d509e908f8c387b42749b97b61c2c930c2fc4 Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Wed, 3 Jun 2026 18:59:21 +0800 Subject: [PATCH] Migrate empty and item docs to Basecoat APIs --- AGENTS.md | 186 ++- CHANGELOG.md | 13 + CONTRIBUTING.md | 18 +- docs/css/custom.css | 19 +- docs/css/style-luma.css | 3 - docs/css/style-lyra.css | 3 - docs/css/style-maia.css | 3 - docs/css/style-mira.css | 3 - docs/css/style-nova.css | 3 - docs/css/style-rhea.css | 3 - docs/css/style-sera.css | 3 - docs/css/styles-luma.css | 9 + docs/css/styles-lyra.css | 9 + docs/css/styles-maia.css | 9 + docs/css/styles-mira.css | 9 + docs/css/styles-nova.css | 9 + docs/css/styles-rhea.css | 9 + docs/css/styles-sera.css | 9 + docs/css/styles-vega.css | 9 + docs/css/styles.css | 5 +- docs/src/_includes/layouts/base.njk | 15 +- docs/src/_includes/macros/code_block.njk | 4 +- docs/src/_includes/partials/header.njk | 12 +- .../_includes/partials/kitchen-sink/card.njk | 10 +- .../partials/kitchen-sink/dialog.njk | 10 +- .../_includes/partials/kitchen-sink/form.njk | 64 +- .../partials/kitchen-sink/popover.njk | 18 +- .../_includes/partials/kitchen-sink/tabs.njk | 20 +- docs/src/_includes/partials/sidebar.njk | 39 +- docs/src/assets/style-luma.css | 2 - docs/src/assets/style-lyra.css | 2 - docs/src/assets/style-maia.css | 2 - docs/src/assets/style-mira.css | 2 - docs/src/assets/style-nova.css | 2 - docs/src/assets/style-rhea.css | 2 - docs/src/assets/style-sera.css | 2 - docs/src/assets/styles-luma.css | 2 + docs/src/assets/styles-lyra.css | 2 + docs/src/assets/styles-maia.css | 2 + docs/src/assets/styles-mira.css | 2 + docs/src/assets/styles-nova.css | 2 + docs/src/assets/styles-rhea.css | 2 + docs/src/assets/styles-sera.css | 2 + docs/src/assets/styles-vega.css | 2 + docs/src/assets/styles.css | 2 +- docs/src/cli.njk | 56 + docs/src/components/alert-dialog.njk | 2 +- docs/src/components/alert.njk | 49 +- docs/src/components/badge.njk | 31 +- docs/src/components/button-group.njk | 112 +- docs/src/components/button.njk | 193 ++- docs/src/components/card.njk | 57 +- docs/src/components/checkbox.njk | 197 ++- docs/src/components/combobox.njk | 369 +++-- docs/src/components/command.njk | 265 +-- docs/src/components/dialog.njk | 226 ++- docs/src/components/dropdown-menu.njk | 453 +++--- docs/src/components/empty.njk | 194 ++- docs/src/components/field.njk | 77 +- docs/src/components/form.njk | 79 - docs/src/components/input-group.njk | 609 ++++--- docs/src/components/input.njk | 194 ++- docs/src/components/item.njk | 388 ++--- docs/src/components/kbd.njk | 49 +- docs/src/components/label.njk | 20 +- docs/src/components/native-select.njk | 127 ++ docs/src/components/popover.njk | 241 ++- docs/src/components/radio-group.njk | 215 ++- docs/src/components/select.njk | 157 +- docs/src/components/sidebar.njk | 106 +- docs/src/components/skeleton.njk | 83 +- docs/src/components/slider.njk | 106 +- docs/src/components/switch.njk | 148 +- docs/src/components/table.njk | 108 +- docs/src/components/tabs.njk | 241 ++- docs/src/components/textarea.njk | 94 +- docs/src/components/toast.njk | 4 +- docs/src/components/tooltip.njk | 84 +- docs/src/customization.njk | 113 ++ docs/src/index.njk | 60 +- docs/src/installation.njk | 189 +-- docs/src/introduction.njk | 2 +- docs/src/llms.txt | 6 +- migration-tracker.md | 57 +- package-lock.json | 1426 ++++++++++++++++- package.json | 12 +- packages/css/README.md | 9 +- packages/css/package.json | 16 + plan.md | 52 +- scripts/build-docs-css.js | 37 + scripts/build.js | 31 +- src/css/basecoat-luma.cdn.css | 2 + src/css/basecoat-luma.css | 34 + src/css/basecoat-lyra.cdn.css | 2 + src/css/basecoat-lyra.css | 34 + src/css/basecoat-maia.cdn.css | 2 + src/css/basecoat-maia.css | 34 + src/css/basecoat-mira.cdn.css | 2 + src/css/basecoat-mira.css | 34 + src/css/basecoat-nova.cdn.css | 2 + src/css/basecoat-nova.css | 34 + src/css/basecoat-rhea.cdn.css | 2 + src/css/basecoat-rhea.css | 34 + src/css/basecoat-sera.cdn.css | 2 + src/css/basecoat-sera.css | 34 + src/css/basecoat-vega.cdn.css | 2 + src/css/basecoat-vega.css | 34 + src/css/basecoat.css | 4 + src/css/components/alert.css | 38 +- src/css/components/badge.css | 20 +- src/css/components/button-group.css | 28 +- src/css/components/button.css | 2 +- src/css/components/card.css | 23 +- src/css/components/checkbox.css | 7 +- src/css/components/combobox.css | 78 + src/css/components/command.css | 160 +- src/css/components/dialog.css | 69 +- src/css/components/dropdown-menu.css | 65 +- src/css/components/empty.css | 26 + src/css/components/field.css | 96 +- src/css/components/input-group.css | 50 + src/css/components/input.css | 34 +- src/css/components/item.css | 50 + src/css/components/kbd.css | 7 +- src/css/components/label.css | 13 +- src/css/components/native-select.css | 7 +- src/css/components/popover.css | 35 +- src/css/components/radio.css | 7 +- src/css/components/range.css | 51 +- src/css/components/select.css | 108 +- src/css/components/sidebar.css | 45 +- src/css/components/skeleton.css | 6 + src/css/components/switch.css | 10 +- src/css/components/table.css | 24 +- src/css/components/tabs.css | 31 +- src/css/components/textarea.css | 5 +- src/css/components/toast.css | 11 +- src/css/components/tooltip.css | 36 +- src/css/styles/style-luma.css | 1082 ++++++++++++- src/css/styles/style-lyra.css | 1063 +++++++++++- src/css/styles/style-maia.css | 1070 ++++++++++++- src/css/styles/style-mira.css | 1071 ++++++++++++- src/css/styles/style-nova.css | 1067 +++++++++++- src/css/styles/style-rhea.css | 1079 ++++++++++++- src/css/styles/style-sera.css | 1090 ++++++++++++- src/css/styles/style-vega.css | 1067 +++++++++++- src/jinja/combobox.html.jinja | 102 ++ src/jinja/command.html.jinja | 4 +- src/jinja/dialog.html.jinja | 2 +- src/jinja/select.html.jinja | 32 +- src/jinja/sidebar.html.jinja | 4 +- src/jinja/tabs.html.jinja | 10 +- src/js/combobox.js | 323 ++++ src/js/dropdown-menu.js | 19 +- src/js/range.js | 21 + src/js/select.js | 73 +- src/js/tabs.js | 30 +- src/nunjucks/combobox.njk | 114 ++ src/nunjucks/command.njk | 2 +- src/nunjucks/dialog.njk | 4 +- src/nunjucks/select.njk | 32 +- src/nunjucks/sidebar.njk | 4 +- src/nunjucks/tabs.njk | 10 +- wrangler.jsonc | 8 +- 164 files changed, 15779 insertions(+), 2940 deletions(-) create mode 100644 CHANGELOG.md delete mode 100644 docs/css/style-luma.css delete mode 100644 docs/css/style-lyra.css delete mode 100644 docs/css/style-maia.css delete mode 100644 docs/css/style-mira.css delete mode 100644 docs/css/style-nova.css delete mode 100644 docs/css/style-rhea.css delete mode 100644 docs/css/style-sera.css create mode 100644 docs/css/styles-luma.css create mode 100644 docs/css/styles-lyra.css create mode 100644 docs/css/styles-maia.css create mode 100644 docs/css/styles-mira.css create mode 100644 docs/css/styles-nova.css create mode 100644 docs/css/styles-rhea.css create mode 100644 docs/css/styles-sera.css create mode 100644 docs/css/styles-vega.css delete mode 100644 docs/src/assets/style-luma.css delete mode 100644 docs/src/assets/style-lyra.css delete mode 100644 docs/src/assets/style-maia.css delete mode 100644 docs/src/assets/style-mira.css delete mode 100644 docs/src/assets/style-nova.css delete mode 100644 docs/src/assets/style-rhea.css delete mode 100644 docs/src/assets/style-sera.css create mode 100644 docs/src/assets/styles-luma.css create mode 100644 docs/src/assets/styles-lyra.css create mode 100644 docs/src/assets/styles-maia.css create mode 100644 docs/src/assets/styles-mira.css create mode 100644 docs/src/assets/styles-nova.css create mode 100644 docs/src/assets/styles-rhea.css create mode 100644 docs/src/assets/styles-sera.css create mode 100644 docs/src/assets/styles-vega.css create mode 100644 docs/src/cli.njk delete mode 100644 docs/src/components/form.njk create mode 100644 docs/src/components/native-select.njk create mode 100644 docs/src/customization.njk create mode 100644 scripts/build-docs-css.js create mode 100644 src/css/basecoat-luma.cdn.css create mode 100644 src/css/basecoat-luma.css create mode 100644 src/css/basecoat-lyra.cdn.css create mode 100644 src/css/basecoat-lyra.css create mode 100644 src/css/basecoat-maia.cdn.css create mode 100644 src/css/basecoat-maia.css create mode 100644 src/css/basecoat-mira.cdn.css create mode 100644 src/css/basecoat-mira.css create mode 100644 src/css/basecoat-nova.cdn.css create mode 100644 src/css/basecoat-nova.css create mode 100644 src/css/basecoat-rhea.cdn.css create mode 100644 src/css/basecoat-rhea.css create mode 100644 src/css/basecoat-sera.cdn.css create mode 100644 src/css/basecoat-sera.css create mode 100644 src/css/basecoat-vega.cdn.css create mode 100644 src/css/basecoat-vega.css create mode 100644 src/css/components/combobox.css create mode 100644 src/css/components/empty.css create mode 100644 src/css/components/input-group.css create mode 100644 src/css/components/item.css create mode 100644 src/css/components/skeleton.css create mode 100644 src/jinja/combobox.html.jinja create mode 100644 src/js/combobox.js create mode 100644 src/js/range.js create mode 100644 src/nunjucks/combobox.njk diff --git a/AGENTS.md b/AGENTS.md index f92e0ff..283bf21 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -4,6 +4,8 @@ Basecoat is a vanilla JavaScript/HTML/CSS port of shadcn/ui components. It reuses shadcn/ui's design patterns and Tailwind CSS classes while maintaining semantic HTML, native browser elements, and full accessibility (ARIA attributes, proper hierarchies, keyboard navigation). The goal is to provide shadcn-quality components without React dependencies. +Basecoat is not a literal DOM port of shadcn/ui. It is an alternative implementation with the same visual language and comparable component coverage, but with simpler markup, less JavaScript, less CSS, and no React/runtime primitive dependency. + ## Quickstart - Install deps: `npm i` @@ -16,7 +18,7 @@ Basecoat is a vanilla JavaScript/HTML/CSS port of shadcn/ui components. It reuse - 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 overrides (`vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`) + - `src/css/styles/style-*.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 @@ -47,14 +49,155 @@ Basecoat is a vanilla JavaScript/HTML/CSS port of shadcn/ui components. It reuse - `src/css/styles/style-luma.css` - `src/css/styles/style-sera.css` - `src/css/styles/style-rhea.css` -- Default aggregate and CDN behavior should resolve to Vega unless explicitly changed. -- Non-default styles should be selected by importing the relevant style file or using a style-specific bundled asset, not by introducing shadcn internal selector conventions. +- `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-