IGP-Fan-Reference/IGP/Pages/MakingOf/Parts/MakingOfColours.razor

<div>Colors</div>

<div class="colorContainer">
    <CodeComponent>
        --accent: @accent;
        --primary: @primary;
        --primary-border: @primary_border;
        --primary-hover: @primary_hover;
        --primary-border-hover: @primary_border_hover;
        --background: @background;
        --secondary: @secondary;
        --secondary-hover: @secondary_hover;
        --secondary-border-hover: @secondary_border_hover;
        --paper: @paper;
        --paper-border: @paper_border;
        --info: @info;
        --info-border: @info_border;
        --info-secondary: @info_secondary;
        --info-secondary-border: @info_secondary_border;
    </CodeComponent>
    <br/>
    <div class="color accent">
        <div>Accent</div>
        <div>
            Base: <input type="color" value="@accent" @onchange="e => accent = e.Value!.ToString()!"/>
        </div>
    </div>
    <div class="color primary">
        <div>Primary</div>
        <div>
            Base: <input type="color" value="@primary" @onchange="e => primary = e.Value!.ToString()!"/>
        </div>
        <div>
            Border: <input type="color" value="@primary_border" @onchange="e => primary_border = e.Value!.ToString()!"/>
        </div>
        <div>
            Hover Base: <input type="color" value="@primary_hover" @onchange="e => primary_hover = e.Value!.ToString()!"/>
        </div>
        <div>
            Hover Border: <input type="color" value="@primary_border_hover" @onchange="e => primary_border_hover = e.Value!.ToString()!"/>
        </div>
    </div>
    <div class="color secondary">
        <div>Secondary</div>
        <div>
            Base: <input type="color" value="@secondary" @onchange="e => secondary = e.Value!.ToString()!"/>
        </div>
        <div>
            Hover Base: <input type="color" value="@secondary_hover" @onchange="e => secondary_hover = e.Value!.ToString()!"/>
        </div>
        <div>
            Hover Border: <input type="color" value="@secondary_border_hover" @onchange="e => secondary_border_hover = e.Value!.ToString()!"/>
        </div>
    </div>
    <div class="color paper">
        <div>Paper</div>
        <div>
            Base: <input type="color" value="@paper" @onchange="e => paper = e.Value!.ToString()!"/>
        </div>
        <div>
            Border: <input type="color" value="@paper_border" @onchange="e => paper_border = e.Value!.ToString()!"/>
        </div>
    </div>
    <div class="color background">
        <div>Background</div>
        <div>
            Base: <input type="color" value="@background" @onchange="e => background = e.Value!.ToString()!"/>
        </div>
    </div>

    <div class="color info">
        <div>Info</div>
        <div>
            Base: <input type="color" value="@info" @onchange="e => info = e.Value!.ToString()!"/>
        </div>
        <div>
            Border: <input type="color" value="@info_border" @onchange="e => info_border = e.Value!.ToString()!"/>
        </div>
    </div>
    
     <div class="color info_secondary">
            <div>Info Secondary</div>
         <div>
             Base: <input type="color" value="@info_secondary" @onchange="e => info_secondary = e.Value!.ToString()!"/>
         </div>
         <div>
             Border: <input type="color" value="@info_secondary_border" @onchange="e => info_secondary_border = e.Value!.ToString()!"/>
         </div>
        </div>
</div>

<style>
    :root {
        --accent: @accent;
        --primary: @primary;
        --primary-border: @primary_border;
        --primary-hover: @primary_hover;
        --primary-border-hover: @primary_border_hover;
        --background: @background;
        --secondary: @secondary;
        --secondary-hover: @secondary_hover;
        --secondary-border-hover: @secondary_border_hover;
        --paper: @paper;
        --paper-border: @paper_border;
        --info: @info;
        --info-border: @info_border;
        
        --info-secondary: @info_secondary;
        --info-secondary-border: @info_secondary_border;
    }

    .colorContainer {
        display: flex;
        flex-direction: column;
    }

    .color {
        padding: 12px;
        display: flex;
        flex-direction: row;
        gap: 32px;
        align-items: center;
    }

    .accent {
        background-color: var(--accent);
    }

    .primary {
        background-color: var(--primary);
        border: 1px solid var(--primary-border);
    }

        .primary:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-border-hover);
        }

    .secondary {
        background-color: var(--secondary);
        border: 1px solid var(--secondary);
    }

        .secondary:hover {
            background-color: var(--secondary-hover);
            border-color: var(--secondary-border-hover);
        }

    .paper {
        background-color: var(--paper);
        border: 4px solid var(--paper-border);
    }

    .background {
        background-color: var(--background);
    }

    .info {
        background-color: var(--info);
        border: 1px solid var(--info-border);
    }

    .info_secondary {
        background-color: var(--info-secondary);
        border: 1px solid var(--info-secondary-border);
    }

</style>

@code {
    string accent = "#432462";
    string primary = "#4308a3";
    string primary_border = "#2c0b62";
    string primary_hover = "#5e00f7";
    string primary_border_hover = "#a168ff";
    string background = "#161618";
    string secondary = "#23133e";
    string secondary_hover = "#2a0070";
    string secondary_border_hover = "#a168ff";
    string paper = "#252526";
    string paper_border = "#151516";
    string info = "#451376";
    string info_border = "#210b36";
    string info_secondary = "#4c3e59";
    string info_secondary_border = "#7e58a2";
    

}