Colors

WIP

HTML
Assets
Info
Notes


        
        <div class="Grid">

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-border-all-xxs u-borderRadius-xxs u-background-black"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-black</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-border-all-xxs u-borderRadius-xxs u-background-white"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-white</p>
    </div>

</div>

<hr>

<div class="Grid">

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-5"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-5</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-10"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-10</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-20"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-20</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-30"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-30</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-40"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-40</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-50"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-50</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-60"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-60</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-70"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-70</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-80"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-80</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-90"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-90</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-95"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-95</p>
    </div>

</div>

<hr>

<div class="Grid">

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-teal-30"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-teal-30</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-teal-50"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-teal-50</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-teal-70"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-teal-70</p>
    </div>

</div>

<hr>

<div class="Grid">

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-10"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-10</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-20"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-20</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-30"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-30</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-40"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-40</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-50"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-50</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-60"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-60</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-80"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-80</p>
    </div>

    <div class="Grid-cell u-md-size3of12 u-lg-size3of12">
        <div class="Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-90"></div>
        <p class="u-textCenter u-color-black u-text-s">u-background-grey-90</p>
    </div>

</div>

File:

Content:


                                /** @define utilities */

/*
 *	1. To be overridden by themes
 */

:root {
  --Color-primary: #111; /* [1] */

  --Color-black: #000;
  --Color-white: #fff;
  --Color-grey-10: #f5f5f0;
  --Color-grey-15: #f6f9fc;
  --Color-grey-20: #eee;
  --Color-grey-30: #ddd;
  --Color-grey-40: #a5abb0;
  --Color-grey-50: #5a6772;
  --Color-grey-60: #444e57;
  --Color-grey-80: #30373d;
  --Color-grey-90: #1c2024;
  --Color-teal-30: #00c5ca;
  --Color-teal-50: #65dcdf;
  --Color-teal-70: #004a4d;
  --Color-focus: #ff8c00;

  --Color-5: color(var(--Color-primary) l(+50%) s(-50%));
  --Color-10: color(var(--Color-primary) l(+40%) s(-40%));
  --Color-20: color(var(--Color-primary) l(+30%) s(-30%));
  --Color-30: color(var(--Color-primary) l(+20%) s(-20%));
  --Color-40: color(var(--Color-primary) l(+8%) s(-15%));
  --Color-50: var(--Color-primary);
  --Color-60: color(var(--Color-primary) l(-5%));
  --Color-70: color(var(--Color-primary) l(-10%));
  --Color-80: color(var(--Color-primary) l(-15%));
  --Color-90: color(var(--Color-primary) l(-20%));
  --Color-95: color(var(--Color-primary) l(-25%));

  --Color-compl: color(var(--Color-primary) h(+180) s(100%) l(70%));
  --Color-compl-5: color(var(--Color-primary) h(+180) s(20%) l(95%));
  --Color-compl-10: color(var(--Color-primary) h(+180) s(30%) l(90%));
  --Color-compl-80: color(var(--Color-primary) h(+180));
}

.u-color-black {
  color: var(--Color-black) !important;
}

.u-background-black {
  background-color: var(--Color-black) !important;
}

.u-color-white {
  color: var(--Color-white) !important;
}

.u-background-white {
  background-color: var(--Color-white) !important;
}

.u-color-grey-10 {
  color: var(--Color-grey-10) !important;
}

.u-background-grey-10 {
  background-color: var(--Color-grey-10) !important;
}

.u-color-grey-15 {
  color: var(--Color-grey-15) !important;
}

.u-background-grey-15 {
  background-color: var(--Color-grey-15) !important;
}

.u-color-grey-20 {
  color: var(--Color-grey-20) !important;
}

.u-background-grey-20 {
  background-color: var(--Color-grey-20) !important;
}

.u-color-grey-30 {
  color: var(--Color-grey-30) !important;
}

.u-background-grey-30 {
  background-color: var(--Color-grey-30) !important;
}

.u-color-grey-40 {
  color: var(--Color-grey-40) !important;
}

.u-background-grey-40 {
  background-color: var(--Color-grey-40) !important;
}

.u-color-grey-50 {
  color: var(--Color-grey-50) !important;
}

.u-background-grey-50 {
  background-color: var(--Color-grey-50) !important;
}

.u-color-grey-60 {
  color: var(--Color-grey-60) !important;
}

.u-background-grey-60 {
  background-color: var(--Color-grey-60) !important;
}

.u-color-grey-80 {
  color: var(--Color-grey-80) !important;
}

.u-background-grey-80 {
  background-color: var(--Color-grey-80) !important;
}

.u-color-grey-90 {
  color: var(--Color-grey-90) !important;
}

.u-background-grey-90 {
  background-color: var(--Color-grey-90) !important;
}

/* Link / buttons */

.u-color-teal-30 {
  color: var(--Color-teal-30) !important;
}

.u-background-teal-30 {
  background-color: var(--Color-teal-30) !important;
}

.u-color-teal-50 {
  color: var(--Color-teal-50) !important;
}

.u-background-teal-50 {
  background-color: var(--Color-teal-50) !important;
}

.u-color-teal-70 {
  color: var(--Color-teal-70) !important;
}

.u-background-teal-70 {
  background-color: var(--Color-teal-70) !important;
}

/* Color primary */

.u-color-5 {
  color: var(--Color-5) !important;
}

.u-background-5 {
  background-color: var(--Color-5) !important;
}

.u-color-10 {
  color: var(--Color-10) !important;
}

.u-background-10 {
  background-color: var(--Color-10) !important;
}

.u-color-20 {
  color: var(--Color-20) !important;
}

.u-background-20 {
  background-color: var(--Color-20) !important;
}

.u-color-30 {
  color: var(--Color-30) !important;
}

.u-background-30 {
  background-color: var(--Color-30) !important;
}

.u-color-40 {
  color: var(--Color-40) !important;
}

.u-background-40 {
  background-color: var(--Color-40) !important;
}

.u-color-50 {
  color: var(--Color-50) !important;
}

.u-background-50 {
  background-color: var(--Color-50) !important;
}

.u-color-60 {
  color: var(--Color-60) !important;
}

.u-background-60 {
  background-color: var(--Color-60) !important;
}

.u-color-70 {
  color: var(--Color-70) !important;
}

.u-background-70 {
  background-color: var(--Color-70) !important;
}

.u-color-80 {
  color: var(--Color-80) !important;
}

.u-background-80 {
  background-color: var(--Color-80) !important;
}

.u-color-90 {
  color: var(--Color-90) !important;
}

.u-background-90 {
  background-color: var(--Color-90) !important;
}

.u-color-95 {
  color: var(--Color-95) !important;
}

.u-background-95 {
  background-color: var(--Color-95) !important;
}

.u-backround-none {
  background-color: transparent !important;
}

.u-color-compl {
  color: var(--Color-compl) !important;
}

.u-background-compl {
  background-color: var(--Color-compl) !important;
}

.u-background-compl-5 {
  background-color: var(--Color-compl-5) !important;
}

.u-color-compl-5 {
  color: var(--Color-compl-5) !important;
}

.u-color-compl-10 {
  color: var(--Color-compl-10) !important;
}

.u-background-compl-10 {
  background-color: var(--Color-compl-10) !important;
}

.u-color-compl-80 {
  color: var(--Color-compl-80) !important;
}

.u-background-compl-80 {
  background-color: var(--Color-compl-80) !important;
}

URL: /components/raw/colors/index.css
Filesystem Path: src/utils/colors/index.css
Size: 5.4 KB

Handle: @colors
Preview:
- With layout
- Component only
Filesystem Path: src/utils/colors/colors.tmpl

In modo simile ai colori di sfondo, è possibile impostare il colore del testo applicando le classi u-color- equivalenti, ad esempio

<p class="u-color-90">
  Magna veniam exercitation est incididunt eu nostrud aute dolore adipisicing ipsum labore deserunt reprehenderit.
</p>