@ptlm-azulejo/themes 1.3.2-alpha.149 → 1.3.2-alpha.151

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/base.css +4 -0
  2. package/package.json +1 -1
  3. package/presets/adeo.css +34 -0
  4. package/presets/leroy-merlin.css +34 -0
package/base.css CHANGED
@@ -89,4 +89,8 @@
89
89
  --color-success-500: #46a610;
90
90
  --color-success-600: #188803;
91
91
  --color-success-700: #006902;
92
+
93
+ /* ── Disabled (Mozaic semantic, brand-agnostic) ─────────────── */
94
+ --color-background-disabled: #d9d9d9;
95
+ --color-text-disabled: #737373;
92
96
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/themes",
3
- "version": "1.3.2-alpha.149",
3
+ "version": "1.3.2-alpha.151",
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": {
package/presets/adeo.css CHANGED
@@ -86,6 +86,18 @@
86
86
  --color-border-secondary: var(--color-blue-grey-400);
87
87
  --color-border-tertiary: var(--color-blue-grey-800);
88
88
  --color-border-inverse: #ffffff;
89
+
90
+ /* ── Tag component tokens ─────────────────────────────────── */
91
+ --color-tag-background-standard: var(--color-background-primary);
92
+ --color-tag-background-selected: var(--color-brand);
93
+ --color-tag-background-selected-hover: var(--color-brand-dark);
94
+ --color-tag-background-inverse: #333333;
95
+ --color-tag-background-inverse-hover: #4d4d4d;
96
+ --color-tag-text-standard: var(--color-text-primary);
97
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
98
+ --color-tag-border-informative: var(--color-border-primary);
99
+ --color-tag-border-interactive: var(--color-border-secondary);
100
+ --color-tag-delete-icon: #cccccc;
89
101
  }
90
102
 
91
103
  /* ── Functional tokens · dark ────────────────────────────────── */
@@ -108,6 +120,17 @@
108
120
  --color-border-secondary: #666666;
109
121
  --color-border-tertiary: #cccccc;
110
122
  --color-border-inverse: #ffffff;
123
+
124
+ --color-tag-background-standard: var(--color-background-primary);
125
+ --color-tag-background-selected: var(--color-teal-400);
126
+ --color-tag-background-selected-hover: var(--color-teal-300);
127
+ --color-tag-background-inverse: #cccccc;
128
+ --color-tag-background-inverse-hover: #e6e6e6;
129
+ --color-tag-text-standard: var(--color-text-primary);
130
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
131
+ --color-tag-border-informative: var(--color-border-primary);
132
+ --color-tag-border-interactive: var(--color-border-secondary);
133
+ --color-tag-delete-icon: #666666;
111
134
  }
112
135
 
113
136
  /* ── Automatic fallback: follow the OS when data-theme is unset ── */
@@ -131,5 +154,16 @@
131
154
  --color-border-secondary: #666666;
132
155
  --color-border-tertiary: #cccccc;
133
156
  --color-border-inverse: #ffffff;
157
+
158
+ --color-tag-background-standard: var(--color-background-primary);
159
+ --color-tag-background-selected: var(--color-teal-400);
160
+ --color-tag-background-selected-hover: var(--color-teal-300);
161
+ --color-tag-background-inverse: #cccccc;
162
+ --color-tag-background-inverse-hover: #e6e6e6;
163
+ --color-tag-text-standard: var(--color-text-primary);
164
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
165
+ --color-tag-border-informative: var(--color-border-primary);
166
+ --color-tag-border-interactive: var(--color-border-secondary);
167
+ --color-tag-delete-icon: #666666;
134
168
  }
135
169
  }
package/presets/leroy-merlin.css CHANGED
@@ -64,6 +64,18 @@
64
64
  --color-border-secondary: var(--color-blue-grey-400);
65
65
  --color-border-tertiary: var(--color-blue-grey-800);
66
66
  --color-border-inverse: #ffffff;
67
+
68
+ /* ── Tag component tokens ─────────────────────────────────── */
69
+ --color-tag-background-standard: var(--color-background-primary);
70
+ --color-tag-background-selected: var(--color-brand);
71
+ --color-tag-background-selected-hover: var(--color-brand-dark);
72
+ --color-tag-background-inverse: var(--color-blue-grey-800);
73
+ --color-tag-background-inverse-hover: var(--color-blue-grey-700);
74
+ --color-tag-text-standard: var(--color-blue-grey-800);
75
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
76
+ --color-tag-border-informative: var(--color-border-primary);
77
+ --color-tag-border-interactive: var(--color-border-secondary);
78
+ --color-tag-delete-icon: var(--color-blue-grey-200);
67
79
  }
68
80
 
69
81
  /* ── Functional tokens · dark ────────────────────────────────── */
@@ -86,6 +98,17 @@
86
98
  --color-border-secondary: #666666;
87
99
  --color-border-tertiary: #cccccc;
88
100
  --color-border-inverse: #ffffff;
101
+
102
+ --color-tag-background-standard: var(--color-background-primary);
103
+ --color-tag-background-selected: var(--color-green-400);
104
+ --color-tag-background-selected-hover: var(--color-green-300);
105
+ --color-tag-background-inverse: var(--color-blue-grey-200);
106
+ --color-tag-background-inverse-hover: var(--color-blue-grey-300);
107
+ --color-tag-text-standard: var(--color-text-primary);
108
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
109
+ --color-tag-border-informative: var(--color-border-primary);
110
+ --color-tag-border-interactive: var(--color-border-secondary);
111
+ --color-tag-delete-icon: var(--color-blue-grey-600);
89
112
  }
90
113
 
91
114
  /* ── Automatic fallback: follow the OS when data-theme is unset ── */
@@ -109,5 +132,16 @@
109
132
  --color-border-secondary: #666666;
110
133
  --color-border-tertiary: #cccccc;
111
134
  --color-border-inverse: #ffffff;
135
+
136
+ --color-tag-background-standard: var(--color-background-primary);
137
+ --color-tag-background-selected: var(--color-green-400);
138
+ --color-tag-background-selected-hover: var(--color-green-300);
139
+ --color-tag-background-inverse: var(--color-blue-grey-200);
140
+ --color-tag-background-inverse-hover: var(--color-blue-grey-300);
141
+ --color-tag-text-standard: var(--color-text-primary);
142
+ --color-tag-text-inverse: var(--color-text-primary-inverse);
143
+ --color-tag-border-informative: var(--color-border-primary);
144
+ --color-tag-border-interactive: var(--color-border-secondary);
145
+ --color-tag-delete-icon: var(--color-blue-grey-600);
112
146
  }
113
147
  }