@ptlm-azulejo/themes 1.3.1 → 1.3.2-alpha.121
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 +102 -0
- package/README.md +9 -9
- package/package.json +1 -1
- package/presets/adeo.css +4 -4
- package/presets/leroy-merlin.css +4 -4
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# @ptlm-azulejo/themes
|
|
2
|
+
|
|
3
|
+
## 1.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fbbee70: Formatting-only release. The repository adopted Prettier as its single
|
|
8
|
+
formatting authority, and every shipped file was reformatted in one pass: the
|
|
9
|
+
theme and font stylesheets (published verbatim, so their bytes change), each
|
|
10
|
+
package's README, and the component sources behind `dist/`.
|
|
11
|
+
|
|
12
|
+
No public API, prop, slot, event, CSS variable, class name or rendered output
|
|
13
|
+
changed. Upgrading requires nothing, and skipping this version costs nothing.
|
|
14
|
+
|
|
15
|
+
One internal cleanup rides along in `AzSegmentedControl`: a dead `null`
|
|
16
|
+
initializer and the unreachable branch guarding it were removed from the
|
|
17
|
+
keyboard handler. Arrow / Home / End navigation behaves exactly as before.
|
|
18
|
+
|
|
19
|
+
## 1.3.1
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- edbe6d9: Presets no longer bundle the scoped UA preflight that reset `button` / `input` / `select` / `textarea` under `.preset-lm` / `.preset-adeo`. Token and preset imports are unchanged.
|
|
24
|
+
|
|
25
|
+
## 1.3.0
|
|
26
|
+
|
|
27
|
+
### Minor Changes
|
|
28
|
+
|
|
29
|
+
- dda8cdb: Add a scoped UA preflight to themes (bundled with every preset) so Azulejo
|
|
30
|
+
controls don't depend on the host running Tailwind Preflight. Drop the
|
|
31
|
+
per-segment button-reset utilities from SegmentedControl. Re-export
|
|
32
|
+
`SegmentedControlItem`, `SegmentedControlSize`, and `SegmentedControlUi`
|
|
33
|
+
from the package entry so consumers can import the types again.
|
|
34
|
+
|
|
35
|
+
## 1.2.1
|
|
36
|
+
|
|
37
|
+
### Patch Changes
|
|
38
|
+
|
|
39
|
+
- e5341cd: Documentation. Every package README now spells out both brands end to end instead
|
|
40
|
+
of showing one snippet with an "or" comment: which preset stylesheet to import,
|
|
41
|
+
which `.preset-*` class goes on `<html>` to select the theme at runtime,
|
|
42
|
+
`data-theme` for light/dark, and which font package the project needs (Leroy
|
|
43
|
+
Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
|
|
44
|
+
|
|
45
|
+
No component behaviour, prop or token changed. The patch bump exists because npm
|
|
46
|
+
ships `README.md` inside the tarball and renders it as the package page, so the
|
|
47
|
+
corrected instructions only reach consumers on a release.
|
|
48
|
+
|
|
49
|
+
## 1.2.0
|
|
50
|
+
|
|
51
|
+
### Minor Changes
|
|
52
|
+
|
|
53
|
+
- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
|
|
54
|
+
expose stable `data-testid` hooks.
|
|
55
|
+
|
|
56
|
+
- Each preset now names its brand's typeface in `--font-family`
|
|
57
|
+
(`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
|
|
58
|
+
`Arial, sans-serif` as the fallback stack.
|
|
59
|
+
- Components apply that typeface on their root, so they follow the active brand
|
|
60
|
+
instead of inheriting the host page's font. Opt out per component by setting
|
|
61
|
+
`--font-family: inherit` on it.
|
|
62
|
+
- `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
|
|
63
|
+
(400), semi-bold (600) and bold (700) weights.
|
|
64
|
+
- Every component now exposes `data-testid` on its root and on meaningful
|
|
65
|
+
sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
|
|
66
|
+
`datepicker` / `datepicker-clear`, `segmented-control` /
|
|
67
|
+
`segmented-control-segment`), so tests can target them without depending on
|
|
68
|
+
CSS class names.
|
|
69
|
+
|
|
70
|
+
As with upstream Mozaic, the presets **name** the typeface but ship no
|
|
71
|
+
`@font-face` and no font binaries — loading the files stays the app's job, so you
|
|
72
|
+
keep control of hosting, subsetting and preload. Until you load them the fallback
|
|
73
|
+
stack renders and nothing breaks. Install the font package matching your brand
|
|
74
|
+
alongside the preset:
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
# Leroy Merlin
|
|
78
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
79
|
+
# Adeo
|
|
80
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
See the Fonts section of `packages/themes/README.md` for the full recipe.
|
|
84
|
+
|
|
85
|
+
## 1.1.0
|
|
86
|
+
|
|
87
|
+
### Minor Changes
|
|
88
|
+
|
|
89
|
+
- 53000f7: Add Mozaic-aligned multi-brand theming support.
|
|
90
|
+
|
|
91
|
+
- New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
|
|
92
|
+
and brand presets selected by a root class (`presets/leroy-merlin.css`,
|
|
93
|
+
`presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
|
|
94
|
+
light/dark.
|
|
95
|
+
- `AzButton` now consumes theme tokens through utilities mapped in
|
|
96
|
+
`@theme inline`, working across both brands and in light/dark.
|
|
97
|
+
|
|
98
|
+
**BREAKING:** components no longer bake brand colors. The consumer must now
|
|
99
|
+
import `@ptlm-azulejo/themes/base.css` + a preset and apply the
|
|
100
|
+
`.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
|
|
101
|
+
element; otherwise components render uncolored. See the migration notes in
|
|
102
|
+
`packages/themes/README.md`.
|
package/README.md
CHANGED
|
@@ -45,15 +45,15 @@ styles**:
|
|
|
45
45
|
**Leroy Merlin projects**
|
|
46
46
|
|
|
47
47
|
```js
|
|
48
|
-
import
|
|
49
|
-
import
|
|
48
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // includes base.css
|
|
49
|
+
import '@ptlm-azulejo/button/style.css'
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
**Adeo projects**
|
|
53
53
|
|
|
54
54
|
```js
|
|
55
|
-
import
|
|
56
|
-
import
|
|
55
|
+
import '@ptlm-azulejo/themes/presets/adeo.css' // includes base.css
|
|
56
|
+
import '@ptlm-azulejo/button/style.css'
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
> Each preset `@import`s `base.css` (the structural + status tokens **and** a
|
|
@@ -107,8 +107,8 @@ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
```js
|
|
110
|
-
import
|
|
111
|
-
import
|
|
110
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
|
|
111
|
+
import '@ptlm-azulejo/fonts-leroy-merlin'
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
Until you load a typeface the fallback stack renders, so nothing breaks — it just
|
|
@@ -159,8 +159,8 @@ than inheriting your page's font. To hand a component back to the page font:
|
|
|
159
159
|
Just swap the root class (both presets can be imported at the same time):
|
|
160
160
|
|
|
161
161
|
```js
|
|
162
|
-
document.documentElement.classList.remove(
|
|
163
|
-
document.documentElement.classList.add(
|
|
162
|
+
document.documentElement.classList.remove('preset-lm', 'preset-adeo')
|
|
163
|
+
document.documentElement.classList.add('preset-adeo')
|
|
164
164
|
```
|
|
165
165
|
|
|
166
166
|
## Creating a custom brand
|
|
@@ -171,7 +171,7 @@ Define the same brand tokens of the contract under your brand class:
|
|
|
171
171
|
.preset-my-brand {
|
|
172
172
|
/* Typeface. The 400/500/600/700 weights come from base.css; override them here
|
|
173
173
|
only if your typeface lacks those cuts. */
|
|
174
|
-
--font-family:
|
|
174
|
+
--font-family: 'Inter', Arial, sans-serif;
|
|
175
175
|
|
|
176
176
|
--color-brand: #6c2bd9;
|
|
177
177
|
--color-brand-dark: #531fb0;
|
package/package.json
CHANGED
package/presets/adeo.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
/* Structural + status tokens (brand-agnostic) come bundled with the preset, so
|
|
14
14
|
consumers only need to import this single file. */
|
|
15
|
-
@import
|
|
15
|
+
@import '../base.css';
|
|
16
16
|
|
|
17
17
|
.preset-adeo {
|
|
18
18
|
/* ── Palette · Teal (primary) ─────────────────────────────── */
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
--color-brand-dark: var(--color-teal-700);
|
|
65
65
|
--color-brand-light: var(--color-teal-100);
|
|
66
66
|
|
|
67
|
-
--font-family:
|
|
67
|
+
--font-family: 'Roboto', Arial, sans-serif;
|
|
68
68
|
|
|
69
69
|
/* ── Functional tokens · light (default) ──────────────────── */
|
|
70
70
|
--color-text-primary: #000000;
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
/* ── Functional tokens · dark ────────────────────────────────── */
|
|
92
|
-
.preset-adeo[data-theme=
|
|
92
|
+
.preset-adeo[data-theme='dark'] {
|
|
93
93
|
--color-text-primary: #e6e6e6;
|
|
94
94
|
--color-text-secondary: #cccccc;
|
|
95
95
|
--color-text-tertiary: #b3b3b3;
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
/* ── Automatic fallback: follow the OS when data-theme is unset ── */
|
|
114
114
|
@media (prefers-color-scheme: dark) {
|
|
115
|
-
.preset-adeo:not([data-theme=
|
|
115
|
+
.preset-adeo:not([data-theme='light']) {
|
|
116
116
|
--color-text-primary: #e6e6e6;
|
|
117
117
|
--color-text-secondary: #cccccc;
|
|
118
118
|
--color-text-tertiary: #b3b3b3;
|
package/presets/leroy-merlin.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
/* Structural + status tokens (brand-agnostic) come bundled with the preset, so
|
|
14
14
|
consumers only need to import this single file. */
|
|
15
|
-
@import
|
|
15
|
+
@import '../base.css';
|
|
16
16
|
|
|
17
17
|
.preset-lm {
|
|
18
18
|
/* ── Palette · Green (primary) ────────────────────────────── */
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
--color-brand-dark: var(--color-green-700);
|
|
43
43
|
--color-brand-light: var(--color-green-100);
|
|
44
44
|
|
|
45
|
-
--font-family:
|
|
45
|
+
--font-family: 'LeroyMerlin', Arial, sans-serif;
|
|
46
46
|
|
|
47
47
|
/* ── Functional tokens · light (default) ──────────────────── */
|
|
48
48
|
--color-text-primary: #000000;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
/* ── Functional tokens · dark ────────────────────────────────── */
|
|
70
|
-
.preset-lm[data-theme=
|
|
70
|
+
.preset-lm[data-theme='dark'] {
|
|
71
71
|
--color-text-primary: #e6e6e6;
|
|
72
72
|
--color-text-secondary: #cccccc;
|
|
73
73
|
--color-text-tertiary: #b3b3b3;
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
/* ── Automatic fallback: follow the OS when data-theme is unset ── */
|
|
92
92
|
@media (prefers-color-scheme: dark) {
|
|
93
|
-
.preset-lm:not([data-theme=
|
|
93
|
+
.preset-lm:not([data-theme='light']) {
|
|
94
94
|
--color-text-primary: #e6e6e6;
|
|
95
95
|
--color-text-secondary: #cccccc;
|
|
96
96
|
--color-text-tertiary: #b3b3b3;
|