@ptlm-azulejo/themes 1.3.0-alpha.84 → 1.3.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.
Files changed (4) hide show
  1. package/base.css +2 -0
  2. package/package.json +1 -1
  3. package/preflight.css +48 -0
  4. package/CHANGELOG.md +0 -80
package/base.css CHANGED
@@ -16,6 +16,8 @@
16
16
  * // <html class="preset-lm" data-theme="dark"> (dark)
17
17
  */
18
18
 
19
+ @import "./preflight.css";
20
+
19
21
  :root {
20
22
  /* ── Tailwind base scale (shipped to the consumer) ───────────
21
23
  Utilities like px-4, gap-2, w-4 compile to calc(var(--spacing)*N).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/themes",
3
- "version": "1.3.0-alpha.84",
3
+ "version": "1.3.0",
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/preflight.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * @ptlm-azulejo/themes — preflight.css
3
+ *
4
+ * Minimal UA wipe for hosts that activate an Azulejo brand preset.
5
+ * Scoped to `.preset-lm` / `.preset-adeo` (the same root class consumers already
6
+ * apply). Storybook also runs full Tailwind Preflight via root `tailwind.css`;
7
+ * this file is what bare consumers get when they only import a preset +
8
+ * component `style.css`.
9
+ *
10
+ * Uses `:where(…)` so component utilities (e.g. `border`, `bg-accent`,
11
+ * `cursor-not-allowed`) keep winning on specificity.
12
+ *
13
+ * Bundled from `base.css` — do not import this file on its own unless you know
14
+ * you need the wipe without tokens.
15
+ */
16
+
17
+ :is(.preset-lm, .preset-adeo),
18
+ :is(.preset-lm, .preset-adeo) :where(*, *::before, *::after) {
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ :is(.preset-lm, .preset-adeo)
23
+ :where(button, input, select, textarea, optgroup) {
24
+ font: inherit;
25
+ letter-spacing: inherit;
26
+ color: inherit;
27
+ margin: 0;
28
+ padding: 0;
29
+ border: 0 solid transparent;
30
+ border-radius: 0;
31
+ background-color: transparent;
32
+ appearance: none;
33
+ }
34
+
35
+ :is(.preset-lm, .preset-adeo)
36
+ :where(button, [type="button"], [type="reset"], [type="submit"]) {
37
+ cursor: pointer;
38
+ }
39
+
40
+ :is(.preset-lm, .preset-adeo)
41
+ :where(
42
+ button:disabled,
43
+ [type="button"]:disabled,
44
+ [type="reset"]:disabled,
45
+ [type="submit"]:disabled
46
+ ) {
47
+ cursor: default;
48
+ }
package/CHANGELOG.md DELETED
@@ -1,80 +0,0 @@
1
- # @ptlm-azulejo/themes
2
-
3
- ## 1.3.0
4
-
5
- ### Minor Changes
6
-
7
- - dda8cdb: Add a scoped UA preflight to themes (bundled with every preset) so Azulejo
8
- controls don't depend on the host running Tailwind Preflight. Drop the
9
- per-segment button-reset utilities from SegmentedControl. Re-export
10
- `SegmentedControlItem`, `SegmentedControlSize`, and `SegmentedControlUi`
11
- from the package entry so consumers can import the types again.
12
-
13
- ## 1.2.1
14
-
15
- ### Patch Changes
16
-
17
- - e5341cd: Documentation. Every package README now spells out both brands end to end instead
18
- of showing one snippet with an "or" comment: which preset stylesheet to import,
19
- which `.preset-*` class goes on `<html>` to select the theme at runtime,
20
- `data-theme` for light/dark, and which font package the project needs (Leroy
21
- Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
22
-
23
- No component behaviour, prop or token changed. The patch bump exists because npm
24
- ships `README.md` inside the tarball and renders it as the package page, so the
25
- corrected instructions only reach consumers on a release.
26
-
27
- ## 1.2.0
28
-
29
- ### Minor Changes
30
-
31
- - eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
32
- expose stable `data-testid` hooks.
33
-
34
- - Each preset now names its brand's typeface in `--font-family`
35
- (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
36
- `Arial, sans-serif` as the fallback stack.
37
- - Components apply that typeface on their root, so they follow the active brand
38
- instead of inheriting the host page's font. Opt out per component by setting
39
- `--font-family: inherit` on it.
40
- - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
41
- (400), semi-bold (600) and bold (700) weights.
42
- - Every component now exposes `data-testid` on its root and on meaningful
43
- sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
44
- `datepicker` / `datepicker-clear`, `segmented-control` /
45
- `segmented-control-segment`), so tests can target them without depending on
46
- CSS class names.
47
-
48
- As with upstream Mozaic, the presets **name** the typeface but ship no
49
- `@font-face` and no font binaries — loading the files stays the app's job, so you
50
- keep control of hosting, subsetting and preload. Until you load them the fallback
51
- stack renders and nothing breaks. Install the font package matching your brand
52
- alongside the preset:
53
-
54
- ```bash
55
- # Leroy Merlin
56
- yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
57
- # Adeo
58
- yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
59
- ```
60
-
61
- See the Fonts section of `packages/themes/README.md` for the full recipe.
62
-
63
- ## 1.1.0
64
-
65
- ### Minor Changes
66
-
67
- - 53000f7: Add Mozaic-aligned multi-brand theming support.
68
-
69
- - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
70
- and brand presets selected by a root class (`presets/leroy-merlin.css`,
71
- `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
72
- light/dark.
73
- - `AzButton` now consumes theme tokens through utilities mapped in
74
- `@theme inline`, working across both brands and in light/dark.
75
-
76
- **BREAKING:** components no longer bake brand colors. The consumer must now
77
- import `@ptlm-azulejo/themes/base.css` + a preset and apply the
78
- `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
79
- element; otherwise components render uncolored. See the migration notes in
80
- `packages/themes/README.md`.