feat(tokens): add color tokens

docs/.gitignore

@@ -1,3 +1,4 @@
 _site
+.jekyll-metadata
 .sass-cache
 assets/js

docs/_data/nav.yml

@@ -6,6 +6,7 @@
 - title: Content
   pages:
     - title: Typography
+    - title: Colors
 
 - title: Components
   pages:

docs/_data/tokens-colors.yml

@@ -0,0 +1 @@
+../../packages/tokens/src/colors.yml

docs/_sass/_toc.scss

@@ -31,6 +31,7 @@
 
       &:hover {
         color: $blue;
+        color: var(--primary);
         text-decoration: none;
       }
     }

docs/developer/content/colors.md

@@ -0,0 +1,73 @@
+---
+layout: docs
+title: Colors
+description: List of Design Beta Gouv main colors.
+group: content
+toc: true
+---
+
+## Bootstrap theme
+
+Colors used by the Bootstrap Design Beta Gouv theme.
+
+<ul class="list-unstyled row">
+  {% for color in site.data.tokens-colors.token-bootstrap-colors %}
+  <li class="col-12 col-sm-6 col-xl-4 media my-4">
+    <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Square color {{ color.hex }}"><title>Square color {{ color[0] }}</title><rect fill="{{ color[1] }}" width="100%" height="100%"></rect></svg>
+    <div class="media-body">
+      <h5 class="mt-0 mb-1">{{ color[0] | replace: "_", " " | capitalize }}</h5>
+      {{ color[1] }}<br/>
+      <code>${{ color[0] }}</code>
+    </div> 
+  </li>
+  {% endfor %}
+</ul>
+
+## Theme colors
+
+Generic color names.
+
+<ul class="list-unstyled row">
+  {% for color in site.data.tokens-colors.token-theme-colors %}
+  <li class="col-12 col-sm-6 col-xl-4 media my-4">
+    <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Square color {{ color.hex }}"><title>Square color {{ color[0] }}</title><rect fill="{{ color[1] }}" width="100%" height="100%"></rect></svg>
+    <div class="media-body">
+      <h5 class="mt-0 mb-1">{{ color[0] | replace: "_", " " | capitalize }}</h5>
+      {{ color[1] }}<br/>
+      <code>${{ color[0] }}</code>
+    </div> 
+  </li>
+  {% endfor %}
+</ul>
+
+## Raw colors
+
+Approximate color names generated by [Name that Color - Chirag Mehta : chir.ag](http://chir.ag/projects/name-that-color/).
+
+<ul class="list-unstyled row">
+  {% for color in site.data.tokens-colors.token-raw-colors %}
+  <li class="col-12 col-sm-6 col-xl-4 media my-4">
+    <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Square color {{ color.hex }}"><title>Square color {{ color[0] }}</title><rect fill="{{ color[1] }}" width="100%" height="100%"></rect></svg>
+    <div class="media-body">
+      <h5 class="mt-0 mb-1">{{ color[0] | replace: "_", " " | capitalize }}</h5>
+      {{ color[1] }}<br/>
+      <code>${{ color[0] }}</code>
+    </div> 
+  </li>
+  {% endfor %}
+</ul>
+
+## Gray scale
+
+<ul class="list-unstyled row">
+  {% for color in site.data.tokens-colors.token-gray-scale %}
+  <li class="col-12 col-sm-6 col-xl-4 media my-4">
+    <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Square color {{ color.hex }}"><title>Square color {{ color[0] }}</title><rect fill="{{ color[1] }}" width="100%" height="100%"></rect></svg>
+    <div class="media-body">
+      <h5 class="mt-0 mb-1">{{ color[0] | replace: "_", " " | capitalize }}</h5>
+      {{ color[1] }}<br/>
+      <code>${{ color[0] }}</code>
+    </div> 
+  </li>
+  {% endfor %}
+</ul>

packages/core/package-scripts.yml

@@ -25,4 +25,4 @@ scripts:
       --source-map-inline-sources
       --output dist/design-beta-gouv.min.css dist/design-beta-gouv.css
 
-  serve: chokidar src/**/* --initial -c "nps build"
+  serve: chokidar src/**/* ../tokens/src/**/* --initial -c "nps build"

packages/core/src/_colors.scss

@@ -0,0 +1,75 @@
+//
+
+@import '@design.beta.gouv/tokens/src/colors.yml';
+
+// Color system
+// Linked to https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_variables.scss#L6
+
+$white: map-get($token-gray-scale, white) !default;
+$gray-100: map-get($token-gray-scale, gray-100) !default;
+$gray-200: map-get($token-gray-scale, gray-200) !default;
+$gray-300: map-get($token-gray-scale, gray-300) !default;
+$gray-400: map-get($token-gray-scale, gray-400) !default;
+$gray-500: map-get($token-gray-scale, gray-500) !default;
+$gray-600: map-get($token-gray-scale, gray-600) !default;
+$gray-700: map-get($token-gray-scale, gray-700) !default;
+$gray-800: map-get($token-gray-scale, gray-800) !default;
+$gray-900: map-get($token-gray-scale, gray-900) !default;
+$black: map-get($token-gray-scale, black) !default;
+
+$blue: map-get($token-theme-colors, blue) !default;
+$indigo: map-get($token-theme-colors, indigo) !default;
+$purple: map-get($token-theme-colors, purple) !default;
+$pink: map-get($token-theme-colors, pink) !default;
+$red: map-get($token-theme-colors, red) !default;
+$orange: map-get($token-theme-colors, orange) !default;
+$yellow: map-get($token-theme-colors, yellow) !default;
+$green: map-get($token-theme-colors, green) !default;
+$teal: map-get($token-theme-colors, teal) !default;
+$cyan: map-get($token-theme-colors, cyan) !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue": $blue,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+    "white": $white,
+    "gray": $gray-600,
+    "gray-dark": $gray-800
+  ),
+  $colors
+);
+
+$primary: map-get($token-bootstrap-colors, primary) !default;
+$secondary: map-get($token-bootstrap-colors, secondary) !default;
+$success: map-get($token-bootstrap-colors, success) !default;
+$info: map-get($token-bootstrap-colors, info) !default;
+$warning: map-get($token-bootstrap-colors, warning) !default;
+$danger: map-get($token-bootstrap-colors, danger) !default;
+$light: map-get($token-bootstrap-colors, light) !default;
+$dark: map-get($token-bootstrap-colors, dark) !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark
+  ),
+  $theme-colors
+);

packages/core/src/_variables.scss

@@ -3,78 +3,6 @@
 // Fonts
 $dbg-font-path: "../fonts";
 
-// Color system
-// Linked to https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_variables.scss#L6
-
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$blue: #0053b3 !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #28a745 !default;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-
-$colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$colors: map-merge(
-  (
-    "blue": $blue,
-    "indigo": $indigo,
-    "purple": $purple,
-    "pink": $pink,
-    "red": $red,
-    "orange": $orange,
-    "yellow": $yellow,
-    "green": $green,
-    "teal": $teal,
-    "cyan": $cyan,
-    "white": $white,
-    "gray": $gray-600,
-    "gray-dark": $gray-800
-  ),
-  $colors
-);
-
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-800 !default;
-
-$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$theme-colors: map-merge(
-  (
-    "primary": $primary,
-    "secondary": $secondary,
-    "success": $success,
-    "info": $info,
-    "warning": $warning,
-    "danger": $danger,
-    "light": $light,
-    "dark": $dark
-  ),
-  $theme-colors
-);
-
 // Fonts
 // Linked to https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_variables.scss#L273
 // Font, line-height, and color for body text, headings, and more.

packages/core/src/design-beta-gouv.scss

@@ -2,6 +2,7 @@
 
 //
 @import "bootstrap/scss/functions";
+@import "colors";
 @import "variables";
 @import "bootstrap/scss/mixins";
 

packages/tokens/src/colors.yml

@@ -0,0 +1,48 @@
+#
+
+token-raw-colors:
+  amber: &amber "#ffc107"
+  cerise: &cerise "#e83e8c"
+  eastern_blue: &eastern_blue "#17a2b8"
+  electric_violet: &electric_violet "#6610f2"
+  endeavour: &endeavour "#0053b3"
+  fuchsia_blue: &fuchsia_blue "#6f42c1"
+  jade: &jade "#03bd5b"
+  mountain_meadow: &mountain_meadow "#20c997"
+  punch: &punch "#dc3545"
+  yellow_orange: &yellow_orange "#ff9947"
+
+token-gray-scale:
+  white: &white "#fff"
+  gray-100: &gray-100 "#f8f9fa"
+  gray-200: &gray-200 "#e9ecef"
+  gray-300: &gray-300 "#dee2e6"
+  gray-400: &gray-400 "#ced4da"
+  gray-500: &gray-500 "#adb5bd"
+  gray-600: &gray-600 "#6c757d"
+  gray-700: &gray-700 "#495057"
+  gray-800: &gray-800 "#343a40"
+  gray-900: &gray-900 "#212529"
+  black: &black "#000"
+
+token-theme-colors:
+  blue: *endeavour
+  cyan: *eastern_blue
+  green: *jade
+  indigo: *electric_violet
+  orange: *yellow_orange
+  pink: *cerise
+  purple: *fuchsia_blue
+  red: *punch
+  teal: *mountain_meadow
+  yellow: *amber
+
+token-bootstrap-colors:
+  primary: *endeavour
+  secondary: *gray-600
+  success: *jade
+  danger: *punch
+  warning: *amber
+  info: *eastern_blue
+  light: *gray-100
+  dark: *gray-800