create-bestax 3.0.0 → 3.1.1

package/templates/skills/bestax-theming/references/themeable-components.md

@@ -0,0 +1,74 @@
+# Themeable component props
+
+This is the self-contained inventory of the color/size/variant props that matter for theming in
+`@allxsmith/bestax-bulma`. All values are source-verified. Components import from the package root:
+`import { Button, Notification, Tag, Box, Message, Input, Title, SubTitle } from '@allxsmith/bestax-bulma'`.
+
+## Two kinds of color props
+
+1. **Component `color` modifier** → emits `is-<color>` (the filled Bulma variant). The accepted
+   values are component-specific (see the table). Example: `<Button color="primary">` → `is-primary`.
+2. **Helper color props** (available on virtually every component, applied as utility classes):
+   - `color` / `textColor` → `has-text-<color>` (text color)
+   - `backgroundColor` / `bgColor` → `has-background-<color>` (background)
+   - `colorShade` / `backgroundColorShade` → adds a shade suffix, e.g. `has-text-primary-30`
+
+   When a component has its own `color` modifier (Button, Tag, Input, …), use **`textColor`** /
+   **`bgColor`** for utility coloring so the two don't collide.
+
+`<color>` for the helper props is one of **`validColors`**:
+
+```
+primary, link, info, success, warning, danger,
+black, black-bis, black-ter, grey-darker, grey-dark, grey, grey-light, grey-lighter,
+white, light, dark
+```
+
+Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, light, dark, soft, bold, on-scheme`.
+
+## Component `color` / `size` props (verbatim unions)
+
+| Component      | `color` accepts                                                                                               | `size` accepts                       | Notes                                                                         |
+| -------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| `Button`       | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost` | `small \| normal \| medium \| large` | adds `text`, `ghost`; also `isLight`, `isOutlined`, `isInverted`, `isRounded` |
+| `Notification` | the 17 `validColors`                                                                                          | —                                    | also `isLight`                                                                |
+| `Tag`          | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                  | `normal \| medium \| large`          | also `isRounded`, `isDelete`, `isHoverable`                                   |
+| `Box`          | `primary \| link \| info \| success \| warning \| danger`                                                     | —                                    | the 6 only; also `hasShadow`                                                  |
+| `Message`      | `primary \| link \| info \| success \| warning \| danger`                                                     | —                                    | the 6 only                                                                    |
+| `Input`        | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                  | `small \| medium \| large`           | also `isRounded`, `isStatic`                                                  |
+| `Title`        | — (no `color`; use `textColor`)                                                                               | `1 \| 2 \| 3 \| 4 \| 5 \| 6`         | also `isSpaced`                                                               |
+| `SubTitle`     | — (no `color`; use `textColor`)                                                                               | `1 \| 2 \| 3 \| 4 \| 5 \| 6`         | —                                                                             |
+
+The 6 brand colors (`primary, link, info, success, warning, danger`) are the ones a custom theme
+recolors via the HSL trios (see `css-variables.md`). The greyscale and `white`/`light`/`dark`
+entries follow the scheme variables.
+
+## Typography & misc helper props (on most components)
+
+| Prop                                         | Accepts                                                   | Class                  |
+| -------------------------------------------- | --------------------------------------------------------- | ---------------------- |
+| `textSize`                                   | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`                         | `is-size-<n>`          |
+| `textWeight`                                 | `light \| normal \| medium \| semibold \| bold`           | `has-text-weight-<w>`  |
+| `fontFamily`                                 | `sans-serif \| monospace \| primary \| secondary \| code` | `is-family-<f>`        |
+| `textAlign`                                  | `centered \| justified \| left \| right`                  | `has-text-<a>`         |
+| `radius`                                     | `radiusless`                                              | `is-radiusless`        |
+| `shadow`                                     | `shadowless`                                              | `is-shadowless`        |
+| `m` / `p` (+ `mt/mr/mb/ml/mx/my`, `pt/…/py`) | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| auto`                 | `m-<n>` / `p-<n>` etc. |
+
+These map to Bulma utility classes that read the same `--bulma-*` variables, so a custom theme
+flows through them automatically.
+
+## Pattern
+
+```tsx
+// Brand-colored, themeable components — colors recolor with the theme's HSL trios:
+<Button color="primary">Save</Button>
+<Notification color="info">Heads up</Notification>
+<Tag color="success">Active</Tag>
+
+// Utility coloring on a component that already has its own `color`:
+<Button color="primary" textColor="white">Save</Button>
+
+// Shade + background:
+<Box bgColor="primary" backgroundColorShade="05">Subtle brand surface</Box>
+```

package/templates/vite/README.md

@@ -5,16 +5,16 @@ This template provides a minimal setup to get React working in Vite with HMR and
 ## Getting Started
 
 ```bash
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
 ## Available Scripts
 
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run lint` - Run ESLint
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm preview` - Preview production build
+- `pnpm lint` - Run ESLint
 
 ## Features
 

package/templates/vite-ts/README.md

@@ -5,16 +5,16 @@ This template provides a minimal setup to get React working in Vite with TypeScr
 ## Getting Started
 
 ```bash
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
 ## Available Scripts
 
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run lint` - Run ESLint
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm preview` - Preview production build
+- `pnpm lint` - Run ESLint
 
 ## Features
 

package/dist/__mocks__/chalk.d.ts

@@ -1,14 +0,0 @@
-declare const chalk: {
-    yellow: (str: string) => string;
-    blue: (str: string) => string;
-    cyan: (str: string) => string;
-    magenta: (str: string) => string;
-    green: (str: string) => string;
-    red: (str: string) => string;
-    dim: (str: string) => string;
-    bold: {
-        cyan: (str: string) => string;
-    };
-};
-export default chalk;
-//# sourceMappingURL=chalk.d.ts.map

package/dist/__mocks__/chalk.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chalk.d.ts","sourceRoot":"","sources":["../../src/__mocks__/chalk.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;kBACK,MAAM;gBACR,MAAM;gBACN,MAAM;mBACH,MAAM;iBACR,MAAM;eACR,MAAM;eACN,MAAM;;oBAEH,MAAM;;CAErB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/__mocks__/chalk.js

@@ -1,13 +0,0 @@
-const chalk = {
-    yellow: (str) => str,
-    blue: (str) => str,
-    cyan: (str) => str,
-    magenta: (str) => str,
-    green: (str) => str,
-    red: (str) => str,
-    dim: (str) => str,
-    bold: {
-        cyan: (str) => str,
-    },
-};
-export default chalk;

package/dist/__mocks__/figures.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    star: string;
-    cross: string;
-    tick: string;
-    bullet: string;
-    pointer: string;
-};
-export default _default;
-//# sourceMappingURL=figures.d.ts.map

package/dist/__mocks__/figures.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"figures.d.ts","sourceRoot":"","sources":["../../src/__mocks__/figures.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAME"}

package/dist/__mocks__/figures.js

@@ -1,7 +0,0 @@
-export default {
-    star: '⭐',
-    cross: '✖',
-    tick: '✔',
-    bullet: '●',
-    pointer: '❯',
-};

package/dist/__mocks__/prompts.d.ts

@@ -1,3 +0,0 @@
-declare const prompts: import("jest-mock").Mock<import("jest-mock").UnknownFunction>;
-export default prompts;
-//# sourceMappingURL=prompts.d.ts.map

package/dist/__mocks__/prompts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prompts.d.ts","sourceRoot":"","sources":["../../src/__mocks__/prompts.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO,+DAAY,CAAC;AAE1B,eAAe,OAAO,CAAC"}

package/dist/__mocks__/prompts.js

@@ -1,3 +0,0 @@
-import { jest } from '@jest/globals';
-const prompts = jest.fn();
-export default prompts;