@ptlm-azulejo/themes 1.3.2 → 1.4.0-alpha.208

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +115 -0
  2. package/base.css +14 -0
  3. package/package.json +1 -1
  4. package/presets/adeo.css +34 -0
  5. package/presets/leroy-merlin.css +34 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,115 @@
1
+ # @ptlm-azulejo/themes
2
+
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 66c7a93: Add `--color-background-disabled` (`#d9d9d9`)(from Design System), the Mozaic disabled surface shared by form and action controls.
8
+ - 2d3e3ab: Add `AzTag` (`@ptlm-azulejo/tag`) aligned with Mozaic `MTag`: informative, interactive, contextualised, removable, and selectable types, with sizes, `v-model`, `remove-tag`, an `iconClass` prop for `@ptlm-azulejo/icons` glyphs, and a `:ui` escape hatch. Props are a discriminated union on `type`, so TypeScript requires `id` and `name` for selectable tags and `id` for removable tags.
9
+
10
+ Themes gain shared disabled tokens (`--color-background-disabled`, `--color-text-disabled`) and brand tag color tokens (`--color-tag-*`) so tags follow `.preset-lm` / `.preset-adeo` and light/dark at runtime.
11
+
12
+ ### Patch Changes
13
+
14
+ - 85ee58d: Add `AzNumberBadge` — a circular numeric indicator for notifications and counts, with `appearance`, `size` (`s`, `m`, `l`), and `:ui` props. Theme package now ships Mozaic number-badge color tokens in `base.css`.
15
+
16
+ ## 1.3.2
17
+
18
+ ### Patch Changes
19
+
20
+ - fbbee70: Formatting-only release. The repository adopted Prettier as its single
21
+ formatting authority, and every shipped file was reformatted in one pass: the
22
+ theme and font stylesheets (published verbatim, so their bytes change), each
23
+ package's README, and the component sources behind `dist/`.
24
+
25
+ No public API, prop, slot, event, CSS variable, class name or rendered output
26
+ changed. Upgrading requires nothing, and skipping this version costs nothing.
27
+
28
+ One internal cleanup rides along in `AzSegmentedControl`: a dead `null`
29
+ initializer and the unreachable branch guarding it were removed from the
30
+ keyboard handler. Arrow / Home / End navigation behaves exactly as before.
31
+
32
+ ## 1.3.1
33
+
34
+ ### Patch Changes
35
+
36
+ - 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.
37
+
38
+ ## 1.3.0
39
+
40
+ ### Minor Changes
41
+
42
+ - dda8cdb: Add a scoped UA preflight to themes (bundled with every preset) so Azulejo
43
+ controls don't depend on the host running Tailwind Preflight. Drop the
44
+ per-segment button-reset utilities from SegmentedControl. Re-export
45
+ `SegmentedControlItem`, `SegmentedControlSize`, and `SegmentedControlUi`
46
+ from the package entry so consumers can import the types again.
47
+
48
+ ## 1.2.1
49
+
50
+ ### Patch Changes
51
+
52
+ - e5341cd: Documentation. Every package README now spells out both brands end to end instead
53
+ of showing one snippet with an "or" comment: which preset stylesheet to import,
54
+ which `.preset-*` class goes on `<html>` to select the theme at runtime,
55
+ `data-theme` for light/dark, and which font package the project needs (Leroy
56
+ Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
57
+
58
+ No component behaviour, prop or token changed. The patch bump exists because npm
59
+ ships `README.md` inside the tarball and renders it as the package page, so the
60
+ corrected instructions only reach consumers on a release.
61
+
62
+ ## 1.2.0
63
+
64
+ ### Minor Changes
65
+
66
+ - eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
67
+ expose stable `data-testid` hooks.
68
+
69
+ - Each preset now names its brand's typeface in `--font-family`
70
+ (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
71
+ `Arial, sans-serif` as the fallback stack.
72
+ - Components apply that typeface on their root, so they follow the active brand
73
+ instead of inheriting the host page's font. Opt out per component by setting
74
+ `--font-family: inherit` on it.
75
+ - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
76
+ (400), semi-bold (600) and bold (700) weights.
77
+ - Every component now exposes `data-testid` on its root and on meaningful
78
+ sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
79
+ `datepicker` / `datepicker-clear`, `segmented-control` /
80
+ `segmented-control-segment`), so tests can target them without depending on
81
+ CSS class names.
82
+
83
+ As with upstream Mozaic, the presets **name** the typeface but ship no
84
+ `@font-face` and no font binaries — loading the files stays the app's job, so you
85
+ keep control of hosting, subsetting and preload. Until you load them the fallback
86
+ stack renders and nothing breaks. Install the font package matching your brand
87
+ alongside the preset:
88
+
89
+ ```bash
90
+ # Leroy Merlin
91
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
92
+ # Adeo
93
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
94
+ ```
95
+
96
+ See the Fonts section of `packages/themes/README.md` for the full recipe.
97
+
98
+ ## 1.1.0
99
+
100
+ ### Minor Changes
101
+
102
+ - 53000f7: Add Mozaic-aligned multi-brand theming support.
103
+
104
+ - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
105
+ and brand presets selected by a root class (`presets/leroy-merlin.css`,
106
+ `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
107
+ light/dark.
108
+ - `AzButton` now consumes theme tokens through utilities mapped in
109
+ `@theme inline`, working across both brands and in light/dark.
110
+
111
+ **BREAKING:** components no longer bake brand colors. The consumer must now
112
+ import `@ptlm-azulejo/themes/base.css` + a preset and apply the
113
+ `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
114
+ element; otherwise components render uncolored. See the migration notes in
115
+ `packages/themes/README.md`.
package/base.css CHANGED
@@ -89,4 +89,18 @@
89
89
  --color-success-500: #46a610;
90
90
  --color-success-600: #188803;
91
91
  --color-success-700: #006902;
92
+
93
+ /* ── Disabled (Mozaic semantic, brand-agnostic) ─────────────── */
94
+ --color-background-disabled: #d9d9d9;
95
+ --color-text-disabled: #737373;
96
+
97
+ /* ── Number badge (Mozaic semantic, brand-agnostic) ─────────── */
98
+ --number-badge-color-background-standard: #464e63;
99
+ --number-badge-color-background-accent: #117f03;
100
+ --number-badge-color-background-danger: #c61112;
101
+ --number-badge-color-background-inverse: #ffffff;
102
+ --number-badge-color-text-standard: #ffffff;
103
+ --number-badge-color-text-accent: #ffffff;
104
+ --number-badge-color-text-danger: #ffffff;
105
+ --number-badge-color-text-inverse: #464e63;
92
106
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/themes",
3
- "version": "1.3.2",
3
+ "version": "1.4.0-alpha.208",
4
4
  "description": "Multi-brand theme tokens (Leroy Merlin, Adeo) for the @ptlm-azulejo components, aligned with the Mozaic Design System.",
5
5
  "type": "module",
6
6
  "exports": {
package/presets/adeo.css CHANGED
@@ -86,6 +86,18 @@
86
86
  --color-border-secondary: var(--color-blue-grey-400);
87
87
  --color-border-tertiary: var(--color-blue-grey-800);
88
88
  --color-border-inverse: #ffffff;
89
+
90
+ /* ── Tag component tokens ─────────────────────────────────── */
91
+ --color-tag-background-standard: var(--color-background-primary);
92
+ --color-tag-background-selected: var(--color-brand);
93
+ --color-tag-background-selected-hover: var(--color-brand-dark);
94
+ --color-tag-background-inverse: #333333;
95
+ --color-tag-background-inverse-hover: #4d4d4d;
96
+ --color-tag-text-standard: var(--color-text-primary);
97
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
98
+ --color-tag-border-informative: var(--color-border-primary);
99
+ --color-tag-border-interactive: var(--color-border-secondary);
100
+ --color-tag-delete-icon: #cccccc;
89
101
  }
90
102
 
91
103
  /* ── Functional tokens · dark ────────────────────────────────── */
@@ -108,6 +120,17 @@
108
120
  --color-border-secondary: #666666;
109
121
  --color-border-tertiary: #cccccc;
110
122
  --color-border-inverse: #ffffff;
123
+
124
+ --color-tag-background-standard: var(--color-background-primary);
125
+ --color-tag-background-selected: var(--color-teal-400);
126
+ --color-tag-background-selected-hover: var(--color-teal-300);
127
+ --color-tag-background-inverse: #cccccc;
128
+ --color-tag-background-inverse-hover: #e6e6e6;
129
+ --color-tag-text-standard: var(--color-text-primary);
130
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
131
+ --color-tag-border-informative: var(--color-border-primary);
132
+ --color-tag-border-interactive: var(--color-border-secondary);
133
+ --color-tag-delete-icon: #666666;
111
134
  }
112
135
 
113
136
  /* ── Automatic fallback: follow the OS when data-theme is unset ── */
@@ -131,5 +154,16 @@
131
154
  --color-border-secondary: #666666;
132
155
  --color-border-tertiary: #cccccc;
133
156
  --color-border-inverse: #ffffff;
157
+
158
+ --color-tag-background-standard: var(--color-background-primary);
159
+ --color-tag-background-selected: var(--color-teal-400);
160
+ --color-tag-background-selected-hover: var(--color-teal-300);
161
+ --color-tag-background-inverse: #cccccc;
162
+ --color-tag-background-inverse-hover: #e6e6e6;
163
+ --color-tag-text-standard: var(--color-text-primary);
164
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
165
+ --color-tag-border-informative: var(--color-border-primary);
166
+ --color-tag-border-interactive: var(--color-border-secondary);
167
+ --color-tag-delete-icon: #666666;
134
168
  }
135
169
  }
package/presets/leroy-merlin.css CHANGED
@@ -64,6 +64,18 @@
64
64
  --color-border-secondary: var(--color-blue-grey-400);
65
65
  --color-border-tertiary: var(--color-blue-grey-800);
66
66
  --color-border-inverse: #ffffff;
67
+
68
+ /* ── Tag component tokens ─────────────────────────────────── */
69
+ --color-tag-background-standard: var(--color-background-primary);
70
+ --color-tag-background-selected: var(--color-brand);
71
+ --color-tag-background-selected-hover: var(--color-brand-dark);
72
+ --color-tag-background-inverse: var(--color-blue-grey-800);
73
+ --color-tag-background-inverse-hover: var(--color-blue-grey-700);
74
+ --color-tag-text-standard: var(--color-blue-grey-800);
75
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
76
+ --color-tag-border-informative: var(--color-border-primary);
77
+ --color-tag-border-interactive: var(--color-border-secondary);
78
+ --color-tag-delete-icon: var(--color-blue-grey-200);
67
79
  }
68
80
 
69
81
  /* ── Functional tokens · dark ────────────────────────────────── */
@@ -86,6 +98,17 @@
86
98
  --color-border-secondary: #666666;
87
99
  --color-border-tertiary: #cccccc;
88
100
  --color-border-inverse: #ffffff;
101
+
102
+ --color-tag-background-standard: var(--color-background-primary);
103
+ --color-tag-background-selected: var(--color-green-400);
104
+ --color-tag-background-selected-hover: var(--color-green-300);
105
+ --color-tag-background-inverse: var(--color-blue-grey-200);
106
+ --color-tag-background-inverse-hover: var(--color-blue-grey-300);
107
+ --color-tag-text-standard: var(--color-text-primary);
108
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
109
+ --color-tag-border-informative: var(--color-border-primary);
110
+ --color-tag-border-interactive: var(--color-border-secondary);
111
+ --color-tag-delete-icon: var(--color-blue-grey-600);
89
112
  }
90
113
 
91
114
  /* ── Automatic fallback: follow the OS when data-theme is unset ── */
@@ -109,5 +132,16 @@
109
132
  --color-border-secondary: #666666;
110
133
  --color-border-tertiary: #cccccc;
111
134
  --color-border-inverse: #ffffff;
135
+
136
+ --color-tag-background-standard: var(--color-background-primary);
137
+ --color-tag-background-selected: var(--color-green-400);
138
+ --color-tag-background-selected-hover: var(--color-green-300);
139
+ --color-tag-background-inverse: var(--color-blue-grey-200);
140
+ --color-tag-background-inverse-hover: var(--color-blue-grey-300);
141
+ --color-tag-text-standard: var(--color-text-primary);
142
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
143
+ --color-tag-border-informative: var(--color-border-primary);
144
+ --color-tag-border-interactive: var(--color-border-secondary);
145
+ --color-tag-delete-icon: var(--color-blue-grey-600);
112
146
  }
113
147
  }