create-bestax 3.2.1 → 3.3.1

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;;wCAWQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAOX,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9D,CAAC;AAKF,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GACpB,aAAa,MAAM,EACnB,8BAA8B,eAAe,KAC5C,MA8DF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EAyCvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA0CtC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;;wCAWQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAOX,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9D,CAAC;AAKF,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GACpB,aAAa,MAAM,EACnB,8BAA8B,eAAe,KAC5C,MA+DF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EAyCvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA0CtC,CAAC"}

package/dist/constants.js

@@ -76,8 +76,8 @@ ${setupLines.join('\n')}
 
 - Never inline \`style={{}}\` — use the helper props every component accepts (\`m*\`/\`p*\`
   spacing, \`textColor\`/\`bgColor\`, \`display="flex"\`, \`flexDirection\`, \`alignItems\`).
-  Flex layouts have no \`gap\` helper — space children with margins (\`Grid\` has a real
-  \`gap\` prop and \`Columns\` has \`gapSize\`, so prefer those there).
+  Flex layouts have no \`gap\` helper — space children with margins (\`Grid\` and \`Columns\`
+  take a \`gap\` prop, so prefer that there).
 - Compose existing components before writing custom CSS; theme via \`Theme\` and \`--bulma-*\`
   variables, never hardcoded colors.
 - There is no test runner or Storybook in this app — don't assume one.
@@ -91,6 +91,7 @@ automatically when the task matches:
 - **bestax-form** — build forms with the bestax form components (no form library).
 - **bestax-theming** — colors, branding, and dark mode via the \`Theme\` component (\`colorMode\`).
 - **bestax-layout-scaffold** — scaffold full pages (app shell, landing, centered, card grid).
+- **bestax-icons** — icons via \`Icon\`/\`IconText\`: library setup, name formats, variants, a11y.
 
 Prefer the library's components and these skills over hand-written Bulma markup or custom CSS.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bestax",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "Create a new bestax-bulma project",
   "type": "module",
   "bin": {

package/templates/skills/bestax-layout-scaffold/SKILL.md

@@ -46,6 +46,13 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   `textAlign="centered"`, and `textColor`/`bgColor` instead of `style={{ marginTop, textAlign,
 color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary="…">` at the root
   rather than `library` on every `<Icon>`.
+- **CTAs on a colored hero must stay legible in both schemes.** On a fixed-color surface
+  (`Hero color="primary"`, a dark banner), use **filled** buttons — `color="light"` or
+  `color="primary" isInverted` — never a thin `isOutlined` secondary: a light outline + light
+  label on a dark surface is low-contrast and gets worse under OS dark mode. And when the page's
+  design is single-mode (a fixed light or dark look), pin it at the root —
+  `<Theme isRoot colorMode="light">` — so a visitor's OS dark mode can't flip Bulma's text
+  colors out from under the fixed palette (details: the `bestax-theming` skill's contrast rules).
 
 ## References
 

package/templates/skills/bestax-layout-scaffold/examples/landing.tsx

@@ -33,11 +33,16 @@ export default function LandingPage() {
             <SubTitle size="3">
               The all-in-one platform for modern teams.
             </SubTitle>
+            {/* Both CTAs are FILLED: on a fixed-color hero a thin outlined
+                button (light outline + light label) reads washed out, and
+                worse under OS dark mode. isInverted (no isOutlined) gives a
+                solid white button with primary text — high contrast in both
+                schemes. */}
             <Buttons isCentered mt="5">
               <Button color="light" size="large">
                 Get started
               </Button>
-              <Button color="primary" isInverted isOutlined size="large">
+              <Button color="primary" isInverted size="large">
                 Live demo
               </Button>
             </Buttons>

package/templates/skills/bestax-layout-scaffold/references/archetypes.md

@@ -116,6 +116,12 @@ pricing page. The default for "build me a site/page".
 **Responsive:** `Section`s already stack vertically. The feature `Columns` collapse to one feature
 per row on mobile. Use `Hero size="large"` / `"fullheight"` for a taller hero.
 
+**Hero CTAs:** on a colored hero use **filled** buttons only — `color="light"` for the primary
+CTA and `color="primary" isInverted` (solid white, primary text) for a secondary. A thin
+`isOutlined` button on a fixed-color surface is low-contrast and degrades further under OS dark
+mode. Single-mode page designs should also pin the scheme at the root
+(`<Theme isRoot colorMode="light">`) — see the `bestax-theming` skill's contrast rules.
+
 ---
 
 ## 3. Centered single-column

package/templates/skills/bestax-layout-scaffold/references/layout-components.md

@@ -91,15 +91,15 @@ The responsive grid. `Columns` is the row; `Column` is a cell.
 
 **Columns**
 
-| Prop                                                                                                     | Type                                       |
-| -------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
-| `isMultiline`                                                                                            | `boolean` (wrap cells onto new rows)       |
-| `isCentered`                                                                                             | `boolean` (center the row)                 |
-| `isVCentered`                                                                                            | `boolean` (vertical centering — capital V) |
-| `isGapless`                                                                                              | `boolean`                                  |
-| `isMobile`                                                                                               | `boolean` (stay side-by-side on mobile)    |
-| `isDesktop`                                                                                              | `boolean`                                  |
-| `gapSize` / `gapSizeMobile` / `gapSizeTablet` / `gapSizeDesktop` / `gapSizeWidescreen` / `gapSizeFullhd` | `0`–`8` (number or string)                 |
+| Prop                                                                             | Type                                                     |
+| -------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| `isMultiline`                                                                    | `boolean` (wrap cells onto new rows)                     |
+| `isCentered`                                                                     | `boolean` (center the row)                               |
+| `isVCentered`                                                                    | `boolean` (vertical centering — capital V)               |
+| `isGapless`                                                                      | `boolean`                                                |
+| `isMobile`                                                                       | `boolean` (stay side-by-side on mobile)                  |
+| `isDesktop`                                                                      | `boolean`                                                |
+| `gap` / `gapMobile` / `gapTablet` / `gapDesktop` / `gapWidescreen` / `gapFullhd` | `0`–`8` (number or string, same scale as `Grid`'s `gap`) |
 
 **Column**
 

package/templates/skills/bestax-theming/SKILL.md

@@ -35,6 +35,26 @@ For **dark mode**, pass `colorMode` to `Theme` (`'light' | 'dark' | 'system'`).
 `Theme`; `'system'` follows the OS `prefers-color-scheme`. Drive it from state on the app-root
 `Theme`: `<Theme isRoot colorMode={mode}>`.
 
+## Contrast rules (dark mode is on by default)
+
+When nothing sets a `data-theme` attribute (omitting `colorMode` preserves an existing one, but
+apps that never configured it have none), Bulma follows the visitor's OS: `--bulma-text`,
+`--bulma-scheme-main`, etc. flip on a dark-mode machine even if the design never intended a dark
+theme. Custom fixed tokens (`--my-canvas: #f6f4ec`) do **not** flip — producing near-white Bulma
+text on the author's fixed light background. Apply exactly one of these rules whenever custom
+color tokens or fixed-color surfaces exist:
+
+- **Single-mode design → pin the scheme.** `<Theme isRoot colorMode="light">` (or `"dark"`), so
+  an OS preference can never invert text out from under the fixed palette.
+- **Both modes → no exposed fixed tokens.** Derive custom tokens from scheme variables
+  (`--my-canvas: var(--bulma-scheme-main)`) — or flip them yourself under **both** dark-mode
+  paths: `[data-theme='dark']` **and** `@media (prefers-color-scheme: dark)` scoped to
+  `:root:not([data-theme])`, since `colorMode="system"` removes the attribute (snippets in
+  `references/css-variables.md`).
+- **Fixed-color surface → fixed-color content.** On a surface that never changes (a dark hero,
+  a brand banner), pin the content's colors too: solid/filled buttons and explicit text colors,
+  never scheme-derived defaults or thin outlines that depend on the flipping scheme.
+
 Reach for the helper props (`color` / `textColor` / `bgColor` / `colorShade`, `textSize`,
 `textWeight`, `fontFamily`) to apply themed colors and type to individual components.
 

package/templates/skills/bestax-theming/references/css-variables.md

@@ -147,6 +147,55 @@ Under dark mode Bulma flips the scheme/text/border/background lightness variable
 `Theme isRoot` or `:root` still apply on top, because they set the hue/saturation/lightness
 channels directly.
 
+### The single-mode contrast trap
+
+Because the OS preference applies whenever no `data-theme` attribute is set — the default state
+of every app that never configured `colorMode` — a light-only design silently breaks for any
+dark-mode visitor: Bulma's text goes near-white while author-defined fixed tokens stay light —
+white text on cream. The failure is invisible unless the author's own OS is in dark mode.
+
+**If the design is single-mode, pin the scheme** so text can't flip out from under the palette:
+
+```tsx
+<Theme isRoot colorMode="light">
+  <App />
+</Theme>
+```
+
+**If both modes are supported, never expose a fixed custom token to the flip** — derive it from
+scheme variables, or flip it yourself:
+
+```css
+/* Preferred: track the scheme automatically. */
+:root {
+  --my-canvas: var(--bulma-scheme-main);
+  --my-ink: var(--bulma-text);
+}
+/* Or, when custom values must be kept, provide the dark pair for BOTH
+   ways dark mode arrives — the explicit attribute (colorMode="dark")… */
+[data-theme='dark'] {
+  --my-canvas: #14251b;
+  --my-ink: #eef3e7;
+}
+
+/* …and the OS preference, which applies when no data-theme is set
+   (colorMode="system" removes the attribute): */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --my-canvas: #14251b;
+    --my-ink: #eef3e7;
+  }
+}
+```
+
+Deriving from scheme variables is preferred precisely because it covers both dark-mode paths
+with no extra selector.
+
+The same reasoning applies to **fixed-color surfaces** inside either kind of page (a dark hero,
+a brand banner): content sitting on a surface that never flips must use pinned colors — filled
+buttons and explicit text colors — not scheme-derived defaults (see the layout skill's hero CTA
+rule).
+
 ## `Theme` props (named)
 
 Color trios: `primaryH/primaryS/primaryL`, `linkH/linkS/linkL`, `infoH/S/L`, `successH/S/L`,