@ptlm-azulejo/loader 1.1.0-alpha.72 → 1.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 +10 -63
  2. package/dist/src/index.stories.d.ts.map +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -4,83 +4,30 @@ A loader is a visual indicator used to inform users that a process is in progres
4
4
 
5
5
  ## Installation
6
6
 
7
- Install the loader, the theme package, and **the font package matching your
8
- project's brand**:
9
-
10
- **Leroy Merlin projects**
11
-
12
- ```bash
13
- npm install @ptlm-azulejo/loader @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
14
- # or
15
- yarn add @ptlm-azulejo/loader @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
16
- ```
17
-
18
- **Adeo projects**
19
-
20
7
  ```bash
21
- npm install @ptlm-azulejo/loader @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
8
+ npm install @ptlm-azulejo/loader @ptlm-azulejo/themes
22
9
  # or
23
- yarn add @ptlm-azulejo/loader @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
10
+ yarn add @ptlm-azulejo/loader @ptlm-azulejo/themes
24
11
  ```
25
12
 
26
13
  ## Styles & theming
27
14
 
28
- The component 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 **the
30
- brand is selected by a class on your app's `<html>` element**, so switching brand
31
- 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**
39
-
40
- ```js
41
- import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
42
- import '@ptlm-azulejo/fonts-leroy-merlin'
43
- import '@ptlm-azulejo/loader/style.css'
44
- ```
45
-
46
- ```html
47
- <html lang="pt" class="preset-lm">
48
- ```
49
-
50
- **Adeo projects**
15
+ The component 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:
51
18
 
52
19
  ```js
53
- import '@ptlm-azulejo/themes/presets/adeo.css'
54
- import '@ptlm-azulejo/fonts-adeo'
20
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
55
21
  import '@ptlm-azulejo/loader/style.css'
56
22
  ```
57
23
 
58
24
  ```html
59
- <html lang="pt" class="preset-adeo">
60
- ```
61
-
62
- > The preset class is what resolves the brand at runtime. Without it — even with
63
- > the stylesheets imported — the component 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">
25
+ <html class="preset-lm" data-theme="dark">
74
26
  ```
75
27
 
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.
28
+ > Without a preset **and** the `.preset-*` class, the component renders uncolored.
29
+ > See the [themes package](../themes/README.md) for brand switching, dark mode,
30
+ > and custom brands.
84
31
 
85
32
  ## Props
86
33
 
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,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiI7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
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,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA6E7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/loader",
3
- "version": "1.1.0-alpha.72",
3
+ "version": "1.1.0-alpha.73",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "module": "./dist/index.js",