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

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/README.md +37 -29
  2. package/base.css +2 -0
  3. package/package.json +2 -1
  4. package/preflight.css +48 -0
package/README.md CHANGED
@@ -9,10 +9,11 @@ runtime via CSS variables — the equivalent of `@mozaic-ds/tokens`.
9
9
 
10
10
  The theme has two parts:
11
11
 
12
- | File | Contents | Brand-specific? |
13
- |---|---|---|
14
- | `base.css` | **Structural + status** tokens (`--spacing-*`, `--border-radius-*`, `--font-size-*`, `--font-weight-*`, `--shadow-*`, `--color-danger-*`…) | No |
15
- | `presets/<brand>.css` | **Brand** tokens — typeface (`--font-family`) and functional colors (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
12
+ | File | Contents | Brand-specific? |
13
+ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
14
+ | `base.css` | **Structural + status** tokens + imports `preflight.css` | No |
15
+ | `preflight.css` | **UA wipe** for form controls (`button`, `input`, …), scoped to `.preset-*` | No |
16
+ | `presets/<brand>.css` | **Brand** tokens — typeface (`--font-family`) and functional colors (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
16
17
 
17
18
  The brand is selected with a **class on the root element** (`.preset-lm`,
18
19
  `.preset-adeo`) and light/dark mode with the **`data-theme`** attribute.
@@ -44,33 +45,38 @@ styles**:
44
45
  **Leroy Merlin projects**
45
46
 
46
47
  ```js
47
- import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // includes base.css
48
- import '@ptlm-azulejo/button/style.css'
48
+ import "@ptlm-azulejo/themes/presets/leroy-merlin.css"; // includes base.css
49
+ import "@ptlm-azulejo/button/style.css";
49
50
  ```
50
51
 
51
52
  **Adeo projects**
52
53
 
53
54
  ```js
54
- import '@ptlm-azulejo/themes/presets/adeo.css' // includes base.css
55
- import '@ptlm-azulejo/button/style.css'
55
+ import "@ptlm-azulejo/themes/presets/adeo.css"; // includes base.css
56
+ import "@ptlm-azulejo/button/style.css";
56
57
  ```
57
58
 
58
- > Each preset `@import`s `base.css` (the structural + status tokens), so a single
59
- > preset import gives you everything. You can still import `base.css` on its own
60
- > (`@ptlm-azulejo/themes/base.css`) if you ever need it without a brand — but note
61
- > it carries **no `--font-family`**, since the typeface belongs to the brand.
62
- > Without a preset, components render uncolored and fall back to a generic
63
- > sans-serif (the font weights still apply). Define `--font-family` yourself if you
64
- > go this route.
59
+ > Each preset `@import`s `base.css` (the structural + status tokens **and** a
60
+ > scoped UA preflight), so a single preset import gives you everything. You can
61
+ > still import `base.css` on its own (`@ptlm-azulejo/themes/base.css`) if you
62
+ > ever need it without a brand — but note it carries **no `--font-family`**,
63
+ > since the typeface belongs to the brand. Without a preset, components render
64
+ > uncolored and fall back to a generic sans-serif (the font weights still apply).
65
+ > Define `--font-family` yourself if you go this route.
66
+ >
67
+ > The preflight only runs under `.preset-lm` / `.preset-adeo` (via `:where(…)` so
68
+ > component utilities still win). It clears browser defaults on `button`,
69
+ > `input`, `select`, and `textarea` so Azulejo controls look the same whether or
70
+ > not the host app runs Tailwind Preflight.
65
71
 
66
72
  Then apply the brand class on `<html>` (or any container):
67
73
 
68
74
  ```html
69
75
  <!-- Leroy Merlin, light (default) -->
70
76
  <html class="preset-lm">
71
-
72
- <!-- Adeo, dark -->
73
- <html class="preset-adeo" data-theme="dark">
77
+ <!-- Adeo, dark -->
78
+ <html class="preset-adeo" data-theme="dark"></html>
79
+ </html>
74
80
  ```
75
81
 
76
82
  > **Important:** without importing a preset (which bundles `base.css`) **and**
@@ -91,18 +97,18 @@ files is the app's job.
91
97
 
92
98
  There is a package per brand that does exactly that job:
93
99
 
94
- | Brand | `--font-family` | Font package |
95
- |---|---|---|
96
- | `.preset-lm` | `"LeroyMerlin", Arial, sans-serif` | [`@ptlm-azulejo/fonts-leroy-merlin`](../FontsLeroyMerlin/README.md) |
97
- | `.preset-adeo` | `"Roboto", Arial, sans-serif` | [`@ptlm-azulejo/fonts-adeo`](../FontsAdeo/README.md) |
100
+ | Brand | `--font-family` | Font package |
101
+ | -------------- | ----------------------------------- | ------------------------------------------------------------------- |
102
+ | `.preset-lm` | `"LeroyMerlin", Arial, sans-serif` | [`@ptlm-azulejo/fonts-leroy-merlin`](../FontsLeroyMerlin/README.md) |
103
+ | `.preset-adeo` | `"Roboto", Arial, sans-serif` | [`@ptlm-azulejo/fonts-adeo`](../FontsAdeo/README.md) |
98
104
 
99
105
  ```bash
100
106
  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
101
107
  ```
102
108
 
103
109
  ```js
104
- import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
105
- import '@ptlm-azulejo/fonts-leroy-merlin'
110
+ import "@ptlm-azulejo/themes/presets/leroy-merlin.css";
111
+ import "@ptlm-azulejo/fonts-leroy-merlin";
106
112
  ```
107
113
 
108
114
  Until you load a typeface the fallback stack renders, so nothing breaks — it just
@@ -129,7 +135,7 @@ The two font packages differ, for licensing reasons:
129
135
  ### Only the active brand's font is downloaded
130
136
 
131
137
  You can declare **both** brands' faces and switch freely — the other brand's file
132
- is never fetched. `@font-face` is a *declaration*, not a fetch: a browser only
138
+ is never fetched. `@font-face` is a _declaration_, not a fetch: a browser only
133
139
  requests a font file when text it is actually rendering computes a `font-family`
134
140
  naming it. With `.preset-lm` on the root, nothing ever computes `Roboto`.
135
141
 
@@ -143,7 +149,9 @@ Components apply the brand typeface themselves, so they follow the brand rather
143
149
  than inheriting your page's font. To hand a component back to the page font:
144
150
 
145
151
  ```css
146
- .preset-lm .btn { font-family: inherit; }
152
+ .preset-lm .btn {
153
+ font-family: inherit;
154
+ }
147
155
  ```
148
156
 
149
157
  ### Switching brand at runtime
@@ -151,8 +159,8 @@ than inheriting your page's font. To hand a component back to the page font:
151
159
  Just swap the root class (both presets can be imported at the same time):
152
160
 
153
161
  ```js
154
- document.documentElement.classList.remove('preset-lm', 'preset-adeo')
155
- document.documentElement.classList.add('preset-adeo')
162
+ document.documentElement.classList.remove("preset-lm", "preset-adeo");
163
+ document.documentElement.classList.add("preset-adeo");
156
164
  ```
157
165
 
158
166
  ## Creating a custom brand
@@ -163,7 +171,7 @@ Define the same brand tokens of the contract under your brand class:
163
171
  .preset-my-brand {
164
172
  /* Typeface. The 400/500/600/700 weights come from base.css; override them here
165
173
  only if your typeface lacks those cuts. */
166
- --font-family: "Inter", Arial, sans-serif;
174
+ --font-family: "Inter", Arial, sans-serif;
167
175
 
168
176
  --color-brand: #6c2bd9;
169
177
  --color-brand-dark: #531fb0;
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.2.1-alpha.78",
3
+ "version": "1.2.1-alpha.80",
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": {
@@ -15,6 +15,7 @@
15
15
  },
16
16
  "files": [
17
17
  "base.css",
18
+ "preflight.css",
18
19
  "presets/*.css"
19
20
  ]
20
21
  }
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
+ }