@ptlm-azulejo/themes 1.1.0-alpha.3

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 (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +105 -0
  3. package/base.css +90 -0
  4. package/package.json +20 -0
  5. package/presets/adeo.css +133 -0
  6. package/presets/leroy-merlin.css +111 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,20 @@
1
+ # @ptlm-azulejo/themes
2
+
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 53000f7: Add Mozaic-aligned multi-brand theming support.
8
+
9
+ - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
10
+ and brand presets selected by a root class (`presets/leroy-merlin.css`,
11
+ `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
12
+ light/dark.
13
+ - `AzButton` now consumes theme tokens through utilities mapped in
14
+ `@theme inline`, working across both brands and in light/dark.
15
+
16
+ **BREAKING:** components no longer bake brand colors. The consumer must now
17
+ import `@ptlm-azulejo/themes/base.css` + a preset and apply the
18
+ `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
19
+ element; otherwise components render uncolored. See the migration notes in
20
+ `packages/themes/README.md`.
package/README.md ADDED
@@ -0,0 +1,105 @@
1
+ # @ptlm-azulejo/themes
2
+
3
+ Multi-brand theme tokens for the `@ptlm-azulejo` components, aligned with the
4
+ [Mozaic Design System](https://mozaic.adeo.cloud/). It provides the color,
5
+ typography, spacing, radius and shadow values that the components consume at
6
+ runtime via CSS variables — the equivalent of `@mozaic-ds/tokens`.
7
+
8
+ ## Concept
9
+
10
+ The theme has two parts:
11
+
12
+ | File | Contents | Brand-specific? |
13
+ |---|---|---|
14
+ | `base.css` | **Structural + status** tokens (`--spacing-*`, `--border-radius-*`, `--font-*`, `--shadow-*`, `--color-danger-*`…) | No |
15
+ | `presets/<brand>.css` | **Functional color** tokens (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
16
+
17
+ The brand is selected with a **class on the root element** (`.preset-lm`,
18
+ `.preset-adeo`) and light/dark mode with the **`data-theme`** attribute.
19
+
20
+ ## Installation
21
+
22
+ ```bash
23
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/button
24
+ ```
25
+
26
+ ## Usage
27
+
28
+ Install the component and the theme packages, then in the app's entry point
29
+ import **a brand preset** (it already bundles `base.css`) and the **component
30
+ styles**:
31
+
32
+ ```js
33
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css — includes base.css
34
+ import '@ptlm-azulejo/button/style.css'
35
+ ```
36
+
37
+ > Each preset `@import`s `base.css` (the structural + status tokens), so a single
38
+ > preset import gives you everything. You can still import `base.css` on its own
39
+ > (`@ptlm-azulejo/themes/base.css`) if you ever need it without a brand.
40
+
41
+ Then apply the brand class on `<html>` (or any container):
42
+
43
+ ```html
44
+ <!-- Leroy Merlin, light (default) -->
45
+ <html class="preset-lm">
46
+
47
+ <!-- Adeo, dark -->
48
+ <html class="preset-adeo" data-theme="dark">
49
+ ```
50
+
51
+ > **Important:** without importing a preset (which bundles `base.css`) **and**
52
+ > without the `.preset-*` class on the root, the components render uncolored —
53
+ > they only reference the CSS variables; the values come from here.
54
+
55
+ ### Light / dark mode
56
+
57
+ - `data-theme="dark"` forces dark; `data-theme="light"` forces light.
58
+ - With no `data-theme`, the preset follows the operating system's `prefers-color-scheme`.
59
+
60
+ ### Switching brand at runtime
61
+
62
+ Just swap the root class (both presets can be imported at the same time):
63
+
64
+ ```js
65
+ document.documentElement.classList.remove('preset-lm', 'preset-adeo')
66
+ document.documentElement.classList.add('preset-adeo')
67
+ ```
68
+
69
+ ## Creating a custom brand
70
+
71
+ Define the same functional tokens of the contract under your brand class:
72
+
73
+ ```css
74
+ .preset-my-brand {
75
+ --color-brand: #6c2bd9;
76
+ --color-brand-dark: #531fb0;
77
+ --color-brand-light: #efe7fb;
78
+
79
+ --color-text-primary: #111111;
80
+ --color-text-accent: var(--color-brand);
81
+ --color-text-on-accent-inverse: #ffffff;
82
+
83
+ --color-background-primary: #ffffff;
84
+ --color-background-accent: var(--color-brand-light);
85
+ --color-background-accent-inverse: var(--color-brand);
86
+ /* …remaining functional tokens (see presets/leroy-merlin.css for reference) */
87
+ }
88
+ ```
89
+
90
+ ## Customizing a component without changing the brand
91
+
92
+ The components expose theme utilities mapped in `tailwind.css` (`@theme inline`).
93
+ You can override the underlying functional tokens for a scoped element:
94
+
95
+ ```css
96
+ .preset-lm .btn--accent {
97
+ --color-background-accent: #d6f5e6;
98
+ }
99
+ ```
100
+
101
+ ## Relationship with Mozaic
102
+
103
+ The functional token names (`--color-text-primary`, `--color-background-accent`,
104
+ …) and the theming mechanism (brand class + `data-theme`) follow the Mozaic
105
+ Design System, to ease DE→PARA migration of components between projects.
package/base.css ADDED
@@ -0,0 +1,90 @@
1
+ /**
2
+ * @ptlm-azulejo/themes — base.css
3
+ *
4
+ * Structural and status tokens, BRAND-AGNOSTIC, aligned with the Mozaic Design
5
+ * System. The functional naming (--spacing-*, --border-radius-*, --font-*,
6
+ * --color-danger-* ...) matches Mozaic to ease DE→PARA migrations.
7
+ *
8
+ * These tokens do NOT change per brand. Brand/neutral colors come from a preset
9
+ * (presets/leroy-merlin.css or presets/adeo.css) applied via a root class.
10
+ *
11
+ * Usage (consumer):
12
+ * import "@ptlm-azulejo/themes/base.css";
13
+ * import "@ptlm-azulejo/themes/presets/leroy-merlin.css";
14
+ * // <html class="preset-lm"> (light, default)
15
+ * // <html class="preset-lm" data-theme="dark"> (dark)
16
+ */
17
+
18
+ :root {
19
+ /* ── Tailwind base scale (shipped to the consumer) ───────────
20
+ Utilities like px-4, gap-2, w-4 compile to calc(var(--spacing)*N).
21
+ Defining --spacing here ensures the pre-compiled components resolve
22
+ spacing on the consumer side. */
23
+ --spacing: 0.25rem;
24
+
25
+ /* ── Spacing (8px base) ─────────────────────────────────────── */
26
+ --spacing-100: 0.5rem;
27
+ --spacing-200: 1rem;
28
+ --spacing-300: 1.5rem;
29
+ --spacing-400: 2rem;
30
+ --spacing-500: 2.5rem;
31
+ --spacing-600: 3rem;
32
+ --spacing-700: 3.5rem;
33
+ --spacing-800: 4rem;
34
+ --spacing-900: 4.5rem;
35
+
36
+ /* ── Border radius ──────────────────────────────────────────── */
37
+ --border-radius-s: 0.125rem;
38
+ --border-radius-m: 0.25rem;
39
+ --border-radius-l: 0.375rem;
40
+
41
+ /* ── Border widths ──────────────────────────────────────────── */
42
+ --border-s: 1px;
43
+ --border-m: 2px;
44
+ --border-l: 3px;
45
+
46
+ /* ── Typography · font sizes ────────────────────────────────── */
47
+ --font-size-01: 0.6875rem;
48
+ --font-size-02: 0.75rem;
49
+ --font-size-03: 0.8125rem;
50
+ --font-size-04: 0.875rem;
51
+ --font-size-05: 1rem;
52
+ --font-size-06: 1.125rem;
53
+ --font-size-07: 1.4375rem;
54
+ --font-size-08: 1.75rem;
55
+ --font-size-09: 2.125rem;
56
+ --font-size-10: 2.5625rem;
57
+ --font-size-11: 3.0625rem;
58
+ --font-size-12: 3.6875rem;
59
+
60
+ /* ── Typography · font weights ──────────────────────────────── */
61
+ --font-weight-regular: 400;
62
+ --font-weight-semi-bold: 600;
63
+ --font-weight-bold: 700;
64
+
65
+ /* ── Shadows ────────────────────────────────────────────────── */
66
+ --shadow-s: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
67
+ --shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
68
+ --shadow-l: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
69
+
70
+ /* ── Status colors (Mozaic semantic scales, brand-agnostic) ──── */
71
+ --color-danger-100: #fdeaea;
72
+ --color-danger-500: #ea302d;
73
+ --color-danger-600: #c61112;
74
+ --color-danger-700: #8c0003;
75
+
76
+ --color-info-100: #daeff7;
77
+ --color-info-500: #0b96cc;
78
+ --color-info-600: #007bb4;
79
+ --color-info-700: #005c91;
80
+
81
+ --color-warning-100: #fdf1e8;
82
+ --color-warning-500: #ea7315;
83
+ --color-warning-600: #c65200;
84
+ --color-warning-700: #8c3500;
85
+
86
+ --color-success-100: #ebf5de;
87
+ --color-success-500: #46a610;
88
+ --color-success-600: #188803;
89
+ --color-success-700: #006902;
90
+ }
package/package.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "@ptlm-azulejo/themes",
3
+ "version": "1.1.0-alpha.3",
4
+ "description": "Multi-brand theme tokens (Leroy Merlin, Adeo) for the @ptlm-azulejo components, aligned with the Mozaic Design System.",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": "./base.css",
8
+ "./base.css": "./base.css",
9
+ "./presets/leroy-merlin.css": "./presets/leroy-merlin.css",
10
+ "./presets/adeo.css": "./presets/adeo.css"
11
+ },
12
+ "publishConfig": {
13
+ "access": "public",
14
+ "registry": "https://registry.npmjs.org"
15
+ },
16
+ "files": [
17
+ "base.css",
18
+ "presets/*.css"
19
+ ]
20
+ }
package/presets/adeo.css ADDED
@@ -0,0 +1,133 @@
1
+ /**
2
+ * ADEO brand preset — ADS2 (Mozaic-aligned).
3
+ *
4
+ * Palette: Teal (primary) + Blue-Grey (neutrals) + Purple + Sand-Grey.
5
+ * Brand is applied via a root class; light/dark via data-theme.
6
+ *
7
+ * Usage:
8
+ * import "@ptlm-azulejo/themes/presets/adeo.css"; // includes base.css
9
+ * <html class="preset-adeo"> (light, default)
10
+ * <html class="preset-adeo" data-theme="dark"> (dark)
11
+ */
12
+
13
+ /* Structural + status tokens (brand-agnostic) come bundled with the preset, so
14
+ consumers only need to import this single file. */
15
+ @import "../base.css";
16
+
17
+ .preset-adeo {
18
+ /* ── Palette · Teal (primary) ─────────────────────────────── */
19
+ --color-teal-100: #d9f0f3;
20
+ --color-teal-200: #91d5db;
21
+ --color-teal-300: #48bac4;
22
+ --color-teal-400: #009eac;
23
+ --color-teal-500: #00919f;
24
+ --color-teal-600: #007783;
25
+ --color-teal-700: #006974;
26
+ --color-teal-800: #004e57;
27
+ --color-teal-900: #002e33;
28
+
29
+ /* ── Palette · Blue-Grey (neutrals) ───────────────────────── */
30
+ --color-blue-grey-100: #f1f3f4;
31
+ --color-blue-grey-200: #cdd4d8;
32
+ --color-blue-grey-300: #b0bbc0;
33
+ --color-blue-grey-400: #92a2a9;
34
+ --color-blue-grey-500: #758992;
35
+ --color-blue-grey-600: #576e77;
36
+ --color-blue-grey-700: #405d68;
37
+ --color-blue-grey-800: #264653;
38
+ --color-blue-grey-900: #082435;
39
+
40
+ /* ── Palette · Purple ─────────────────────────────────────── */
41
+ --color-purple-100: #e9e8f8;
42
+ --color-purple-200: #bfbce1;
43
+ --color-purple-300: #908cca;
44
+ --color-purple-400: #716cbc;
45
+ --color-purple-500: #605ab5;
46
+ --color-purple-600: #534cb2;
47
+ --color-purple-700: #443ea3;
48
+ --color-purple-800: #302b7d;
49
+ --color-purple-900: #1c175d;
50
+
51
+ /* ── Palette · Sand-Grey ──────────────────────────────────── */
52
+ --color-sand-grey-100: #eeedea;
53
+ --color-sand-grey-200: #dddcd5;
54
+ --color-sand-grey-300: #c2c1ba;
55
+ --color-sand-grey-400: #a7a6a0;
56
+ --color-sand-grey-500: #888781;
57
+ --color-sand-grey-600: #6b6a66;
58
+ --color-sand-grey-700: #555550;
59
+ --color-sand-grey-800: #3a3936;
60
+ --color-sand-grey-900: #1e1e1c;
61
+
62
+ /* ── Brand (signature alias) ──────────────────────────────── */
63
+ --color-brand: var(--color-teal-600);
64
+ --color-brand-dark: var(--color-teal-700);
65
+ --color-brand-light: var(--color-teal-100);
66
+
67
+ /* ── Functional tokens · light (default) ──────────────────── */
68
+ --color-text-primary: #000000;
69
+ --color-text-secondary: #404040;
70
+ --color-text-tertiary: #666666;
71
+ --color-text-primary-inverse: #ffffff;
72
+ --color-text-secondary-inverse: #e6e6e6;
73
+ --color-text-accent: var(--color-teal-600);
74
+ --color-text-on-accent-inverse: #ffffff;
75
+
76
+ --color-background-primary: #ffffff;
77
+ --color-background-secondary: var(--color-blue-grey-100);
78
+ --color-background-secondary-inverse: var(--color-blue-grey-900);
79
+ --color-background-accent: var(--color-teal-100);
80
+ --color-background-accent-inverse: var(--color-teal-600);
81
+ --color-background-ghost: #ffffff00;
82
+
83
+ --color-border-primary: var(--color-blue-grey-200);
84
+ --color-border-secondary: var(--color-blue-grey-400);
85
+ --color-border-tertiary: var(--color-blue-grey-800);
86
+ --color-border-inverse: #ffffff;
87
+ }
88
+
89
+ /* ── Functional tokens · dark ────────────────────────────────── */
90
+ .preset-adeo[data-theme="dark"] {
91
+ --color-text-primary: #e6e6e6;
92
+ --color-text-secondary: #cccccc;
93
+ --color-text-tertiary: #b3b3b3;
94
+ --color-text-primary-inverse: #191919;
95
+ --color-text-secondary-inverse: #333333;
96
+ --color-text-accent: var(--color-teal-400);
97
+ --color-text-on-accent-inverse: #191919;
98
+
99
+ --color-background-primary: #191919;
100
+ --color-background-secondary: #262626;
101
+ --color-background-secondary-inverse: var(--color-blue-grey-200);
102
+ --color-background-accent: var(--color-teal-900);
103
+ --color-background-accent-inverse: var(--color-teal-400);
104
+
105
+ --color-border-primary: #333333;
106
+ --color-border-secondary: #666666;
107
+ --color-border-tertiary: #cccccc;
108
+ --color-border-inverse: #ffffff;
109
+ }
110
+
111
+ /* ── Automatic fallback: follow the OS when data-theme is unset ── */
112
+ @media (prefers-color-scheme: dark) {
113
+ .preset-adeo:not([data-theme="light"]) {
114
+ --color-text-primary: #e6e6e6;
115
+ --color-text-secondary: #cccccc;
116
+ --color-text-tertiary: #b3b3b3;
117
+ --color-text-primary-inverse: #191919;
118
+ --color-text-secondary-inverse: #333333;
119
+ --color-text-accent: var(--color-teal-400);
120
+ --color-text-on-accent-inverse: #191919;
121
+
122
+ --color-background-primary: #191919;
123
+ --color-background-secondary: #262626;
124
+ --color-background-secondary-inverse: var(--color-blue-grey-200);
125
+ --color-background-accent: var(--color-teal-900);
126
+ --color-background-accent-inverse: var(--color-teal-400);
127
+
128
+ --color-border-primary: #333333;
129
+ --color-border-secondary: #666666;
130
+ --color-border-tertiary: #cccccc;
131
+ --color-border-inverse: #ffffff;
132
+ }
133
+ }
package/presets/leroy-merlin.css ADDED
@@ -0,0 +1,111 @@
1
+ /**
2
+ * LEROY MERLIN brand preset — ADS2 (Mozaic-aligned).
3
+ *
4
+ * Palette: Green (primary, LM green) + Blue-Grey (supporting neutrals).
5
+ * Brand is applied via a root class; light/dark via data-theme.
6
+ *
7
+ * Usage:
8
+ * import "@ptlm-azulejo/themes/presets/leroy-merlin.css"; // includes base.css
9
+ * <html class="preset-lm"> (light, default)
10
+ * <html class="preset-lm" data-theme="dark"> (dark)
11
+ */
12
+
13
+ /* Structural + status tokens (brand-agnostic) come bundled with the preset, so
14
+ consumers only need to import this single file. */
15
+ @import "../base.css";
16
+
17
+ .preset-lm {
18
+ /* ── Palette · Green (primary) ────────────────────────────── */
19
+ --color-green-100: #ebf5de;
20
+ --color-green-200: #c5e39e;
21
+ --color-green-300: #9ed05f;
22
+ --color-green-400: #78be20;
23
+ --color-green-500: #3f9e10;
24
+ --color-green-600: #117f03;
25
+ --color-green-700: #006902;
26
+ --color-green-800: #035010;
27
+ --color-green-900: #023618;
28
+
29
+ /* ── Palette · Blue-Grey (neutrals) ───────────────────────── */
30
+ --color-blue-grey-100: #eff1f6;
31
+ --color-blue-grey-200: #c9d0de;
32
+ --color-blue-grey-300: #abb3c9;
33
+ --color-blue-grey-400: #8891aa;
34
+ --color-blue-grey-500: #636d88;
35
+ --color-blue-grey-600: #464e63;
36
+ --color-blue-grey-700: #343b4c;
37
+ --color-blue-grey-800: #242938;
38
+ --color-blue-grey-900: #171b26;
39
+
40
+ /* ── Brand (signature alias) ──────────────────────────────── */
41
+ --color-brand: var(--color-green-600);
42
+ --color-brand-dark: var(--color-green-700);
43
+ --color-brand-light: var(--color-green-100);
44
+
45
+ /* ── Functional tokens · light (default) ──────────────────── */
46
+ --color-text-primary: #000000;
47
+ --color-text-secondary: #404040;
48
+ --color-text-tertiary: #666666;
49
+ --color-text-primary-inverse: #ffffff;
50
+ --color-text-secondary-inverse: #e6e6e6;
51
+ --color-text-accent: var(--color-green-600);
52
+ --color-text-on-accent-inverse: #ffffff;
53
+
54
+ --color-background-primary: #ffffff;
55
+ --color-background-secondary: var(--color-blue-grey-100);
56
+ --color-background-secondary-inverse: var(--color-blue-grey-800);
57
+ --color-background-accent: var(--color-green-100);
58
+ --color-background-accent-inverse: var(--color-green-800);
59
+ --color-background-ghost: #ffffff00;
60
+
61
+ --color-border-primary: var(--color-blue-grey-200);
62
+ --color-border-secondary: var(--color-blue-grey-400);
63
+ --color-border-tertiary: var(--color-blue-grey-800);
64
+ --color-border-inverse: #ffffff;
65
+ }
66
+
67
+ /* ── Functional tokens · dark ────────────────────────────────── */
68
+ .preset-lm[data-theme="dark"] {
69
+ --color-text-primary: #e6e6e6;
70
+ --color-text-secondary: #cccccc;
71
+ --color-text-tertiary: #b3b3b3;
72
+ --color-text-primary-inverse: #191919;
73
+ --color-text-secondary-inverse: #333333;
74
+ --color-text-accent: var(--color-green-400);
75
+ --color-text-on-accent-inverse: #191919;
76
+
77
+ --color-background-primary: #191919;
78
+ --color-background-secondary: #262626;
79
+ --color-background-secondary-inverse: var(--color-blue-grey-200);
80
+ --color-background-accent: var(--color-green-900);
81
+ --color-background-accent-inverse: var(--color-green-400);
82
+
83
+ --color-border-primary: #333333;
84
+ --color-border-secondary: #666666;
85
+ --color-border-tertiary: #cccccc;
86
+ --color-border-inverse: #ffffff;
87
+ }
88
+
89
+ /* ── Automatic fallback: follow the OS when data-theme is unset ── */
90
+ @media (prefers-color-scheme: dark) {
91
+ .preset-lm:not([data-theme="light"]) {
92
+ --color-text-primary: #e6e6e6;
93
+ --color-text-secondary: #cccccc;
94
+ --color-text-tertiary: #b3b3b3;
95
+ --color-text-primary-inverse: #191919;
96
+ --color-text-secondary-inverse: #333333;
97
+ --color-text-accent: var(--color-green-400);
98
+ --color-text-on-accent-inverse: #191919;
99
+
100
+ --color-background-primary: #191919;
101
+ --color-background-secondary: #262626;
102
+ --color-background-secondary-inverse: var(--color-blue-grey-200);
103
+ --color-background-accent: var(--color-green-900);
104
+ --color-background-accent-inverse: var(--color-green-400);
105
+
106
+ --color-border-primary: #333333;
107
+ --color-border-secondary: #666666;
108
+ --color-border-tertiary: #cccccc;
109
+ --color-border-inverse: #ffffff;
110
+ }
111
+ }