Update colors table

docs/_data/variables.json

@@ -1,22 +1,161 @@
 {
+  "initial": {
     "colors": [
       {
-      "name": "primary"
+        "id":"black",
+        "name":"Black",
+        "value": "hsl(0, 0%, 4%)"
       },
       {
-      "name": "link"
+        "id":"black-bis",
+        "name":"Black bis",
+        "value": "hsl(0, 0%, 7%)"
       },
       {
-      "name": "info"
+        "id":"black-ter",
+        "name":"Black ter",
+        "value": "hsl(0, 0%, 14%)"
       },
       {
-      "name": "success"
+        "id":"grey-darker",
+        "name":"Grey darker",
+        "value": "hsl(0, 0%, 21%)"
       },
       {
-      "name": "warning"
+        "id":"grey-dark",
+        "name":"Grey dark",
+        "value": "hsl(0, 0%, 29%)"
       },
       {
-      "name": "danger"
+        "id":"grey",
+        "name":"Grey",
+        "value": "hsl(0, 0%, 48%)"
+      },
+      {
+        "id":"grey-light",
+        "name":"Grey light",
+        "value": "hsl(0, 0%, 71%)"
+      },
+      {
+        "id":"grey-lighter",
+        "name":"Grey lighter",
+        "value": "hsl(0, 0%, 86%)"
+      },
+      {
+        "id":"white-ter",
+        "name":"White ter",
+        "value": "hsl(0, 0%, 96%)"
+      },
+      {
+        "id":"white-bis",
+        "name":"White bis",
+        "value": "hsl(0, 0%, 98%)"
+      },
+      {
+        "id":"white",
+        "name":"White",
+        "value": "hsl(0, 0%, 100%)"
+      },
+      {
+        "id":"orange",
+        "name":"Orange",
+        "value": "hsl(14, 100%, 53%)"
+      },
+      {
+        "id":"yellow",
+        "name":"Yellow",
+        "value": "hsl(48, 100%, 67%)"
+      },
+      {
+        "id":"green",
+        "name":"Green",
+        "value": "hsl(141, 71%, 48%)"
+      },
+      {
+        "id":"turquoise",
+        "name":"Turquoise",
+        "value": "hsl(171, 100%, 41%)"
+      },
+      {
+        "id":"cyan",
+        "name":"Cyan",
+        "value": "hsl(204, 86%, 53%)"
+      },
+      {
+        "id":"blue",
+        "name":"Blue",
+        "value": "hsl(217, 71%, 53%)"
+      },
+      {
+        "id":"purple",
+        "name":"Purple",
+        "value": "hsl(271, 100%, 71%)"
+      },
+      {
+        "id":"red",
+        "name":"red",
+        "value": "hsl(348, 100%, 61%)"
+      }
+    ],
+  },
+  "derived": {
+    "colors": [
+      {
+        "id": "white",
+        "valueId": "white",
+        "invertId": "black"
+      },
+      {
+        "id": "black",
+        "valueId": "black",
+        "invertId": "white"
+      },
+      {
+        "id": "light",
+        "valueId": "white-ter",
+        "invertId": "grey-darker"
+      },
+      {
+        "id": "dark",
+        "valueId": "grey-darker",
+        "invertId": "white-ter"
+      },
+      {
+        "id": "primary",
+        "valueId": "turquoise",
+        "invertValue": "#fff"
+      },
+      {
+        "id": "primary",
+        "valueId": "turquoise",
+        "invertValue": "#fff"
+      },
+      {
+        "id": "link",
+        "valueId": "blue",
+        "invertValue": "#fff"
+      },
+      {
+        "id": "info",
+        "valueId": "cyan",
+        "invertValue": "#fff"
+      },
+      {
+        "id": "success",
+        "valueId": "green",
+        "invertValue": "#fff"
+      },
+      {
+        "id": "warning",
+        "valueId": "yellow",
+        "invertValue": "rgba(0, 0, 0, 0.7)"
+      },
+      {
+        "id": "danger",
+        "valueId": "red",
+        "invertValue": "#fff"
       }
     ]
+  },
+  "justColors": ["primary", "link", "info", "success", "warning", "danger"]
 }

docs/_includes/elements/color-square.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: {{ include.value }};"></span>
+<code>{{ include.value }}</code>

docs/documentation/components/message.html

@@ -51,59 +51,17 @@ variables:
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-<article class="message is-primary">
+{% for color in site.data.variables.justColors %}
+<article class="message is-{{ color }}">
   <div class="message-header">
-    <p>Primary</p>
+    <p>{{ color | capitalize }}</p>
-    <button class="delete" aria-label="delete"></button>
-  </div>
-  <div class="message-body"><span class="tag is-black">Black</span>
-<a class="tag is-dark">Dark</a>
-<a class="tag is-light">Light</a>
-<a class="tag is-white">White</a>
-<a class="tag is-primary">Primary</a>
-<a class="tag is-info">Info</a>
-<a class="tag is-success">Success</a>
-<a class="tag is-warning">Warning</a>
-<a class="tag is-danger">Danger</a>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-info">
-  <div class="message-header">
-    <p>Info</p>
-    <button class="delete" aria-label="delete"></button>
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-success">
-  <div class="message-header">
-    <p>Success</p>
-    <button class="delete" aria-label="delete"></button>
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-warning">
-  <div class="message-header">
-    <p>Warning</p>
-    <button class="delete" aria-label="delete"></button>
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-danger">
-  <div class="message-header">
-    <p><strong>Danger</strong>! <a>Learn more</a></p>
     <button class="delete" aria-label="delete"></button>
   </div>
   <div class="message-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
+{% endfor %}
 {% endcapture %}
 
 {% capture message_small %}
@@ -165,31 +123,13 @@ variables:
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-<article class="message is-primary">
+{% for color in site.data.variables.justColors %}
-  <div class="message-body">
+<article class="message is-{{ color }}">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-info">
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-success">
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-warning">
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-<article class="message is-danger">
   <div class="message-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
+{% endfor %}
 {% endcapture %}
 
 {% include subnav-components.html %}

docs/documentation/elements/notification.html

@@ -22,8 +22,8 @@ variables:
 {% endcapture %}
 
 {% capture notification_colors %}
-{% for color in site.data.variables.colors %}
+{% for color in site.data.variables.justColors %}
-<div class="notification is-{{ color.name }}">
+<div class="notification is-{{ color }}">
   <button class="delete"></button>
   Primar lorem ipsum dolor sit amet, consectetur
   adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,

docs/documentation/overview/colors.html

@@ -3,117 +3,16 @@ title: Colors
 layout: documentation
 doc-tab: overview
 doc-subtab: colors
-initial_colors:
-- name: "$black"
-  value: hsl(0, 0%, 4%)
-- name: "$black-bis"
-  value: hsl(0, 0%, 7%)
-- name: "$black-ter"
-  value: hsl(0, 0%, 14%)
-- name: "$grey-darker"
-  value: hsl(0, 0%, 21%)
-- name: "$grey-dark"
-  value: hsl(0, 0%, 29%)
-- name: "$grey"
-  value: hsl(0, 0%, 48%)
-- name: "$grey-light"
-  value: hsl(0, 0%, 71%)
-- name: "$grey-lighter"
-  value: hsl(0, 0%, 86%)
-- name: "$white-ter"
-  value: hsl(0, 0%, 96%)
-- name: "$white-bis"
-  value: hsl(0, 0%, 98%)
-- name: "$white"
-  value: hsl(0, 0%, 100%)
-- name: "$orange"
-  value: hsl(14, 100%, 53%)
-- name: "$yellow"
-  value: hsl(48, 100%, 67%)
-- name: "$green"
-  value: hsl(141, 71%, 48%)
-- name: "$turquoise"
-  value: hsl(171, 100%, 41%)
-- name: "$blue"
-  value: hsl(217, 71%, 53%)
-- name: "$purple"
-  value: hsl(271, 100%, 71%)
-- name: "$red"
-  value: hsl(348, 100%, 61%)
 colors:
 - id: "white"
-  variable: "$white"
-  value: "$white"
-  value_hex: white
-  invert: "$black"
-  invert_hex: black
 - id: "black"
-  variable: "$black"
-  value: "$black"
-  value_hex: black
-  invert: "$white"
-  invert_hex: white
 - id: "light"
-  variable: "$light"
-  value: "$white-ter"
-  value_hex: white-ter
-  invert: "$light-invert"
-  invert_hex: black
 - id: "dark"
-  variable: "$dark"
-  value: "$grey-darker"
-  value_hex: grey-darker
-  invert: "$dark-invert"
-  invert_hex: white
 - id: "primary"
-  variable: "$primary"
-  value: "$turquoise"
-  value_hex: turquoise
-  invert: "$primary-invert"
-  invert_hex: white
 - id: "info"
-  variable: "$info"
-  value: "$blue"
-  value_hex: blue
-  invert: "$info-invert"
-  invert_hex: white
 - id: "success"
-  variable: "$success"
-  value: "$green"
-  value_hex: green
-  invert: "$success-invert"
-  invert_hex: white
 - id: "warning"
-  variable: "$warning"
-  value: "$yellow"
-  value_hex: yellow
-  invert: "$warning-invert"
-  invert_hex: black
 - id: "danger"
-  variable: "$danger"
-  value: "$red"
-  value_hex: red
-  invert: "$danger-invert"
-  invert_hex: white
-shades:
-- id: "black-bis"
-  value: "$black-bis"
-- id: "black-ter"
-  value: "$black-ter"
-- id: "grey-darker"
-  value: "$grey-darker"
-- id: "grey-dark"
-  value: "$grey-dark"
-- id: "grey"
-  value: "$grey"
-- id: "grey-light"
-  value: "$grey-light"
-- id: "grey-lighter"
-  value: "$grey-lighter"
-- id: "white-ter"
-  value: "$white-ter"
-- id: "white-bis"
-  value: "$white-bis"
 ---
 
 {% include subnav-overview.html %}
@@ -140,39 +39,44 @@ shades:
           <th>Color</th>
           <th>Variable</th>
           <th>Value</th>
-          <th>Actual value</th>
+          <th>Computed value</th>
           <th>Invert variable</th>
-          <th>Actual invert value</th>
+          <th>Computed invert value</th>
         </tr>
       </thead>
       <tbody>
         {% for color in page.colors %}
-          {% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %}
+          {% assign derivedColor = site.data.variables.derived.colors | where: "id", color.id | first %}
+          {% assign initialColor = site.data.variables.initial.colors | where: "id", derivedColor.valueId | first %}
           <tr>
             <td>
-              <strong>{{ color.id | capitalize }}</strong>
+              <strong>{{ derivedColor.id | capitalize }}</strong>
             </td>
             <td>
-              <code>{{ color.variable }}</code>
+              <code>${{ derivedColor.id }}</code>
             </td>
             <td>
-              <code>{{ color.value }}</code>
+              <code>${{ initialColor.id }}</code>
             </td>
             <td>
-              {% include {{ includePath }} %}
+              {% include elements/color-square.html value=initialColor.value %}
+            </td>
+            {% if derivedColor.invertValue %}
+              <td>
+                <code>{{ derivedColor.invertValue }}</code>
               </td>
               <td>
-              <code>{{ color.invert }}</code>
+                {% include elements/color-square.html value=derivedColor.invertValue %}
+              </td>
+            {% elsif derivedColor.invertId %}
+              {% assign invertColor = site.data.variables.initial.colors | where: "id", derivedColor.invertId | first %}
+              <td>
+                <code>${{ derivedColor.invertId }}</code>
               </td>
               <td>
-              {% if color.invert_hex == "black" %}
+                {% include elements/color-square.html value=invertColor.value %}
-                <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
+              </td>
-                <code>rgba(0, 0, 0, 0.7)</code>
-              {% else %}
-                <span class="bd-color" style="background: #fff;"></span>
-                <code>#fff</code>
             {% endif %}
-            </td>
           </tr>
         {% endfor %}
       </tbody>

docs/documentation/overview/variables.html

@@ -34,6 +34,8 @@ initial_colors:
   value: hsl(141, 71%, 48%)
 - name: $turquoise
   value: hsl(171, 100%, 41%)
+- name: $cyan
+  value: hsl(204, 86%,  53%)
 - name: $blue
   value: hsl(217, 71%, 53%)
 - name: $purple
@@ -95,7 +97,7 @@ derived_variables:
 - name: $primary
   value: $turquoise
 - name: $info
-  value: $blue
+  value: $cyan
 - name: $success
   value: $green
 - name: $warning
@@ -157,9 +159,9 @@ derived_variables:
 - name: $pre-background
   value: $background
 - name: $link
-  value: $primary
+  value: $blue
 - name: $link-invert
-  value: $primary-invert
+  value: $blue-invert
 - name: $link-visited
   value: $purple
 - name: $link-hover
@@ -169,7 +171,7 @@ derived_variables:
 - name: $link-focus
   value: $grey-darker
 - name: $link-focus-border
-  value: $primary
+  value: $blue
 - name: $link-active
   value: $grey-darker
 - name: $link-active-border
@@ -187,7 +189,7 @@ derived_variables:
 - name: $size-large
   value: $size-4
 - name: $colors
-  value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
+  value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
 - name: $shades
   value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
 - name: $sizes