@alexandregme/zljs 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,53 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ 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).
6
+
7
+ 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).
8
+
9
+ ## [Unreleased]
10
+
11
+ ## [1.9.0] - 2026-11-02
12
+
13
+ ### Added
14
+
15
+ - `CHANGELOG.md` now ships with the package, and has a `Foundations/Changelog` page in Storybook
16
+
17
+ ## [1.8.0] - 2026-11-01
18
+
19
+ ### Added
20
+
21
+ - 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
22
+ - `Foundations/Colors` page in Storybook
23
+
24
+ ### Changed
25
+
26
+ - `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`
27
+ - `info` on `Heading` and `Text` is now `cyan-700` instead of `sky-700`
28
+ - `Button` and link hovers are now derived from their color, so they are slightly different
29
+
30
+ #### Migration
31
+
32
+ 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:
33
+
34
+ ```sh
35
+ grep -rnE "(hover:)?(text|bg)-(blue|green|red|yellow|sky|cyan|gray)-(\\\\d|[0-9])" src --include='*.test.*'
36
+ ```
37
+
38
+ 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.
39
+
40
+ | `color` | `Text`, `Heading`, `link` | Link hover | `Button` background | `Button` hover |
41
+ | --------- | ------------------------- | ------------------------------ | ------------------- | --------------------------- |
42
+ | `primary` | `text-zl-primary` | `hover:text-zl-primary-strong` | `bg-zl-primary-bg` | `hover:bg-zl-primary-hover` |
43
+ | `success` | `text-zl-success` | `hover:text-zl-success-strong` | `bg-zl-success-bg` | `hover:bg-zl-success-hover` |
44
+ | `danger` | `text-zl-danger` | `hover:text-zl-danger-strong` | `bg-zl-danger-bg` | `hover:bg-zl-danger-hover` |
45
+ | `warning` | `text-zl-warning` | `hover:text-zl-warning-strong` | `bg-zl-warning-bg` | `hover:bg-zl-warning-hover` |
46
+ | `info` | `text-zl-info` | `hover:text-zl-info-strong` | `bg-zl-info-bg` | `hover:bg-zl-info-hover` |
47
+ | `muted` | `text-zl-muted` | `hover:text-zl-muted-strong` | `bg-zl-muted-bg` | `hover:bg-zl-muted-hover` |
48
+
49
+ The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
50
+
51
+ [Unreleased]: https://github.com/alexandregme/zljs/compare/v1.9.0...HEAD
52
+ [1.9.0]: https://github.com/alexandregme/zljs/compare/v1.8.0...v1.9.0
53
+ [1.8.0]: https://github.com/alexandregme/zljs/compare/v1.7.0...v1.8.0
package/README.md CHANGED
@@ -67,6 +67,10 @@ The components work with no setup, using the default colors. To use your own, re
67
67
 
68
68
  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`.
69
69
 
70
+ ## Updating
71
+
72
+ 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`.
73
+
70
74
  ## Getting Started
71
75
 
72
76
  ```bash
package/dist/index.js CHANGED
@@ -679,7 +679,7 @@ var DataGrid = ({
679
679
  // core/text/text.styles.ts
680
680
  import { tv as tv8 } from "tailwind-variants";
681
681
 
682
- // core/types/colors.const.ts
682
+ // core/types/colors/colors.const.ts
683
683
  var semanticTextColors = {
684
684
  primary: "text-zl-primary",
685
685
  success: "text-zl-success",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alexandregme/zljs",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
5
5
  "keywords": [
6
6
  "react",
@@ -42,7 +42,8 @@
42
42
  "./package.json": "./package.json"
43
43
  },
44
44
  "files": [
45
- "dist"
45
+ "dist",
46
+ "CHANGELOG.md"
46
47
  ],
47
48
  "sideEffects": [
48
49
  "*.css"
@@ -60,6 +61,7 @@
60
61
  "test:coverage": "vitest run --project unit --coverage",
61
62
  "test:storybook": "vitest run --project storybook",
62
63
  "test:visual": "chromatic",
64
+ "version": "node scripts/stamp-changelog.mjs && git add CHANGELOG.md",
63
65
  "eslint": "eslint ./ --color --fix",
64
66
  "prettier": "prettier --write .",
65
67
  "stylelint": "stylelint '**/*.{css,scss}' --allow-empty-input",