<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>
  • Content:
    /** @define utilities */
    
    :root {
      --Color-black: #000;
      --Color-white: #fff;
      --Color-grey-10: #f5f5f0;
      --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;
    }
    
    /*
     *	To be overridden by themes
     */
    
    :root {
      --Color-primary: #111;
    }
    
    .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-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: color(var(--Color-primary) l(+50%) s(-50%)) !important;
    }
    
    .u-background-5 {
      background-color: color(var(--Color-primary) l(+50%) s(-50%)) !important;
    }
    
    .u-color-10 {
      color: color(var(--Color-primary) l(+40%) s(-40%)) !important;
    }
    
    .u-background-10 {
      background-color: color(var(--Color-primary) l(+40%) s(-40%)) !important;
    }
    
    .u-color-20 {
      color: color(var(--Color-primary) l(+30%) s(-30%)) !important;
    }
    
    .u-background-20 {
      background-color: color(var(--Color-primary) l(+30%) s(-30%)) !important;
    }
    
    .u-color-30 {
      color: color(var(--Color-primary) l(+20%) s(-20%)) !important;
    }
    
    .u-background-30 {
      background-color: color(var(--Color-primary) l(+20%) s(-20%)) !important;
    }
    
    .u-color-40 {
      color: color(var(--Color-primary) l(+8%) s(-15%)) !important;
    }
    
    .u-background-40 {
      background-color: color(var(--Color-primary) l(+8%) s(-15%)) !important;
    }
    
    .u-color-50 {
      color: var(--Color-primary) !important;
    }
    
    .u-background-50 {
      background-color: var(--Color-primary) !important;
    }
    
    .u-color-60 {
      color: color(var(--Color-primary) l(-5%)) !important;
    }
    
    .u-background-60 {
      background-color: color(var(--Color-primary) l(-5%)) !important;
    }
    
    .u-color-70 {
      color: color(var(--Color-primary) l(-10%)) !important;
    }
    
    .u-background-70 {
      background-color: color(var(--Color-primary) l(-10%)) !important;
    }
    
    .u-color-80 {
      color: color(var(--Color-primary) l(-15%)) !important;
    }
    
    .u-background-80 {
      background-color: color(var(--Color-primary) l(-15%)) !important;
    }
    
    .u-color-90 {
      color: color(var(--Color-primary) l(-20%)) !important;
    }
    
    .u-background-90 {
      background-color: color(var(--Color-primary) l(-20%)) !important;
    }
    
    .u-color-95 {
      color: color(var(--Color-primary) l(-25%)) !important;
    }
    
    .u-background-95 {
      background-color: color(var(--Color-primary) l(-25%)) !important;
    }
    
    .u-backround-none {
      background-color: transparent !important;
    }
    
    .u-color-compl {
      color: color(var(--Color-primary) h(+180) s(100%) l(70%)) !important;
    }
    
    .u-background-compl {
      background-color: color(var(--Color-primary) h(+180) s(100%) l(70%)) !important;
    }
    
    .u-background-compl-5 {
      background-color: color(var(--Color-primary) h(+180) s(20%) l(95%)) !important;
    }
    
    .u-color-compl-5 {
      color: color(var(--Color-primary) h(+180) s(20%) l(95%)) !important;
    }
    
    .u-color-compl-10 {
      color: color(var(--Color-primary) h(+180) s(30%) l(90%)) !important;
    }
    
    .u-background-compl-10 {
      background-color: color(var(--Color-primary) h(+180) s(30%) l(90%)) !important;
    }
    
    .u-color-compl-80 {
      color: color(var(--Color-primary) h(+180)) !important;
    }
    
    .u-background-compl-80 {
      background-color: color(var(--Color-primary) h(+180)) !important;
    }
    
  • URL: /components/raw/colors/index.css
  • Filesystem Path: src/utils/colors/index.css
  • Size: 5.1 KB

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>