Spartherm

Colors 

<div class="container">
    <div class="desc desc-line">Brand Colors</div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="color-example bg-accent text-white">
                <h4>Kupfer</h4>
                <p><b>.accent</b> (.copper)<br>
                    HEX: #c56b45<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gradient-accent text-white">
                <h4>Kupfer-Verlauf</h4>
                <p><b>.gradient-accent</b><br>
                    HEX: #eb966b bis #632d17<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-dark text-white">
                <h4>Anthrazit</h4>
                <p><b>.dark</b> (.anthracite)<br>
                    HEX: #10171c<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gradient-primary text-white">
                <h4>Anthrazit-Verlauf</h4>
                <p><b>.gradient-primary</b><br>
                    HEX: #2a3a42 bis #10171c<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-secondary text-white">
                <h4>Goldbraun</h4>
                <p><b>.secondary</b> (.gold-brown)<br>
                    HEX: #b2744b<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-primary text-white">
                <h4>Premiumblue</h4>
                <p><b>.primary</b> (.premiumblue)<br>
                    HEX: #2a3a42<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-light text-black">
                <h4>Light Grey</h4>
                <p><b>.light</b> (.gray-100)<br>
                    HEX: #f2f2f2<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-grey-1 text-black">
                <h4>Grey I</h4>
                <p><b>.grey-1</b> (.gray-200)<br>
                    HEX: #e9e9e9<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-grey-2 text-black">
                <h4>Grey II</h4>
                <p><b>.grey-2</b> (.gray-300)<br>
                    HEX: #d9d5d5<br>
                </p>
            </div>
        </div>
    </div>
    <div class="desc desc-line">Interface Colors</div>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="color-example bg-danger text-black">
                <h4>Error</h4>
                <p><b>.danger</b><br>
                    HEX: #ff6600<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-warning text-black">
                <h4>Warning</h4>
                <p><b>.warning</b><br>
                    HEX: #ffb300<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-success text-black">
                <h4>Success</h4>
                <p><b>.success</b><br>
                    HEX: #00b06a<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-text-color text-white">
                <h4>Text primary</h4>
                <p><b>.text-color</b><br>
                    HEX: #000<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gray-900 text-white">
                <h4>Blue Input/Forms Dark Mode</h4>
                <p><b>.gray-900</b><br>
                    HEX: #151d21<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gray-600 text-white">
                <h4>Button Dark Mode Disabled</h4>
                <p><b>.gray-600</b><br>
                    HEX: #606265<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gray-200 text-black">
                <h4>Grey Input/Forms selected</h4>
                <p><b>.gray-200</b><br>
                    HEX: #e9e9e9<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gray-300 text-black">
                <h4>Button Light Mode Disabled</h4>
                <p><b>.gray-300</b><br>
                    HEX: #d9d5d5<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-black text-white">
                <h4>Text Input/Forms selected</h4>
                <p><b>.black</b><br>
                    HEX: #000<br>
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="color-example bg-gray-400 text-white">
                <h4>Text Input/Forms not selected</h4>
                <p><b>.gray-400</b><br>
                    HEX: #8d8d8d<br>
                </p>
            </div>
        </div>
    </div>
</div>

<style>
    .color-example {
        padding: 15px;
        margin-bottom: 30px;
        display: block;
    }

    .color-example p {
        font-size: 16px;
        font-family: monospace;
    }

    .bg-gold-brown {
        background-color: #b2744b;
    }

    .bg-text-color {
        background-color: #000;
    }

    .bg-gray-100 {
        background-color: #f2f2f2;
    }

    .bg-gray-200 {
        background-color: #e9e9e9;
    }

    .bg-gray-300 {
        background-color: #d9d5d5;
    }

    .bg-gray-400 {
        background-color: #8d8d8d;
    }

    .bg-gray-500 {
        background-color: #adb5bd;
    }

    .bg-gray-600 {
        background-color: #606265;
    }

    .bg-gray-700 {
        background-color: #495057;
    }

    .bg-gray-800 {
        background-color: #343a40;
    }

    .bg-gray-900 {
        background-color: #151d21;
    }
</style>
 
<div class="container">
    <div class="desc desc-line">Brand Colors</div>
    <div class="row">
        {{#each colors}}
            <div class="col-12 col-lg-6">
                <div class="color-example bg-{{ class }} text-{{ contrast }}">
                    <h4>{{ name }}</h4>
                    <p><b>.{{ class }}</b>{{#if color}} (.{{color}}){{/if}}<br>
                        {{#if hex2}}
                            HEX: {{ hex }} bis {{ hex2 }}<br>
                        {{else}}
                            HEX: {{ hex }}<br>
                        {{/if}}
                    </p>
                </div>
            </div>
        {{/each}}
    </div>
    <div class="desc desc-line">Interface Colors</div>
    <div class="row">
        {{#each interface-colors}}
            <div class="col-12 col-lg-6">
                <div class="color-example bg-{{ class }} text-{{ contrast }}">
                    <h4>{{ name }}</h4>
                    <p><b>.{{ class }}</b><br>
                        HEX: {{ hex }}<br>
                    </p>
                </div>
            </div>
        {{/each}}
    </div>
</div>

<style>
    .color-example {
        padding: 15px;
        margin-bottom: 30px;
        display: block;
    }
    .color-example p {
        font-size: 16px;
        font-family: monospace;
    }
    .bg-gold-brown {
        background-color: #b2744b;
    }
    .bg-text-color {
        background-color: #000;
    }
    .bg-gray-100 {
        background-color: #f2f2f2;
    }
    .bg-gray-200 {
        background-color: #e9e9e9;
    }
    .bg-gray-300 {
        background-color: #d9d5d5;
    }
    .bg-gray-400 {
        background-color: #8d8d8d;
    }
    .bg-gray-500 {
        background-color: #adb5bd;
    }
    .bg-gray-600 {
        background-color: #606265;
    }
    .bg-gray-700 {
        background-color: #495057;
    }
    .bg-gray-800 {
        background-color: #343a40;
    }
    .bg-gray-900 {
        background-color: #151d21;
    }

</style>
 
{
  "colors": [
    {
      "name": "Kupfer",
      "class": "accent",
      "color": "copper",
      "hex": "#c56b45",
      "contrast": "white"
    },
    {
      "name": "Kupfer-Verlauf",
      "class": "gradient-accent",
      "hex": "#eb966b",
      "hex2": "#632d17",
      "contrast": "white"
    },
    {
      "name": "Anthrazit",
      "class": "dark",
      "color": "anthracite",
      "hex": "#10171c",
      "contrast": "white"
    },
    {
      "name": "Anthrazit-Verlauf",
      "class": "gradient-primary",
      "hex": "#2a3a42",
      "hex2": "#10171c",
      "contrast": "white"
    },
    {
      "name": "Goldbraun",
      "class": "secondary",
      "color": "gold-brown",
      "hex": "#b2744b",
      "contrast": "white"
    },
    {
      "name": "Premiumblue",
      "class": "primary",
      "color": "premiumblue",
      "hex": "#2a3a42",
      "contrast": "white"
    },
    {
      "name": "Light Grey",
      "class": "light",
      "color": "gray-100",
      "hex": "#f2f2f2",
      "contrast": "black"
    },
    {
      "name": "Grey I",
      "class": "grey-1",
      "color": "gray-200",
      "hex": "#e9e9e9",
      "contrast": "black"
    },
    {
      "name": "Grey II",
      "class": "grey-2",
      "color": "gray-300",
      "hex": "#d9d5d5",
      "contrast": "black"
    }
  ],
  "interface-colors": [
    {
      "name": "Error",
      "class": "danger",
      "hex": "#ff6600",
      "contrast": "black"
    },
    {
      "name": "Warning",
      "class": "warning",
      "hex": "#ffb300",
      "contrast": "black"
    },
    {
      "name": "Success",
      "class": "success",
      "hex": "#00b06a",
      "contrast": "black"
    },
    {
      "name": "Text primary",
      "class": "text-color",
      "hex": "#000",
      "contrast": "white"
    },
    {
      "name": "Blue Input/Forms Dark Mode",
      "class": "gray-900",
      "hex": "#151d21",
      "contrast": "white"
    },
    {
      "name": "Button Dark Mode Disabled",
      "class": "gray-600",
      "hex": "#606265",
      "contrast": "white"
    },
    {
      "name": "Grey Input/Forms selected",
      "class": "gray-200",
      "hex": "#e9e9e9",
      "contrast": "black"
    },
    {
      "name": "Button Light Mode Disabled",
      "class": "gray-300",
      "hex": "#d9d5d5",
      "contrast": "black"
    },
    {
      "name": "Text Input/Forms selected",
      "class": "black",
      "hex": "#000",
      "contrast": "white"
    },
    {
      "name": "Text Input/Forms not selected",
      "class": "gray-400",
      "hex": "#8d8d8d",
      "contrast": "white"
    }
  ]
}
  • Inhalt: 
    h1,h2,h3,h4,h5,h6,p,li,.row {
  .text-white & {
    color: $white!important;
  }
  .text-black & {
    color: $black!important;
  }
}
  • URL: /components/raw/colors/colors.scss
  • Pfad Dateisystem: components\01-general\colors\colors.scss
  • Größe: 142 Bytes

Keine Notizen vorhanden.