@ptlm-azulejo/themes 1.3.1 → 1.3.2
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.
- package/README.md +9 -9
- package/package.json +1 -1
- package/presets/adeo.css +4 -4
- package/presets/leroy-merlin.css +4 -4
package/README.md
CHANGED
|
@@ -45,15 +45,15 @@ styles**:
|
|
|
45
45
|
**Leroy Merlin projects**
|
|
46
46
|
|
|
47
47
|
```js
|
|
48
|
-
import
|
|
49
|
-
import
|
|
48
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // includes base.css
|
|
49
|
+
import '@ptlm-azulejo/button/style.css'
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
**Adeo projects**
|
|
53
53
|
|
|
54
54
|
```js
|
|
55
|
-
import
|
|
56
|
-
import
|
|
55
|
+
import '@ptlm-azulejo/themes/presets/adeo.css' // includes base.css
|
|
56
|
+
import '@ptlm-azulejo/button/style.css'
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
> Each preset `@import`s `base.css` (the structural + status tokens **and** a
|
|
@@ -107,8 +107,8 @@ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
```js
|
|
110
|
-
import
|
|
111
|
-
import
|
|
110
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
|
|
111
|
+
import '@ptlm-azulejo/fonts-leroy-merlin'
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
Until you load a typeface the fallback stack renders, so nothing breaks — it just
|
|
@@ -159,8 +159,8 @@ than inheriting your page's font. To hand a component back to the page font:
|
|
|
159
159
|
Just swap the root class (both presets can be imported at the same time):
|
|
160
160
|
|
|
161
161
|
```js
|
|
162
|
-
document.documentElement.classList.remove(
|
|
163
|
-
document.documentElement.classList.add(
|
|
162
|
+
document.documentElement.classList.remove('preset-lm', 'preset-adeo')
|
|
163
|
+
document.documentElement.classList.add('preset-adeo')
|
|
164
164
|
```
|
|
165
165
|
|
|
166
166
|
## Creating a custom brand
|
|
@@ -171,7 +171,7 @@ Define the same brand tokens of the contract under your brand class:
|
|
|
171
171
|
.preset-my-brand {
|
|
172
172
|
/* Typeface. The 400/500/600/700 weights come from base.css; override them here
|
|
173
173
|
only if your typeface lacks those cuts. */
|
|
174
|
-
--font-family:
|
|
174
|
+
--font-family: 'Inter', Arial, sans-serif;
|
|
175
175
|
|
|
176
176
|
--color-brand: #6c2bd9;
|
|
177
177
|
--color-brand-dark: #531fb0;
|
package/package.json
CHANGED
package/presets/adeo.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
/* Structural + status tokens (brand-agnostic) come bundled with the preset, so
|
|
14
14
|
consumers only need to import this single file. */
|
|
15
|
-
@import
|
|
15
|
+
@import '../base.css';
|
|
16
16
|
|
|
17
17
|
.preset-adeo {
|
|
18
18
|
/* ── Palette · Teal (primary) ─────────────────────────────── */
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
--color-brand-dark: var(--color-teal-700);
|
|
65
65
|
--color-brand-light: var(--color-teal-100);
|
|
66
66
|
|
|
67
|
-
--font-family:
|
|
67
|
+
--font-family: 'Roboto', Arial, sans-serif;
|
|
68
68
|
|
|
69
69
|
/* ── Functional tokens · light (default) ──────────────────── */
|
|
70
70
|
--color-text-primary: #000000;
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
/* ── Functional tokens · dark ────────────────────────────────── */
|
|
92
|
-
.preset-adeo[data-theme=
|
|
92
|
+
.preset-adeo[data-theme='dark'] {
|
|
93
93
|
--color-text-primary: #e6e6e6;
|
|
94
94
|
--color-text-secondary: #cccccc;
|
|
95
95
|
--color-text-tertiary: #b3b3b3;
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
/* ── Automatic fallback: follow the OS when data-theme is unset ── */
|
|
114
114
|
@media (prefers-color-scheme: dark) {
|
|
115
|
-
.preset-adeo:not([data-theme=
|
|
115
|
+
.preset-adeo:not([data-theme='light']) {
|
|
116
116
|
--color-text-primary: #e6e6e6;
|
|
117
117
|
--color-text-secondary: #cccccc;
|
|
118
118
|
--color-text-tertiary: #b3b3b3;
|
package/presets/leroy-merlin.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
/* Structural + status tokens (brand-agnostic) come bundled with the preset, so
|
|
14
14
|
consumers only need to import this single file. */
|
|
15
|
-
@import
|
|
15
|
+
@import '../base.css';
|
|
16
16
|
|
|
17
17
|
.preset-lm {
|
|
18
18
|
/* ── Palette · Green (primary) ────────────────────────────── */
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
--color-brand-dark: var(--color-green-700);
|
|
43
43
|
--color-brand-light: var(--color-green-100);
|
|
44
44
|
|
|
45
|
-
--font-family:
|
|
45
|
+
--font-family: 'LeroyMerlin', Arial, sans-serif;
|
|
46
46
|
|
|
47
47
|
/* ── Functional tokens · light (default) ──────────────────── */
|
|
48
48
|
--color-text-primary: #000000;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
/* ── Functional tokens · dark ────────────────────────────────── */
|
|
70
|
-
.preset-lm[data-theme=
|
|
70
|
+
.preset-lm[data-theme='dark'] {
|
|
71
71
|
--color-text-primary: #e6e6e6;
|
|
72
72
|
--color-text-secondary: #cccccc;
|
|
73
73
|
--color-text-tertiary: #b3b3b3;
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
/* ── Automatic fallback: follow the OS when data-theme is unset ── */
|
|
92
92
|
@media (prefers-color-scheme: dark) {
|
|
93
|
-
.preset-lm:not([data-theme=
|
|
93
|
+
.preset-lm:not([data-theme='light']) {
|
|
94
94
|
--color-text-primary: #e6e6e6;
|
|
95
95
|
--color-text-secondary: #cccccc;
|
|
96
96
|
--color-text-tertiary: #b3b3b3;
|