@ptlm-azulejo/button 2.1.0-alpha.72 → 2.1.0-alpha.73

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 (3) hide show
  1. package/README.md +21 -59
  2. package/dist/src/index.stories.d.ts.map +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -4,85 +4,47 @@ Buttons are key interactive elements used to perform actions and can be used as
4
4
 
5
5
  ## Installation
6
6
 
7
- Install the button, the theme package, and **the font package matching your
8
- project's brand**:
9
-
10
- **Leroy Merlin projects**
11
-
12
7
  ```bash
13
- npm install @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
8
+ npm install @ptlm-azulejo/button @ptlm-azulejo/themes
14
9
  # or
15
- yarn add @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
16
- ```
17
-
18
- **Adeo projects**
19
-
20
- ```bash
21
- npm install @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
22
- # or
23
- yarn add @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
10
+ yarn add @ptlm-azulejo/button @ptlm-azulejo/themes
24
11
  ```
25
12
 
26
13
  ## Styles & theming
27
14
 
28
- The button ships no colors or typeface of its own — it reads design tokens from
29
- CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and
30
- **the brand is selected by a class on your app's `<html>` element**, so switching
31
- brand never touches component code.
32
-
33
- | Project | Preset stylesheet | Root class | Typeface | Font package |
34
- | --- | --- | --- | --- | --- |
35
- | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
36
- | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
37
-
38
- **Leroy Merlin projects**
15
+ The button reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
16
+ brand preset (it bundles the base tokens) and the component styles, then set the
17
+ brand class on the root element:
39
18
 
40
19
  ```js
41
- import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
42
- import '@ptlm-azulejo/fonts-leroy-merlin'
20
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
43
21
  import '@ptlm-azulejo/button/style.css'
44
22
  ```
45
23
 
46
24
  ```html
47
- <html lang="pt" class="preset-lm">
25
+ <html class="preset-lm" data-theme="dark">
48
26
  ```
49
27
 
50
- **Adeo projects**
28
+ > Without a preset **and** the `.preset-*` class, the button renders uncolored.
29
+ > See the [themes package](../themes/README.md) for brand switching, dark mode,
30
+ > and custom brands.
51
31
 
52
- ```js
53
- import '@ptlm-azulejo/themes/presets/adeo.css'
54
- import '@ptlm-azulejo/fonts-adeo'
55
- import '@ptlm-azulejo/button/style.css'
56
- ```
32
+ The button also sets its own `font-family` from the preset's `--font-family`, so
33
+ its label follows the active brand (LeroyMerlin / Roboto) rather than inheriting
34
+ the page font. The preset only *names* the typeface, so you must also install the
35
+ matching font package — without it `font-sans` falls back to a generic sans-serif:
57
36
 
58
- ```html
59
- <html lang="pt" class="preset-adeo">
37
+ ```bash
38
+ yarn add @ptlm-azulejo/fonts-leroy-merlin # or @ptlm-azulejo/fonts-adeo for .preset-adeo
60
39
  ```
61
40
 
62
- > The preset class is what resolves the brand at runtime. Without it — even with
63
- > the stylesheets imported — the button renders uncolored and in a fallback
64
- > typeface. See the [themes package](../themes/README.md) for brand switching,
65
- > dark mode, and custom brands.
66
-
67
- ### Light and dark mode
68
-
69
- Add `data-theme` alongside the brand class to pin the color scheme. Leave it off
70
- and the preset follows the OS `prefers-color-scheme`:
71
-
72
- ```html
73
- <html lang="pt" class="preset-lm" data-theme="dark">
41
+ ```js
42
+ import '@ptlm-azulejo/fonts-leroy-merlin' // or '@ptlm-azulejo/fonts-adeo'
74
43
  ```
75
44
 
76
- ### Why the font package is separate
77
-
78
- The preset only *names* its typeface in `--font-family` and ships no font files.
79
- [Loading them is your app's job](../themes/README.md#fonts), as with upstream
80
- Mozaic, so you keep control of hosting, subsetting and preload. Without the
81
- matching font package, `font-sans` falls back to a generic sans-serif. A
82
- multi-brand app can install both and switch by swapping the `.preset-*` class:
83
- only the active brand's file is ever downloaded.
84
-
85
- To hand the button back to your page's font:
45
+ [Loading the font files is your app's job](../themes/README.md#fonts), as with
46
+ upstream Mozaic; until then the fallback stack renders. To hand the button back to
47
+ your page's font:
86
48
 
87
49
  ```css
88
50
  .preset-lm .btn { font-family: inherit; }
package/dist/src/index.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyK7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
1
+ {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/button",
3
- "version": "2.1.0-alpha.72",
3
+ "version": "2.1.0-alpha.73",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "module": "./dist/index.js",