npm - @ptlm-azulejo/themes - Versions diffs - 1.2.1-alpha.80 → 1.2.1 - Mend

@ptlm-azulejo/themes 1.2.1-alpha.80 → 1.2.1

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

package/README.md CHANGED Viewed

@@ -9,11 +9,10 @@ runtime via CSS variables — the equivalent of `@mozaic-ds/tokens`.
 The theme has two parts:
-| File                  | Contents                                                                                                                                            | Brand-specific? |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `base.css`            | **Structural + status** tokens + imports `preflight.css`                                                                                            | No              |
-| `preflight.css`       | **UA wipe** for form controls (`button`, `input`, …), scoped to `.preset-*`                                                                         | No              |
-| `presets/<brand>.css` | **Brand** tokens — typeface (`--font-family`) and functional colors (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes             |
+| File | Contents | Brand-specific? |
+|---|---|---|
+| `base.css` | **Structural + status** tokens (`--spacing-*`, `--border-radius-*`, `--font-size-*`, `--font-weight-*`, `--shadow-*`, `--color-danger-*`…) | No |
+| `presets/<brand>.css` | **Brand** tokens — typeface (`--font-family`) and functional colors (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
 The brand is selected with a **class on the root element** (`.preset-lm`,
 `.preset-adeo`) and light/dark mode with the **`data-theme`** attribute.
@@ -45,38 +44,33 @@ styles**:
 **Leroy Merlin projects**
 ```js
-import "@ptlm-azulejo/themes/presets/leroy-merlin.css"; // includes base.css
-import "@ptlm-azulejo/button/style.css";
+import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // includes base.css
+import '@ptlm-azulejo/button/style.css'
 ```
 **Adeo projects**
 ```js
-import "@ptlm-azulejo/themes/presets/adeo.css"; // includes base.css
-import "@ptlm-azulejo/button/style.css";
+import '@ptlm-azulejo/themes/presets/adeo.css' // includes base.css
+import '@ptlm-azulejo/button/style.css'
 ```
-> Each preset `@import`s `base.css` (the structural + status tokens **and** a
-> scoped UA preflight), so a single preset import gives you everything. You can
-> still import `base.css` on its own (`@ptlm-azulejo/themes/base.css`) if you
-> ever need it without a brand — but note it carries **no `--font-family`**,
-> since the typeface belongs to the brand. Without a preset, components render
-> uncolored and fall back to a generic sans-serif (the font weights still apply).
-> Define `--font-family` yourself if you go this route.
->
-> The preflight only runs under `.preset-lm` / `.preset-adeo` (via `:where(…)` so
-> component utilities still win). It clears browser defaults on `button`,
-> `input`, `select`, and `textarea` so Azulejo controls look the same whether or
-> not the host app runs Tailwind Preflight.
+> Each preset `@import`s `base.css` (the structural + status tokens), so a single
+> preset import gives you everything. You can still import `base.css` on its own
+> (`@ptlm-azulejo/themes/base.css`) if you ever need it without a brand — but note
+> it carries **no `--font-family`**, since the typeface belongs to the brand.
+> Without a preset, components render uncolored and fall back to a generic
+> sans-serif (the font weights still apply). Define `--font-family` yourself if you
+> go this route.
 Then apply the brand class on `<html>` (or any container):
 ```html
 <!-- Leroy Merlin, light (default) -->
 <html class="preset-lm">
-  <!-- Adeo, dark -->
-  <html class="preset-adeo" data-theme="dark"></html>
-</html>
+<!-- Adeo, dark -->
+<html class="preset-adeo" data-theme="dark">
 ```
 > **Important:** without importing a preset (which bundles `base.css`) **and**
@@ -97,18 +91,18 @@ files is the app's job.
 There is a package per brand that does exactly that job:
-| Brand          | `--font-family`                     | Font package                                                        |
-| -------------- | ----------------------------------- | ------------------------------------------------------------------- |
-| `.preset-lm`   | `"LeroyMerlin",  Arial, sans-serif` | [`@ptlm-azulejo/fonts-leroy-merlin`](../FontsLeroyMerlin/README.md) |
-| `.preset-adeo` | `"Roboto",  Arial, sans-serif`      | [`@ptlm-azulejo/fonts-adeo`](../FontsAdeo/README.md)                |
+| Brand | `--font-family` | Font package |
+|---|---|---|
+| `.preset-lm` | `"LeroyMerlin",  Arial, sans-serif` | [`@ptlm-azulejo/fonts-leroy-merlin`](../FontsLeroyMerlin/README.md) |
+| `.preset-adeo` | `"Roboto",  Arial, sans-serif` | [`@ptlm-azulejo/fonts-adeo`](../FontsAdeo/README.md) |
 ```bash
 yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
 ```
 ```js
-import "@ptlm-azulejo/themes/presets/leroy-merlin.css";
-import "@ptlm-azulejo/fonts-leroy-merlin";
+import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
+import '@ptlm-azulejo/fonts-leroy-merlin'
 ```
 Until you load a typeface the fallback stack renders, so nothing breaks — it just
@@ -135,7 +129,7 @@ The two font packages differ, for licensing reasons:
 ### Only the active brand's font is downloaded
 You can declare **both** brands' faces and switch freely — the other brand's file
-is never fetched. `@font-face` is a _declaration_, not a fetch: a browser only
+is never fetched. `@font-face` is a *declaration*, not a fetch: a browser only
 requests a font file when text it is actually rendering computes a `font-family`
 naming it. With `.preset-lm` on the root, nothing ever computes `Roboto`.
@@ -149,9 +143,7 @@ Components apply the brand typeface themselves, so they follow the brand rather
 than inheriting your page's font. To hand a component back to the page font:
 ```css
-.preset-lm .btn {
-  font-family: inherit;
-}
+.preset-lm .btn { font-family: inherit; }
 ```
 ### Switching brand at runtime
@@ -159,8 +151,8 @@ than inheriting your page's font. To hand a component back to the page font:
 Just swap the root class (both presets can be imported at the same time):
 ```js
-document.documentElement.classList.remove("preset-lm", "preset-adeo");
-document.documentElement.classList.add("preset-adeo");
+document.documentElement.classList.remove('preset-lm', 'preset-adeo')
+document.documentElement.classList.add('preset-adeo')
 ```
 ## Creating a custom brand
@@ -171,7 +163,7 @@ Define the same brand tokens of the contract under your brand class:
 .preset-my-brand {
   /* Typeface. The 400/500/600/700 weights come from base.css; override them here
      only if your typeface lacks those cuts. */
-  --font-family: "Inter", Arial, sans-serif;
+  --font-family: "Inter",  Arial, sans-serif;
   --color-brand: #6c2bd9;
   --color-brand-dark: #531fb0;

package/base.css CHANGED Viewed

@@ -16,8 +16,6 @@
  *   // <html class="preset-lm" data-theme="dark">  (dark)
  */
-@import "./preflight.css";
 :root {
   /* ── Tailwind base scale (shipped to the consumer) ───────────
      Utilities like px-4, gap-2, w-4 compile to calc(var(--spacing)*N).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ptlm-azulejo/themes",
-  "version": "1.2.1-alpha.80",
+  "version": "1.2.1",
   "description": "Multi-brand theme tokens (Leroy Merlin, Adeo) for the @ptlm-azulejo components, aligned with the Mozaic Design System.",
   "type": "module",
   "exports": {
@@ -15,7 +15,6 @@
   },
   "files": [
     "base.css",
-    "preflight.css",
     "presets/*.css"
   ]
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,70 +0,0 @@
-# @ptlm-azulejo/themes
-## 1.2.1
-### Patch Changes
-- e5341cd: Documentation. Every package README now spells out both brands end to end instead
-  of showing one snippet with an "or" comment: which preset stylesheet to import,
-  which `.preset-*` class goes on `<html>` to select the theme at runtime,
-  `data-theme` for light/dark, and which font package the project needs (Leroy
-  Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
-  No component behaviour, prop or token changed. The patch bump exists because npm
-  ships `README.md` inside the tarball and renders it as the package page, so the
-  corrected instructions only reach consumers on a release.
-## 1.2.0
-### Minor Changes
-- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
-  expose stable `data-testid` hooks.
-  - Each preset now names its brand's typeface in `--font-family`
-    (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
-    `Arial, sans-serif` as the fallback stack.
-  - Components apply that typeface on their root, so they follow the active brand
-    instead of inheriting the host page's font. Opt out per component by setting
-    `--font-family: inherit` on it.
-  - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
-    (400), semi-bold (600) and bold (700) weights.
-  - Every component now exposes `data-testid` on its root and on meaningful
-    sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
-    `datepicker` / `datepicker-clear`, `segmented-control` /
-    `segmented-control-segment`), so tests can target them without depending on
-    CSS class names.
-  As with upstream Mozaic, the presets **name** the typeface but ship no
-  `@font-face` and no font binaries — loading the files stays the app's job, so you
-  keep control of hosting, subsetting and preload. Until you load them the fallback
-  stack renders and nothing breaks. Install the font package matching your brand
-  alongside the preset:
-  ```bash
-  # Leroy Merlin
-  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
-  # Adeo
-  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
-  ```
-  See the Fonts section of `packages/themes/README.md` for the full recipe.
-## 1.1.0
-### Minor Changes
-- 53000f7: Add Mozaic-aligned multi-brand theming support.
-  - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
-    and brand presets selected by a root class (`presets/leroy-merlin.css`,
-    `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
-    light/dark.
-  - `AzButton` now consumes theme tokens through utilities mapped in
-    `@theme inline`, working across both brands and in light/dark.
-  **BREAKING:** components no longer bake brand colors. The consumer must now
-  import `@ptlm-azulejo/themes/base.css` + a preset and apply the
-  `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
-  element; otherwise components render uncolored. See the migration notes in
-  `packages/themes/README.md`.

package/preflight.css DELETED Viewed

@@ -1,48 +0,0 @@
-/**
- * @ptlm-azulejo/themes — preflight.css
- *
- * Minimal UA wipe for hosts that activate an Azulejo brand preset.
- * Scoped to `.preset-lm` / `.preset-adeo` (the same root class consumers already
- * apply). Storybook also runs full Tailwind Preflight via root `tailwind.css`;
- * this file is what bare consumers get when they only import a preset +
- * component `style.css`.
- *
- * Uses `:where(…)` so component utilities (e.g. `border`, `bg-accent`,
- * `cursor-not-allowed`) keep winning on specificity.
- *
- * Bundled from `base.css` — do not import this file on its own unless you know
- * you need the wipe without tokens.
- */
-:is(.preset-lm, .preset-adeo),
-:is(.preset-lm, .preset-adeo) :where(*, *::before, *::after) {
-  box-sizing: border-box;
-}
-:is(.preset-lm, .preset-adeo)
-  :where(button, input, select, textarea, optgroup) {
-  font: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  border: 0 solid transparent;
-  border-radius: 0;
-  background-color: transparent;
-  appearance: none;
-}
-:is(.preset-lm, .preset-adeo)
-  :where(button, [type="button"], [type="reset"], [type="submit"]) {
-  cursor: pointer;
-}
-:is(.preset-lm, .preset-adeo)
-  :where(
-    button:disabled,
-    [type="button"]:disabled,
-    [type="reset"]:disabled,
-    [type="submit"]:disabled
-  ) {
-  cursor: default;
-}