Skip to content

Commit ecfad36

Browse files
mckaragozmckaragoz
authored
MudColorProvider (#59)
* ColorProvider Initialize * Cleanup * Cleanup and Last Changes
1 parent 9b9c971 commit ecfad36

File tree

9 files changed

+557
-4
lines changed

9 files changed

+557
-4
lines changed

‎CodeBeam.MudExtensions/Components/ColorProvider/MudColorProvider.razor‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@namespace MudExtensions
2+
@using System.Text
3+
@using MudExtensions.Enums
4+
@using MudExtensions.Utilities
5+
@inherits MudComponentBase
6+
7+
@code {
8+
/// <summary>
9+
/// The hex value of primary color.
10+
/// </summary>
11+
[Parameter]
12+
[Category(CategoryTypes.Item.Behavior)]
13+
public string Primary { get; set; }
14+
15+
/// <summary>
16+
/// The hex value of secondary color.
17+
/// </summary>
18+
[Parameter]
19+
[Category(CategoryTypes.Item.Behavior)]
20+
public string Secondary { get; set; }
21+
22+
/// <summary>
23+
/// The hex value of tertiary color.
24+
/// </summary>
25+
[Parameter]
26+
[Category(CategoryTypes.Item.Behavior)]
27+
public string Tertiary { get; set; }
28+
29+
/// <summary>
30+
/// The color shade between 0 (black) and 100 (white). Default is 40 (20 for dark mode). If its on default, the value will change automatically for dark mode.
31+
/// </summary>
32+
[Parameter]
33+
[Category(CategoryTypes.Item.Behavior)]
34+
public int MainTone { get; set; } = 40;
35+
36+
/// <summary>
37+
/// The color shade between 0 (black) and 100 (white) for container colors. Default is 90 (30 for dark mode). If its on default, the value will change automatically for dark mode.
38+
/// </summary>
39+
[Parameter]
40+
[Category(CategoryTypes.Item.Behavior)]
41+
public int ContainerTone { get; set; } = 90;
42+
43+
[Parameter]
44+
[Category(CategoryTypes.Item.Behavior)]
45+
public bool DarkMode { get; set; }
46+
47+
/// <summary>
48+
/// If true, the current CSS variables also be overriden (--mud-palette-primary etc.). Default is false.
49+
/// </summary>
50+
[Parameter]
51+
[Category(CategoryTypes.Item.Behavior)]
52+
public bool Override { get; set; }
53+
}
54+
55+
<style>
56+
:root {
57+
@for (int i = 10; i < 100; i = i + 10)
58+
{
59+
int a = i;
60+
@($"--mud-primary-{a}: {GetRGBString(Primary, a)};")
61+
@($"--mud-secondary-{a}: {GetRGBString(Secondary, a)};")
62+
@($"--mud-tertiary-{a}: {GetRGBString(Tertiary, a)};")
63+
}
64+
@($"--mud-primary-{MainTone}: {GetRGBString(Primary, MainTone)};")
65+
@($"--mud-secondary-{MainTone}: {GetRGBString(Secondary, MainTone)};")
66+
@($"--mud-tertiary-{MainTone}: {GetRGBString(Tertiary, MainTone)};")
67+
@($"--mud-primary-{ContainerTone}: {GetRGBString(Primary, ContainerTone)};")
68+
@($"--mud-secondary-{ContainerTone}: {GetRGBString(Secondary, ContainerTone)};")
69+
@($"--mud-tertiary-{ContainerTone}: {GetRGBString(Tertiary, ContainerTone)};")
70+
@($"--mud-primary-{100 - ContainerTone}: {GetRGBString(Primary, 100 - ContainerTone)};")
71+
@($"--mud-secondary-{100 - ContainerTone}: {GetRGBString(Secondary, 100 - ContainerTone)};")
72+
@($"--mud-tertiary-{100 - ContainerTone}: {GetRGBString(Tertiary, 100 - ContainerTone)};")
73+
@($"--mud-primary-99: {GetRGBString(Primary, 99)};")
74+
@($"--mud-secondary-99: {GetRGBString(Secondary, 99)};")
75+
@($"--mud-tertiary-99: {GetRGBString(Tertiary, 99)};")
76+
--mud-primary-0: rgb(0, 0, 0);
77+
--mud-primary-100: rgb(255, 255, 255);
78+
--mud-secondary-0: rgb(0, 0, 0);
79+
--mud-secondary-100: rgb(255, 255, 255);
80+
--mud-tertiary-0: rgb(0, 0, 0);
81+
--mud-tertiary-100: rgb(255, 255, 255);
82+
83+
--mud-m3-primary: var(--mud-primary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
84+
--mud-m3-onprimary: var(--mud-primary-@(DarkMode ? "20" : "100"));
85+
--mud-m3-primary-container: var(--mud-primary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
86+
--mud-m3-onprimary-container: var(--mud-primary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
87+
88+
--mud-m3-secondary: var(--mud-secondary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
89+
--mud-m3-onsecondary: var(--mud-secondary-@(DarkMode ? "20" : "100"));
90+
--mud-m3-secondary-container: var(--mud-secondary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
91+
--mud-m3-onsecondary-container: var(--mud-secondary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
92+
93+
--mud-m3-tertiary: var(--mud-tertiary-@($"{(MainTone == 40 && DarkMode == true ? "80" : MainTone.ToString())}"));
94+
--mud-m3-ontertiary: var(--mud-tertiary-@(DarkMode ? "20" : "100"));
95+
--mud-m3-tertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "30" : ContainerTone.ToString())}"));
96+
--mud-m3-ontertiary-container: var(--mud-tertiary-@($"{(ContainerTone == 90 && DarkMode == true ? "90" : 100 - ContainerTone)}"));
97+
98+
@if (Override)
99+
{
100+
<MudRender>
101+
--mud-palette-primary: var(--mud-m3-primary) !important;
102+
--mud-palette-primary-text: var(--mud-m3-primary-container) !important;
103+
--mud-palette-secondary: var(--mud-m3-secondary) !important;
104+
--mud-palette-secondary-text: var(--mud-m3-secondary-container) !important;
105+
--mud-palette-tertiary: var(--mud-m3-tertiary) !important;
106+
--mud-palette-tertiary-text: var(--mud-m3-tertiary-container) !important;
107+
</MudRender>
108+
}
109+
}
110+
111+
.mud-m3-theme-primary {
112+
color: var(--mud-m3-onprimary);
113+
background-color: var(--mud-m3-primary);
114+
}
115+
116+
.mud-m3-theme-primary-reverse {
117+
color: var(--mud-m3-primary);
118+
background-color: var(--mud-m3-onprimary);
119+
}
120+
121+
.mud-m3-theme-primary-container {
122+
color: var(--mud-m3-onprimary-container);
123+
background-color: var(--mud-m3-primary-container);
124+
}
125+
126+
.mud-m3-theme-primary-container-reverse {
127+
color: var(--mud-m3-primary-container);
128+
background-color: var(--mud-m3-onprimary-container);
129+
}
130+
131+
.mud-m3-theme-secondary {
132+
color: var(--mud-m3-onsecondary);
133+
background-color: var(--mud-m3-secondary);
134+
}
135+
136+
.mud-m3-theme-secondary-reverse {
137+
color: var(--mud-m3-secondary);
138+
background-color: var(--mud-m3-onsecondary);
139+
}
140+
141+
.mud-m3-theme-secondary-container {
142+
color: var(--mud-m3-onsecondary-container);
143+
background-color: var(--mud-m3-secondary-container);
144+
}
145+
146+
.mud-m3-theme-secondary-container-reverse {
147+
color: var(--mud-m3-secondary-container);
148+
background-color: var(--mud-m3-onsecondary-container);
149+
}
150+
151+
.mud-m3-theme-tertiary {
152+
color: var(--mud-m3-ontertiary);
153+
background-color: var(--mud-m3-tertiary);
154+
}
155+
156+
.mud-m3-theme-tertiary-reverse {
157+
color: var(--mud-m3-tertiary);
158+
background-color: var(--mud-m3-ontertiary);
159+
}
160+
161+
.mud-m3-theme-tertiary-container {
162+
color: var(--mud-m3-ontertiary-container);
163+
background-color: var(--mud-m3-tertiary-container);
164+
}
165+
166+
.mud-m3-theme-tertiary-container-reverse {
167+
color: var(--mud-m3-tertiary-container);
168+
background-color: var(--mud-m3-ontertiary-container);
169+
}
170+
</style>

‎CodeBeam.MudExtensions/Components/ColorProvider/MudColorProvider.razor.cs‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using MudBlazor;
7+
8+
namespace MudExtensions
9+
{
10+
public partial class MudColorProvider : MudComponentBase
11+
{
12+
13+
public string GetRGBString(string hex, int percentage = 40)
14+
{
15+
if (string.IsNullOrEmpty(hex) || hex.Length < 6)
16+
{
17+
return null;
18+
}
19+
20+
if (hex.StartsWith("#"))
21+
{
22+
hex = hex.Substring(1);
23+
}
24+
25+
string r = hex.Substring(0, 2);
26+
string g = hex.Substring(2, 2);
27+
string b = hex.Substring(4, 2);
28+
29+
return $"rgb({HexToRgb(r, percentage)}, {HexToRgb(g, percentage)}, {HexToRgb(b, percentage)})";
30+
}
31+
32+
protected int HexToRgb(string s, int percentage = 40)
33+
{
34+
return ConvertRGBTone(SingleHexValue(s[0].ToString()) * 16 + SingleHexValue(s[1].ToString()), percentage);
35+
}
36+
37+
protected int ConvertRGBTone(int val, double percentage)
38+
{
39+
if (percentage == 40)
40+
{
41+
return val;
42+
}
43+
else if (percentage < 40)
44+
{
45+
double processTime = (40 - percentage) / 10;
46+
return (int)(val - val * 0.15 * processTime);
47+
}
48+
else
49+
{
50+
double processTime = (percentage - 40) / 10;
51+
return (int)(val + (255 - val) * 0.15 * processTime);
52+
}
53+
}
54+
55+
protected int SingleHexValue(string s)
56+
{
57+
switch (s)
58+
{
59+
case "0":
60+
return 0;
61+
case "1":
62+
return 1;
63+
case "2":
64+
return 2;
65+
case "3":
66+
return 3;
67+
case "4":
68+
return 4;
69+
case "5":
70+
return 5;
71+
case "6":
72+
return 6;
73+
case "7":
74+
return 7;
75+
case "8":
76+
return 8;
77+
case "9":
78+
return 9;
79+
case "a":
80+
case "A":
81+
return 10;
82+
case "b":
83+
case "B":
84+
return 11;
85+
case "c":
86+
case "C":
87+
return 12;
88+
case "d":
89+
case "D":
90+
return 13;
91+
case "e":
92+
case "E":
93+
return 14;
94+
case "f":
95+
case "F":
96+
return 15;
97+
case "g":
98+
case "G":
99+
return 16;
100+
default:
101+
return 0;
102+
}
103+
}
104+
105+
}
106+
}

‎ComponentViewer.Docs/Components/CodeBlock.razor‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@inherits MudComponentBase
2+
@namespace ComponentViewer.Docs.Components
3+
4+
<MudText Inline="true" Class="px-2" Style="background-color: #ff4081; color: white; border-radius: 20px">@ChildContent</MudText>
5+
6+
@code{
7+
[Parameter]
8+
public RenderFragment ChildContent { get; set; }
9+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@
1515
</MudTable>
1616
</ExampleCard>
1717

18+
<ExampleCard Title="Api - MudColorProvider" HasExpansionPanel="true">
19+
<MudTable Items="@(typeof(MudColorProvider).GetProperties().OrderBy(x => x.Name).ToList())">
20+
<HeaderContent>
21+
<MudTh>Name</MudTh>
22+
<MudTh>Type</MudTh>
23+
</HeaderContent>
24+
<RowTemplate>
25+
<MudTd>@context.Name</MudTd>
26+
<MudTd>@context.PropertyType.ToString()</MudTd>
27+
</RowTemplate>
28+
</MudTable>
29+
</ExampleCard>
30+
1831
<ExampleCard Title="Api - MudDateWheelPicker" HasExpansionPanel="true">
1932
<MudTable Items="@(typeof(MudDateWheelPicker).GetProperties().OrderBy(x => x.Name).ToList())">
2033
<HeaderContent>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@page "/mudcolorprovider"
2+
@using ComponentViewer.Docs.Pages.Examples
3+
4+
<ExamplePage Title="MudColorProvider">
5+
<ExampleCard ExampleName="ColorProviderExample1" Title="Basics" Description="MudColorProvider extends your primary, secondary and tertiary color.">
6+
<ColorProviderExample1 />
7+
</ExampleCard>
8+
9+
<ExampleCard ExampleName="ColorProviderExample2" Title="How To Use" Description="">
10+
<MudText>(1) Place <CodeBlock>@("<MudColorProvider />")</CodeBlock> after <CodeBlock>@("<MudThemeProvider />")</CodeBlock>.</MudText>
11+
<MudText>(2) After you define primary, secondary and tertiary colors, MudColorProvider creates CSS classes and variables.</MudText>
12+
<MudText>(3) Use this classes or variables in your components, like: <CodeBlock>Class="mud-m3-theme-primary"</CodeBlock> or <CodeBlock>Style="background-color: var(--mud-primary-40)"</CodeBlock> </MudText>
13+
14+
<MudText Class="mt-2" Typo="Typo.h6">Theme Classes</MudText>
15+
<MudText Color="Color.Primary">.mud-m3-theme-primary<br/>.mud-m3-theme-primary-reverse<br/>.mud-m3-theme-primary-container<br/>.mud-m3-primary-container-reverse</MudText>
16+
<MudText Color="Color.Secondary">.mud-m3-theme-secondary<br/>.mud-m3-theme-secondary-reverse<br/>.mud-m3-theme-secondary-container<br/>.mud-m3-secondary-container-reverse</MudText>
17+
<MudText Color="Color.Tertiary">.mud-m3-theme-tertiary<br/>.mud-m3-theme-tertiary-reverse<br/>.mud-m3-theme-tertiary-container<br/>.mud-m3-tertiary-container-reverse</MudText>
18+
<MudText Class="mt-2" Typo="Typo.h6">Dynamic CSS Variables</MudText>
19+
<MudText>These variables depends on MainTone and ContainerTone parameters.</MudText>
20+
<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>
21+
<MudText>And this variables represent your dynamic values:</MudText>
22+
<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>
24+
<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>
26+
<MudText Class="mt-2" Typo="Typo.h6">Static CSS Variables</MudText>
27+
<MudText>These variables shows your color shades and created automatically by component.</MudText>
28+
@for (int i = 0; i <= 100; i = i + 10)
29+
{
30+
int a = i;
31+
<MudText>--mud-primary-@(a) --mud-secondary-@(a) --mud-tertiary-@(a)</MudText>
32+
@if (a == 90)
33+
{
34+
<MudText>--mud-primary-99 --mud-secondary-99 --mud-tertiary-99</MudText>
35+
}
36+
}
37+
<ColorProviderExample2/>
38+
</ExampleCard>
39+
</ExamplePage>

0 commit comments

Comments
 (0)