@alexandregme/zljs 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+A change that needs action in an app has a **Migration** note. When updating, read every version newer than the one the app has, oldest first. This file ships with the package, in `node_modules/@alexandregme/zljs/CHANGELOG.md`. Versions before 1.8.0 are in the [GitHub Releases](https://github.com/alexandregme/zljs/releases).
+
+## [Unreleased]
+
+## [1.9.0] - 2026-11-02
+
+### Added
+
+- `CHANGELOG.md` now ships with the package, and has a `Foundations/Changelog` page in Storybook
+
+## [1.8.0] - 2026-11-01
+
+### Added
+
+- Theme values for the semantic colors. Apps work with no setup, and can use their own colors by redefining `--color-zl-<color>` after importing the styles. See `Colors` in the README. Only the defaults are checked for contrast
+- `Foundations/Colors` page in Storybook
+
+### Changed
+
+- `Button`, `Heading`, `Text`, `Error` and the `Checkbox` card use theme classes such as `text-zl-success` instead of Tailwind shades such as `text-green-700`
+- `info` on `Heading` and `Text` is now `cyan-700` instead of `sky-700`
+- `Button` and link hovers are now derived from their color, so they are slightly different
+
+#### Migration
+
+Only tests that assert a shade on a zljs component need a change. To find them, run the command below. It also finds classes the app sets itself, and those stay as they are:
+
+```sh
+grep -rnE "(hover:)?(text|bg)-(blue|green|red|yellow|sky|cyan|gray)-(\\\\d|[0-9])" src --include='*.test.*'
+```
+
+Replace the shade with the class of the `color` being tested, for example `/(^|\s)text-green-\d+/` with `/(^|\s)text-zl-success(\s|$)/`. Then run the app's tests.
+
+| `color`   | `Text`, `Heading`, `link` | Link hover                     | `Button` background | `Button` hover              |
+| --------- | ------------------------- | ------------------------------ | ------------------- | --------------------------- |
+| `primary` | `text-zl-primary`         | `hover:text-zl-primary-strong` | `bg-zl-primary-bg`  | `hover:bg-zl-primary-hover` |
+| `success` | `text-zl-success`         | `hover:text-zl-success-strong` | `bg-zl-success-bg`  | `hover:bg-zl-success-hover` |
+| `danger`  | `text-zl-danger`          | `hover:text-zl-danger-strong`  | `bg-zl-danger-bg`   | `hover:bg-zl-danger-hover`  |
+| `warning` | `text-zl-warning`         | `hover:text-zl-warning-strong` | `bg-zl-warning-bg`  | `hover:bg-zl-warning-hover` |
+| `info`    | `text-zl-info`            | `hover:text-zl-info-strong`    | `bg-zl-info-bg`     | `hover:bg-zl-info-hover`    |
+| `muted`   | `text-zl-muted`           | `hover:text-zl-muted-strong`   | `bg-zl-muted-bg`    | `hover:bg-zl-muted-hover`   |
+
+The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
+
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.9.0...HEAD
+[1.9.0]: https://github.com/alexandregme/zljs/compare/v1.8.0...v1.9.0
+[1.8.0]: https://github.com/alexandregme/zljs/compare/v1.7.0...v1.8.0

package/README.md

@@ -43,6 +43,34 @@ import { FormProvider, FormInput } from "@alexandregme/zljs/rhf";
 <Button onClick={handleClick}>Submit</Button>;
 ```
 
+## Colors
+
+The components work with no setup, using the default colors. To use your own, redefine the values you want after importing the styles:
+
+```css
+@import "tailwindcss";
+@import "@alexandregme/zljs/styles.css";
+
+@theme {
+  --color-zl-primary: #2e7d32;
+}
+```
+
+`primary`, `success`, `danger`, `warning`, `info` and `muted` each take one value (`--color-zl-<color>`), used for text and the focus outline. The others follow it, and you can redefine them too:
+
+| Value                       | Used for               | Default                                    |
+| --------------------------- | ---------------------- | ------------------------------------------ |
+| `--color-zl-<color>-strong` | Link hover             | 30% darker                                 |
+| `--color-zl-<color>-bg`     | Button background      | The color itself (`warning`: `yellow-500`) |
+| `--color-zl-<color>-hover`  | Button hover           | The background, 15% darker                 |
+| `--color-zl-<color>-on`     | Text on the background | White (`warning`: `gray-900`)              |
+
+Only the defaults are checked for contrast. Check your own choice: 4.5:1 for text, on `--color-zl-<color>` against the page and on `-on` against `-bg`, and 3:1 for the focus outline. A value set on a nested element doesn't reach the values derived from it, so set them in `@theme` or `:root`.
+
+## Updating
+
+See [`CHANGELOG.md`](./CHANGELOG.md), in the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format. A change that needs action in an app has a **Migration** note, written so an agent can follow it. The file ships with the package, in `node_modules/@alexandregme/zljs/CHANGELOG.md`.
+
 ## Getting Started
 
 ```bash

package/dist/{chunk-GDE6UMXP.js → chunk-WZNUKE6S.js}

@@ -28,7 +28,7 @@ import { forwardRef, useId } from "react";
 // core/forms/error/error.styles.ts
 import { tv } from "tailwind-variants";
 var error = tv({
-  base: "text-sm text-red-600"
+  base: "text-sm text-zl-danger"
 });
 
 // core/forms/error/error.tsx

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   FormInput,
   FormProvider,
   Input
-} from "./chunk-GDE6UMXP.js";
+} from "./chunk-WZNUKE6S.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -51,18 +51,18 @@ var button = tv({
   base: "cursor-pointer font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
   variants: {
     variant: {
-      default: "px-4 py-2 text-white text-sm gap-2 rounded-md",
+      default: "px-4 py-2 text-sm gap-2 rounded-md",
       icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md",
       // The invisible ::after grows the touch target to 44px without changing the layout.
       link: "relative text-xs hover:underline rounded-sm after:absolute after:top-1/2 after:left-1/2 after:h-11 after:w-full after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2"
     },
     color: {
-      primary: "bg-blue-600 hover:bg-blue-700 focus-visible:outline-blue-600",
-      success: "bg-green-700 hover:bg-green-800 focus-visible:outline-green-700",
-      danger: "bg-red-600 hover:bg-red-700 focus-visible:outline-red-600",
-      warning: "bg-yellow-500 hover:bg-yellow-600 focus-visible:outline-yellow-700 text-gray-900",
-      info: "bg-cyan-700 hover:bg-cyan-800 focus-visible:outline-cyan-700",
-      muted: "bg-gray-500 hover:bg-gray-600 focus-visible:outline-gray-500",
+      primary: "bg-zl-primary-bg hover:bg-zl-primary-hover text-zl-primary-on focus-visible:outline-zl-primary",
+      success: "bg-zl-success-bg hover:bg-zl-success-hover text-zl-success-on focus-visible:outline-zl-success",
+      danger: "bg-zl-danger-bg hover:bg-zl-danger-hover text-zl-danger-on focus-visible:outline-zl-danger",
+      warning: "bg-zl-warning-bg hover:bg-zl-warning-hover text-zl-warning-on focus-visible:outline-zl-warning",
+      info: "bg-zl-info-bg hover:bg-zl-info-hover text-zl-info-on focus-visible:outline-zl-info",
+      muted: "bg-zl-muted-bg hover:bg-zl-muted-hover text-zl-muted-on focus-visible:outline-zl-muted",
       ghost: "bg-transparent text-current hover:text-current hover:bg-neutral-500/20",
       none: ""
     },
@@ -104,32 +104,32 @@ var button = tv({
     {
       variant: "link",
       color: "primary",
-      class: "text-blue-600 hover:text-blue-800"
+      class: "text-zl-primary hover:text-zl-primary-strong"
     },
     {
       variant: "link",
       color: "success",
-      class: "text-green-700 hover:text-green-900"
+      class: "text-zl-success hover:text-zl-success-strong"
     },
     {
       variant: "link",
       color: "danger",
-      class: "text-red-600 hover:text-red-800"
+      class: "text-zl-danger hover:text-zl-danger-strong"
     },
     {
       variant: "link",
       color: "warning",
-      class: "text-yellow-700 hover:text-yellow-900"
+      class: "text-zl-warning hover:text-zl-warning-strong"
     },
     {
       variant: "link",
       color: "info",
-      class: "text-cyan-700 hover:text-cyan-900"
+      class: "text-zl-info hover:text-zl-info-strong"
     },
     {
       variant: "link",
       color: "muted",
-      class: "text-gray-500 hover:text-gray-700"
+      class: "text-zl-muted hover:text-zl-muted-strong"
     },
     {
       variant: "link",
@@ -224,7 +224,7 @@ var innerWrapper = tv2({
   variants: {
     variant: {
       default: "w-fit items-center gap-2",
-      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 has-disabled:bg-gray-100"
+      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-zl-primary has-checked:ring-1 has-checked:ring-zl-primary has-disabled:bg-gray-100"
     }
   },
   defaultVariants: {
@@ -678,6 +678,19 @@ var DataGrid = ({
 
 // core/text/text.styles.ts
 import { tv as tv8 } from "tailwind-variants";
+
+// core/types/colors/colors.const.ts
+var semanticTextColors = {
+  primary: "text-zl-primary",
+  success: "text-zl-success",
+  danger: "text-zl-danger",
+  warning: "text-zl-warning",
+  info: "text-zl-info",
+  muted: "text-zl-muted",
+  none: ""
+};
+
+// core/text/text.styles.ts
 var text = tv8({
   variants: {
     variant: {
@@ -685,15 +698,7 @@ var text = tv8({
       caption: "text-sm",
       display: "text-3xl font-bold"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     variant: "body"
@@ -858,15 +863,7 @@ var heading = tv11({
       5: "text-base font-medium",
       6: "text-sm font-medium"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     level: 1

package/dist/rhf/index.js

@@ -2,7 +2,7 @@
 import {
   FormInput,
   FormProvider
-} from "../chunk-GDE6UMXP.js";
+} from "../chunk-WZNUKE6S.js";
 export {
   FormInput,
   FormProvider

package/dist/styles/ag-grid.css

@@ -0,0 +1,32 @@
+/* AG Grid Custom Styles */
+.ag-theme-alpine {
+  --ag-header-background-color: #f8fafc;
+  --ag-header-foreground-color: #334155;
+  --ag-header-cell-hover-background-color: #e2e8f0;
+  --ag-odd-row-background-color: #f8fafc;
+  --ag-row-hover-color: #e0f2fe;
+  --ag-selected-row-background-color: #dbeafe;
+  --ag-border-color: #e2e8f0;
+  --ag-font-family: inherit;
+  --ag-font-size: 14px;
+}
+
+.ag-theme-alpine .ag-header-cell {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  border-right: 1px solid #475569;
+}
+
+.ag-theme-alpine .ag-header-cell:last-child {
+  border-right: none;
+}
+
+.ag-theme-alpine .ag-row {
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.ag-theme-alpine .ag-row:hover {
+  background-color: var(--ag-row-hover-color);
+}

package/dist/styles/colors.css

@@ -0,0 +1,57 @@
+/* The semantic colors of the components. Works with no setup; an app changes a
+   color by redefining its --color-zl-* value in its own @theme, after importing
+   the styles. Only the defaults are checked for contrast.
+
+   Each color has five values, and the others follow the first unless redefined:
+     --color-zl-<color>         text and focus outline
+     --color-zl-<color>-strong  link hover
+     --color-zl-<color>-bg      button background
+     --color-zl-<color>-hover   button hover
+     --color-zl-<color>-on      text on the background
+
+   Prettier is off for this block to keep one value per line. */
+
+/* prettier-ignore */
+@theme {
+  /* Primary */
+  --color-zl-primary:        var(--color-blue-600);
+  --color-zl-primary-strong: color-mix(in oklab, var(--color-zl-primary), black 30%);
+  --color-zl-primary-bg:     var(--color-zl-primary);
+  --color-zl-primary-hover:  color-mix(in oklab, var(--color-zl-primary-bg), black 15%);
+  --color-zl-primary-on:     var(--color-white);
+
+  /* Success */
+  --color-zl-success:        var(--color-green-700);
+  --color-zl-success-strong: color-mix(in oklab, var(--color-zl-success), black 30%);
+  --color-zl-success-bg:     var(--color-zl-success);
+  --color-zl-success-hover:  color-mix(in oklab, var(--color-zl-success-bg), black 15%);
+  --color-zl-success-on:     var(--color-white);
+
+  /* Danger */
+  --color-zl-danger:        var(--color-red-600);
+  --color-zl-danger-strong: color-mix(in oklab, var(--color-zl-danger), black 30%);
+  --color-zl-danger-bg:     var(--color-zl-danger);
+  --color-zl-danger-hover:  color-mix(in oklab, var(--color-zl-danger-bg), black 15%);
+  --color-zl-danger-on:     var(--color-white);
+
+  /* Warning */
+  --color-zl-warning:        var(--color-yellow-700);
+  --color-zl-warning-strong: color-mix(in oklab, var(--color-zl-warning), black 30%);
+  --color-zl-warning-bg:     var(--color-yellow-500);
+  --color-zl-warning-hover:  color-mix(in oklab, var(--color-zl-warning-bg), black 15%);
+  --color-zl-warning-on:     var(--color-gray-900);
+
+  /* Info */
+  --color-zl-info:        var(--color-cyan-700);
+  --color-zl-info-strong: color-mix(in oklab, var(--color-zl-info), black 30%);
+  --color-zl-info-bg:     var(--color-zl-info);
+  --color-zl-info-hover:  color-mix(in oklab, var(--color-zl-info-bg), black 15%);
+  --color-zl-info-on:     var(--color-white);
+
+  /* Muted */
+  --color-zl-muted:        var(--color-gray-500);
+  --color-zl-muted-strong: color-mix(in oklab, var(--color-zl-muted), black 30%);
+  --color-zl-muted-bg:     var(--color-zl-muted);
+  --color-zl-muted-hover:  color-mix(in oklab, var(--color-zl-muted-bg), black 15%);
+  --color-zl-muted-on:     var(--color-white);
+}

package/dist/styles/scrollbar.css

@@ -0,0 +1,17 @@
+/* Global Scrollbar */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(228, 231, 234, 0.5);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.75);
+}

package/dist/styles.css

@@ -1,54 +1,7 @@
+@import "./styles/colors.css";
+@import "./styles/scrollbar.css";
+@import "./styles/ag-grid.css";
+
 /* Makes the consumer's Tailwind scan the component classes. The path is
    relative to this file, so it works from core/ and from the copy in dist/. */
 @source "./";
-
-/* Global Scrollbar */
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(228, 231, 234, 0.5);
-  border-radius: 2px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.75);
-}
-
-/* AG Grid Custom Styles */
-.ag-theme-alpine {
-  --ag-header-background-color: #f8fafc;
-  --ag-header-foreground-color: #334155;
-  --ag-header-cell-hover-background-color: #e2e8f0;
-  --ag-odd-row-background-color: #f8fafc;
-  --ag-row-hover-color: #e0f2fe;
-  --ag-selected-row-background-color: #dbeafe;
-  --ag-border-color: #e2e8f0;
-  --ag-font-family: inherit;
-  --ag-font-size: 14px;
-}
-
-.ag-theme-alpine .ag-header-cell {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 0.05em;
-  border-right: 1px solid #475569;
-}
-
-.ag-theme-alpine .ag-header-cell:last-child {
-  border-right: none;
-}
-
-.ag-theme-alpine .ag-row {
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.ag-theme-alpine .ag-row:hover {
-  background-color: var(--ag-row-hover-color);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",
@@ -42,7 +42,8 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "CHANGELOG.md"
   ],
   "sideEffects": [
     "*.css"
@@ -60,6 +61,7 @@
     "test:coverage": "vitest run --project unit --coverage",
     "test:storybook": "vitest run --project storybook",
     "test:visual": "chromatic",
+    "version": "node scripts/stamp-changelog.mjs && git add CHANGELOG.md",
     "eslint": "eslint ./ --color --fix",
     "prettier": "prettier --write .",
     "stylelint": "stylelint '**/*.{css,scss}' --allow-empty-input",