Skip to content

Commit 7ba6d32

Browse files
segfault-segfault
segfault-
and
segfault
authored
[MudColorProvider] -- updates to match changes in the material 3 specification (#246)
* no message * no message * color provider update based on material 3 updates - https://m3.material.io/styles/color/overview * color provider Example update * wip * no message * restore "show all tones" functionality * revert colors back to og values --------- Co-authored-by: segfault <[email protected]>
1 parent a47fa7a commit 7ba6d32

File tree

6 files changed

+398
-384
lines changed

6 files changed

+398
-384
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/ColorProvider/MudColorProvider.razor‎

Lines changed: 82 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -90,18 +90,34 @@
9090
@($"--mud-tertiary-{a}: {GetRGBString(Tertiary, a)};")
9191
@($"--mud-error-{a}: {GetRGBString(Error, a)};")
9292
@($"--mud-neutral-{a}: {GetRGBString(Neutral, a)};")
93-
@($"--mud-neutralvariant-{a}: {GetRGBString(NeutralVariant, a)};")
93+
@($"--mud-neutral-variant-{a}: {GetRGBString(NeutralVariant, a)};")
9494
9595
@foreach(var customColor in CustomColors)
9696
{
9797
@($"--mud-{customColor.Key}-{a}: {GetRGBString(customColor.Value, a)};")
9898
}
9999
}
100+
101+
@($"--mud-neutral-87: {GetRGBString(Neutral, 87)};")
102+
@for(int i = 92; i < 100; i = i + 1)
103+
{
104+
int a = i;
105+
@($"--mud-neutral-{a}: {GetRGBString(Neutral, a)};")
106+
}
107+
108+
@($"--mud-neutral-4: {GetRGBString(Neutral, 4)};")
109+
@($"--mud-neutral-6: {GetRGBString(Neutral, 6)};")
110+
@($"--mud-neutral-12: {GetRGBString(Neutral, 12)};")
111+
@($"--mud-neutral-17: {GetRGBString(Neutral, 17)};")
112+
@($"--mud-neutral-22: {GetRGBString(Neutral, 22)};")
113+
@($"--mud-neutral-24: {GetRGBString(Neutral, 24)};")
114+
115+
100116
@($"--mud-primary-{MainTone}: {GetRGBString(Primary, MainTone)};")
101117
@($"--mud-secondary-{MainTone}: {GetRGBString(Secondary, MainTone)};")
102118
@($"--mud-tertiary-{MainTone}: {GetRGBString(Tertiary, MainTone)};")
103119
@($"--mud-neutral-{MainTone}: {GetRGBString(Neutral, MainTone)};")
104-
@($"--mud-neutralvariant-{MainTone}: {GetRGBString(NeutralVariant, MainTone)};")
120+
@($"--mud-neutral-variant-{MainTone}: {GetRGBString(NeutralVariant, MainTone)};")
105121
@($"--mud-error-{MainTone}: {GetRGBString(Error, MainTone)};")
106122
@foreach(var customColor in CustomColors)
107123
{
@@ -112,7 +128,7 @@
112128
@($"--mud-secondary-{ContainerTone}: {GetRGBString(Secondary, ContainerTone)};")
113129
@($"--mud-tertiary-{ContainerTone}: {GetRGBString(Tertiary, ContainerTone)};")
114130
@($"--mud-neutral-{ContainerTone}: {GetRGBString(Neutral, ContainerTone)};")
115-
@($"--mud-neutralvariant-{ContainerTone}: {GetRGBString(NeutralVariant, ContainerTone)};")
131+
@($"--mud-neutral-variant-{ContainerTone}: {GetRGBString(NeutralVariant, ContainerTone)};")
116132
@($"--mud-error-{ContainerTone}: {GetRGBString(Error, ContainerTone)};")
117133
@foreach(var customColor in CustomColors)
118134
{
@@ -123,7 +139,7 @@
123139
@($"--mud-secondary-{100 - ContainerTone}: {GetRGBString(Secondary, 100 - ContainerTone)};")
124140
@($"--mud-tertiary-{100 - ContainerTone}: {GetRGBString(Tertiary, 100 - ContainerTone)};")
125141
@($"--mud-neutral-{100 - ContainerTone}: {GetRGBString(Neutral, 100 - ContainerTone)};")
126-
@($"--mud-neutralvariant-{100 - ContainerTone}: {GetRGBString(NeutralVariant, 100 - ContainerTone)};")
142+
@($"--mud-neutral-variant-{100 - ContainerTone}: {GetRGBString(NeutralVariant, 100 - ContainerTone)};")
127143
@($"--mud-error-{100 - ContainerTone}: {GetRGBString(Error, 100 - ContainerTone)};")
128144
@foreach(var customColor in CustomColors)
129145
{
@@ -134,7 +150,7 @@
134150
@($"--mud-secondary-99: {GetRGBString(Secondary, 99)};")
135151
@($"--mud-tertiary-99: {GetRGBString(Tertiary, 99)};")
136152
@($"--mud-neutral-99: {GetRGBString(Neutral, 99)};")
137-
@($"--mud-neutralvariant-99: {GetRGBString(NeutralVariant, 99)};")
153+
@($"--mud-neutral-variant-99: {GetRGBString(NeutralVariant, 99)};")
138154
@($"--mud-error-99: {GetRGBString(Error, 99)};")
139155
@foreach(var customColor in CustomColors)
140156
{
@@ -149,8 +165,8 @@
149165
--mud-tertiary-100: rgb(255, 255, 255);
150166
--mud-neutral-0: rgb(0, 0, 0);
151167
--mud-neutral-100: rgb(255, 255, 255);
152-
--mud-neutralvariant-0: rgb(0, 0, 0);
153-
--mud-neutralvariant-100: rgb(255, 255, 255);
168+
--mud-neutral-variant-0: rgb(0, 0, 0);
169+
--mud-neutral-variant-100: rgb(255, 255, 255);
154170
--mud-error-0: rgb(0, 0, 0);
155171
--mud-error-100: rgb(255, 255, 255);
156172
@foreach(var customColor in CustomColors)
@@ -160,45 +176,54 @@
160176
}
161177
162178
163-
--mud-m3-primary: var(--mud-primary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
164-
--mud-m3-onprimary: var(--mud-primary-@(DarkMode ? "20" : "100"));
165-
--mud-m3-primary-container: var(--mud-primary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
166-
--mud-m3-onprimary-container: var(--mud-primary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
167-
168-
--mud-m3-secondary: var(--mud-secondary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
169-
--mud-m3-onsecondary: var(--mud-secondary-@(DarkMode ? "20" : "100"));
170-
--mud-m3-secondary-container: var(--mud-secondary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
171-
--mud-m3-onsecondary-container: var(--mud-secondary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
172-
173-
--mud-m3-tertiary: var(--mud-tertiary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
174-
--mud-m3-ontertiary: var(--mud-tertiary-@(DarkMode ? "20" : "100"));
175-
--mud-m3-tertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
176-
--mud-m3-ontertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
177-
178-
--mud-m3-neutral: var(--mud-neutral-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
179-
--mud-m3-onneutral: var(--mud-neutral-@(DarkMode ? "20" : "100"));
180-
--mud-m3-neutral-container: var(--mud-neutral-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
181-
--mud-m3-onneutral-container: var(--mud-neutral-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
182-
183-
--mud-m3-neutralvariant: var(--mud-neutralvariant-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
184-
--mud-m3-onneutralvariant: var(--mud-neutralvariant-@(DarkMode ? "20" : "100"));
185-
--mud-m3-neutralvariant-container: var(--mud-neutralvariant-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
186-
--mud-m3-onneutralvariant-container: var(--mud-neutralvariant-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
187-
188-
--mud-m3-error: var(--mud-error-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
189-
--mud-m3-onerror: var(--mud-error-@(DarkMode ? "20" : "100"));
190-
--mud-m3-error-container: var(--mud-error-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
191-
--mud-m3-onerror-container: var(--mud-error-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
179+
--mud-m3-primary: var(--mud-primary-@(DarkMode ? "80" : "40"));
180+
--mud-m3-primary-container: var(--mud-primary-@(DarkMode ? "30" : "90"));
181+
--mud-m3-on-primary: var(--mud-primary-@(DarkMode ? "20" : "100"));
182+
--mud-m3-on-primary-container: var(--mud-primary-@(DarkMode ? "90" : "10"));
183+
--mud-m3-inverse-primary: var(--mud-primary-@(DarkMode ? "40" : "80"));
184+
185+
--mud-m3-secondary: var(--mud-secondary-@(DarkMode ? "80" : "40"));
186+
--mud-m3-secondary-container: var(--mud-secondary-@(DarkMode ? "30" : "90"));
187+
--mud-m3-on-secondary: var(--mud-secondary-@(DarkMode ? "20" : "100"));
188+
--mud-m3-on-secondary-container: var(--mud-secondary-@(DarkMode ? "90" : "10"));
189+
190+
--mud-m3-tertiary: var(--mud-tertiary-@(DarkMode ? "80" : "40"));
191+
--mud-m3-tertiary-container: var(--mud-tertiary-@(DarkMode ? "30" : "90"));
192+
--mud-m3-on-tertiary: var(--mud-tertiary-@(DarkMode ? "20" : "100"));
193+
--mud-m3-on-tertiary-container: var(--mud-tertiary-@(DarkMode ? "90" : "10"));
194+
195+
--mud-m3-surface: var(--mud-neutral-@(DarkMode == true ? "6" : "98"));
196+
--mud-m3-surface-dim: var(--mud-neutral-@(DarkMode == true ? "6" : "87"));
197+
--mud-m3-surface-bright: var(--mud-neutral-@(DarkMode == true ? "24" : "98"));
198+
--mud-m3-surface-container-lowest: var(--mud-neutral-@(DarkMode == true ? "4" : "100"));
199+
--mud-m3-surface-container-low: var(--mud-neutral-@(DarkMode == true ? "10" : "96"));
200+
--mud-m3-surface-container: var(--mud-neutral-@(DarkMode == true ? "12" : "94"));
201+
--mud-m3-surface-container-high: var(--mud-neutral-@(DarkMode == true ? "17" : "92"));
202+
--mud-m3-surface-container-highest: var(--mud-neutral-@(DarkMode == true ? "22" : "90"));
203+
--mud-m3-surface-variant: var(--mud-neutral-variant-@(DarkMode == true ? "30" : "90"));
204+
--mud-m3-on-surface: var(--mud-neutral-@(DarkMode == true ? "90" : "10"));
205+
--mud-m3-on-surface-variant: var(--mud-neutral-variant-@(DarkMode == true ? "80" : "30"));
206+
--mud-m3-inverse-surface: var(--mud-neutral-@(DarkMode == true ? "90" : "20"));
207+
--mud-m3-inverse-on-surface: var(--mud-neutral-@(DarkMode == true ? "20" : "95"));
208+
--mud-m3-background: var(--mud-neutral-@(DarkMode == true ? "6" : "98"));
209+
--mud-m3-on-background: var(--mud-neutral-@(DarkMode == true ? "90" : "10"));
210+
211+
--mud-m3-error: var(--mud-error-@(DarkMode ? "80" : "40"));
212+
--mud-m3-error-container: var(--mud-error-@(DarkMode ? "30" : "90"));
213+
--mud-m3-on-error: var(--mud-error-@(DarkMode ? "20" : "100"));
214+
--mud-m3-on-error-container: var(--mud-error-@(DarkMode ? "90" : "10"));
215+
216+
--mud-m3-outline: var(--mud-neutral-variant-@(DarkMode == true ? "60" : "50"));
217+
--mud-m3-outline-variant: var(--mud-neutral-variant-@(DarkMode == true ? "30" : "80"));
192218
193219
@foreach(var customColor in CustomColors)
194220
{
195221
@($"--mud-m3-{customColor.Key}: var(--mud-{customColor.Key}-{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())});");
196-
@($"--mud-m3-on{customColor.Key}: var(--mud-{customColor.Key}-{(DarkMode ? "20" : "100")});");
222+
@($"--mud-m3-on-{customColor.Key}: var(--mud-{customColor.Key}-{(DarkMode ? "20" : "100")});");
197223
@($"--mud-m3-{customColor.Key}-container: var(--mud-{customColor.Key}-{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())});");
198-
@($"--mud-m3-on{customColor.Key}-container: var(--mud-{customColor.Key}-{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)});");
224+
@($"--mud-m3-on-{customColor.Key}-container: var(--mud-{customColor.Key}-{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)});");
199225
}
200226
201-
202227
@if (Override)
203228
{
204229
<MudRender>
@@ -220,91 +245,91 @@
220245
}
221246
222247
.mud-m3-theme-primary {
223-
color: var(--mud-m3-onprimary);
248+
color: var(--mud-m3-on-primary);
224249
background-color: var(--mud-m3-primary);
225250
}
226251
227252
.mud-m3-theme-primary-reverse {
228253
color: var(--mud-m3-primary);
229-
background-color: var(--mud-m3-onprimary);
254+
background-color: var(--mud-m3-on-primary);
230255
}
231256
232257
.mud-m3-theme-primary-container {
233-
color: var(--mud-m3-onprimary-container);
258+
color: var(--mud-m3-on-primary-container);
234259
background-color: var(--mud-m3-primary-container);
235260
}
236261
237262
.mud-m3-theme-primary-container-reverse {
238263
color: var(--mud-m3-primary-container);
239-
background-color: var(--mud-m3-onprimary-container);
264+
background-color: var(--mud-m3-on-primary-container);
240265
}
241266
242267
.mud-m3-theme-secondary {
243-
color: var(--mud-m3-onsecondary);
268+
color: var(--mud-m3-on-secondary);
244269
background-color: var(--mud-m3-secondary);
245270
}
246271
247272
.mud-m3-theme-secondary-reverse {
248273
color: var(--mud-m3-secondary);
249-
background-color: var(--mud-m3-onsecondary);
274+
background-color: var(--mud-m3-on-secondary);
250275
}
251276
252277
.mud-m3-theme-secondary-container {
253-
color: var(--mud-m3-onsecondary-container);
278+
color: var(--mud-m3-on-secondary-container);
254279
background-color: var(--mud-m3-secondary-container);
255280
}
256281
257282
.mud-m3-theme-secondary-container-reverse {
258283
color: var(--mud-m3-secondary-container);
259-
background-color: var(--mud-m3-onsecondary-container);
284+
background-color: var(--mud-m3-on-secondary-container);
260285
}
261286
262287
.mud-m3-theme-tertiary {
263-
color: var(--mud-m3-ontertiary);
288+
color: var(--mud-m3-on-tertiary);
264289
background-color: var(--mud-m3-tertiary);
265290
}
266291
267292
.mud-m3-theme-tertiary-reverse {
268293
color: var(--mud-m3-tertiary);
269-
background-color: var(--mud-m3-ontertiary);
294+
background-color: var(--mud-m3-on-tertiary);
270295
}
271296
272297
.mud-m3-theme-tertiary-container {
273-
color: var(--mud-m3-ontertiary-container);
298+
color: var(--mud-m3-on-tertiary-container);
274299
background-color: var(--mud-m3-tertiary-container);
275300
}
276301
277302
.mud-m3-theme-tertiary-container-reverse {
278303
color: var(--mud-m3-tertiary-container);
279-
background-color: var(--mud-m3-ontertiary-container);
304+
background-color: var(--mud-m3-on-tertiary-container);
280305
}
281306
282307
.mud-m3-theme-error {
283-
color: var(--mud-m3-onerror);
308+
color: var(--mud-m3-on-error);
284309
background-color: var(--mud-m3-error);
285310
}
286311
287312
.mud-m3-theme-error-reverse {
288313
color: var(--mud-m3-error);
289-
background-color: var(--mud-m3-onerror);
314+
background-color: var(--mud-m3-on-error);
290315
}
291316
292317
.mud-m3-theme-error-container {
293-
color: var(--mud-m3-onerror-container);
318+
color: var(--mud-m3-on-error-container);
294319
background-color: var(--mud-m3-error-container);
295320
}
296321
297322
.mud-m3-theme-error-container-reverse {
298323
color: var(--mud-m3-error-container);
299-
background-color: var(--mud-m3-onerror-container);
324+
background-color: var(--mud-m3-on-error-container);
300325
}
301326
302327
@foreach(var customColor in CustomColors)
303328
{
304329
@($".mud-m3-theme-{customColor.Key} {{ color: var(--mud-m3-on{customColor.Key});background-color: var(--mud-m3-{customColor.Key});}}");
305330
@($".mud-m3-theme-{customColor.Key}-reverse {{ color: var(--mud-m3-{customColor.Key});background-color: var(--mud-m3-on{customColor.Key});}}");
306-
@($".mud-m3-theme-{customColor.Key}-container {{ color: var(--mud-m3-on{customColor.Key}-container);background-color: var(--mud-m3-{customColor.Key}-container);}}");
307-
@($".mud-m3-theme-{customColor.Key}-container-reverse {{ color: var(--mud-m3-{customColor.Key}-container);background-color: var(--mud-m3-on{customColor.Key}-container);}}");
331+
@($".mud-m3-theme-{customColor.Key}-container {{ color: var(--mud-m3-on-{customColor.Key}-container);background-color: var(--mud-m3-{customColor.Key}-container);}}");
332+
@($".mud-m3-theme-{customColor.Key}-container-reverse {{ color: var(--mud-m3-{customColor.Key}-container);background-color: var(--mud-m3-on-{customColor.Key}-container);}}");
308333
}
309334
310335
</style>

‎ComponentViewer.Docs/Pages/Components/ColorProviderPage.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
<MudText>Example if you have MainTone = 24, you will have --mud-primary-24, --mud-secondary-24, --mud-tertiary-24 (Although not included in the variables)</MudText>
2121
<MudText>And this variables represent your dynamic values:</MudText>
2222
<MudText Class="mt-2" Color="Color.Primary">--mud-m3-primary --mud-m3-secondary --mud-m3-tertiary</MudText>
23-
<MudText Color="Color.Primary">--mud-m3-onprimary --mud-m3-onsecondary --mud-m3-ontertiary</MudText>
23+
<MudText Color="Color.Primary">--mud-m3-on-primary --mud-m3-on-secondary --mud-m3-on-tertiary</MudText>
2424
<MudText Color="Color.Primary">--mud-m3-primary-container --mud-m3-secondary-container --mud-m3-tertiary-container</MudText>
25-
<MudText Color="Color.Primary">--mud-m3-onprimary-container --mud-m3-onsecondary-container --mud-m3-ontertiary-container</MudText>
25+
<MudText Color="Color.Primary">--mud-m3-on-primary-container --mud-m3-on-secondary-container --mud-m3-on-tertiary-container</MudText>
2626
<MudText Class="mt-2" Typo="Typo.h6">Static CSS Variables</MudText>
2727
<MudText>These variables shows your color shades and created automatically by component.</MudText>
2828
@for (int i = 0; i <= 100; i = i + 10)

0 commit comments

Comments
 (0)