@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 +53 -0
- package/README.md +4 -0
- package/dist/index.js +1 -1
- package/package.json +4 -2
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.
|
|
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",
|