This commit is contained in:
parent
63ae559823
commit
aa6e13efb2
1 changed files with 0 additions and 63 deletions
63
README.md
63
README.md
|
|
@ -3,66 +3,3 @@
|
||||||
```sh
|
```sh
|
||||||
pnpm install https://git.methanium.net/methanium/ui/releases/download/latest/methanium-ui.tgz
|
pnpm install https://git.methanium.net/methanium/ui/releases/download/latest/methanium-ui.tgz
|
||||||
```
|
```
|
||||||
|
|
||||||
Import the stylesheet once, then add the provider at the application root:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import "@methanium/ui/index.css";
|
|
||||||
import { ThemeProvider } from "@methanium/ui";
|
|
||||||
|
|
||||||
<ThemeProvider>{children}</ThemeProvider>;
|
|
||||||
```
|
|
||||||
|
|
||||||
## App Default
|
|
||||||
|
|
||||||
Vite applications can choose their initial parent theme at build time:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { methaniumUi } from "@methanium/ui/vite";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [methaniumUi({ defaultThemeId: "tensamin" })],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
The built-in parent themes are `tensamin`, `og-tensamin`, `methanium`, and
|
|
||||||
`secret`. Without the plugin or a provider override, the neutral base theme is
|
|
||||||
used.
|
|
||||||
Public Sans is bundled as the default typeface; users can switch to their
|
|
||||||
platform's system font in the customizer.
|
|
||||||
|
|
||||||
## Custom Themes
|
|
||||||
|
|
||||||
Pass a typed manifest to `ThemeProvider` to add themes. Presets are ordinary
|
|
||||||
CSS and remain fully editable after selection.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import {
|
|
||||||
BUILT_IN_THEMES,
|
|
||||||
DEFAULT_THEME_DESIGN,
|
|
||||||
defineThemes,
|
|
||||||
} from "@methanium/ui";
|
|
||||||
|
|
||||||
export const themes = defineThemes([
|
|
||||||
...BUILT_IN_THEMES,
|
|
||||||
{
|
|
||||||
id: "my-theme",
|
|
||||||
title: "My Theme",
|
|
||||||
logo: "/themes/my-logo.svg",
|
|
||||||
defaultValues: {
|
|
||||||
borderRadius: 0.5,
|
|
||||||
design: { ...DEFAULT_THEME_DESIGN, density: 0.95 },
|
|
||||||
},
|
|
||||||
css: `:root[data-theme="my-theme"] { --primary: #ff4f91; }`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
Use `<ThemeCustomizer />` for all theme editing. `<ThemeSelector />` is its
|
|
||||||
focused parent-theme selection control.
|
|
||||||
|
|
||||||
## Onboarding
|
|
||||||
|
|
||||||
Every `OnboardingStep` requires a `title`; the flow owns title rendering and
|
|
||||||
focus. `<ThemeOnboardingPage />` applies choices immediately and prevents
|
|
||||||
continuing until the user explicitly selects a theme.
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue