JMT Alimentation Animal
Project version : 1.0.3

Color 

<h2>Marque</h2>

<ul class="color-list">
    <li>
        <div class="c-yellow-dark"></div><b>yellow-dark</b><span>#F5CF00</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-yellow"></div><b>yellow</b><span>#FFE13B</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-red-dark"></div><b>red-dark</b><span>#820A24</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-red"></div><b>red</b><span>#E42813</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-green-dark"></div><b>green-dark</b><span>#81C230</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-green"></div><b>green</b><span>#A5E258</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-brown-dark"></div><b>brown-dark</b><span>#332D2D</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-brown"></div><b>brown</b><span>#4C4636</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-brown-light"></div><b>brown-light</b><span>#908975</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-brown-lighter"></div><b>brown-lighter</b><span>#F3F1EC</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-brown-lightest"></div><b>brown-lightest</b><span>#F9F8F5</span><span></span><span></span><span></span></li>
</ul>

<h2>Usage web</h2>

<ul class="color-list">
    <li>
        <div class="c-font-color"></div><b>font-color</b><span>#4C4636</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-heading"></div><b>heading</b><span>#4C4636</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-heading-alt"></div><b>heading-alt</b><span>#E42813</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-link"></div><b>link</b><span>#347f71</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-link-hover"></div><b>link-hover</b><span>#E42813</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-label"></div><b>label</b><span>#255b51</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-background-light"></div><b>background-light</b><span>#F3F1EC</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button"></div><b>button</b><span>#FFE13B</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-hover"></div><b>button-hover</b><span>#F5CF00</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-primary"></div><b>button-primary</b><span>#347f71</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-primary-hover"></div><b>button-primary-hover</b><span>#820A24</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-secondary"></div><b>button-secondary</b><span>#4C4636</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-secondary-hover"></div><b>button-secondary-hover</b><span>#332D2D</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-tertiary"></div><b>button-tertiary</b><span>#A5E258</span><span></span><span></span><span></span></li>
    <li>
        <div class="c-button-tertiary-hover"></div><b>button-tertiary-hover</b><span>#81C230</span><span></span><span></span><span></span></li>
</ul>
 
<h2>Marque</h2>

<ul class="color-list">
{{#each color.brands}}
    <li><div class="c-{{this.name}}"></div><b>{{this.name}}</b><span>{{this.hex}}</span><span>{{this.rvb}}</span><span>{{this.hsl}}</span><span>{{this.pantone}}</span></li>
{{/each}}
</ul>

<h2>Usage web</h2>

<ul class="color-list">
{{#each color.colors}}
    <li><div class="c-{{this.name}}"></div><b>{{this.name}}</b><span>{{this.hex}}</span><span>{{this.rvb}}</span><span>{{this.hsl}}</span><span>{{this.pantone}}</span></li>
{{/each}}
</ul>
 
{
  "color": {
    "colors": [
      {
        "item": null,
        "name": "font-color",
        "hex": "#4C4636"
      },
      {
        "item": null,
        "name": "heading",
        "hex": "#4C4636"
      },
      {
        "item": null,
        "name": "heading-alt",
        "hex": "#E42813"
      },
      {
        "item": null,
        "name": "link",
        "hex": "#347f71"
      },
      {
        "item": null,
        "name": "link-hover",
        "hex": "#E42813"
      },
      {
        "item": null,
        "name": "label",
        "hex": "#255b51"
      },
      {
        "item": null,
        "name": "background-light",
        "hex": "#F3F1EC"
      },
      {
        "item": null,
        "name": "button",
        "hex": "#FFE13B"
      },
      {
        "item": null,
        "name": "button-hover",
        "hex": "#F5CF00"
      },
      {
        "item": null,
        "name": "button-primary",
        "hex": "#347f71"
      },
      {
        "item": null,
        "name": "button-primary-hover",
        "hex": "#820A24"
      },
      {
        "item": null,
        "name": "button-secondary",
        "hex": "#4C4636"
      },
      {
        "item": null,
        "name": "button-secondary-hover",
        "hex": "#332D2D"
      },
      {
        "item": null,
        "name": "button-tertiary",
        "hex": "#A5E258"
      },
      {
        "item": null,
        "name": "button-tertiary-hover",
        "hex": "#81C230"
      }
    ],
    "brands": [
      {
        "item": null,
        "name": "yellow-dark",
        "hex": "#F5CF00"
      },
      {
        "item": null,
        "name": "yellow",
        "hex": "#FFE13B"
      },
      {
        "item": null,
        "name": "red-dark",
        "hex": "#820A24"
      },
      {
        "item": null,
        "name": "red",
        "hex": "#E42813"
      },
      {
        "item": null,
        "name": "green-dark",
        "hex": "#81C230"
      },
      {
        "item": null,
        "name": "green",
        "hex": "#A5E258"
      },
      {
        "item": null,
        "name": "brown-dark",
        "hex": "#332D2D"
      },
      {
        "item": null,
        "name": "brown",
        "hex": "#4C4636"
      },
      {
        "item": null,
        "name": "brown-light",
        "hex": "#908975"
      },
      {
        "item": null,
        "name": "brown-lighter",
        "hex": "#F3F1EC"
      },
      {
        "item": null,
        "name": "brown-lightest",
        "hex": "#F9F8F5"
      }
    ]
  }
}
  • Content: 
    @include generateColor('yellow-dark', $c-yellow-dark);
@include generateColor('yellow', $c-yellow);
@include generateColor('red-dark', $c-red-dark);
@include generateColor('red', $c-red);
@include generateColor('green-dark', $c-green-dark);
@include generateColor('green', $c-green);
@include generateColor('brown-dark', $c-brown-dark);
@include generateColor('brown', $c-brown);
@include generateColor('brown-light', $c-brown-light);
@include generateColor('brown-lighter', $c-brown-lighter);
@include generateColor('brown-lightest', $c-brown-lightest);

@include generateColor('font-color', $c-font-color);
@include generateColor('heading', $c-heading-color);
@include generateColor('heading-alt', $c-heading-color-alt);
@include generateColor('link', $c-link-color);
@include generateColor('link-hover', $c-link-hover-color);
@include generateColor('label', $c-label);
@include generateColor('background-light', $c-background-light);

@include generateColor('button', $c-button);
@include generateColor('button-hover', $c-button-hover);
@include generateColor('button-primary', $c-button-primary);
@include generateColor('button-primary-hover', $c-button-primary-hover);
@include generateColor('button-secondary', $c-button-secondary);
@include generateColor('button-secondary-hover', $c-button-secondary-hover);
@include generateColor('button-tertiary', $c-button-tertiary);
@include generateColor('button-tertiary-hover', $c-button-tertiary-hover);
  • URL: /components/raw/color/_color.scss
  • Filesystem Path: components/04-elements/00-color/_color.scss
  • Size: 1.5 KB

How to add color

context:
  color:
    colors:
      - item:
        name: base
        hex: '#4a3449'
        rvb: 'rgb(74, 52, 73)'
        hsl: 'hsl(303, 17%, 25%)'
        pantone: 'PMS 518'
      - item:
        name: heading
        hex: '#4a3449'
        rvb: 'rgb(74, 52, 73)'
        hsl: 'hsl(303, 17%, 25%)'
        pantone: 'PMS 518'
      - item:
        name: heading-alt
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'
      - item: 
        name: link
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'
      - item:
        name: link-hover
        hex: '#255b51'
        rvb: 'rgb(37, 91, 81)'
        hsl: 'hsl(169, 42%, 25%)'
        pantone: 'PMS 3208'
      - item: 
        name: background-light
        hex: '#f2f4eb'
        rvb: 'rgb(242, 244, 235)'
        hsl: 'hsl(73, 29%, 94%)'
        pantone: ''
      - item:
        name: gradient
        hex: '#2091b1, #b6d51a'
        rvb: ''
        hsl: ''
        pantone: ''
    brands:
      - item:
        name: brand-blue
        hex: '#2091b1'
        rvb: 'rgb(32, 145, 177)'
        hsl: 'hsl(193, 69%, 41%)'
        pantone: 'PMS 313' 
      - item: 
        name: brand-green
        hex: '#b6d51a'
        rvb: 'rgb(182, 213, 26)'
        hsl: 'hsl(70, 78%, 47%)'
        pantone: 'PMS 382'
      - item:
        name: brand-bluegreen
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'