feat(colors): use Orange Base UI color names as design tokens

Orange-OpenSource · Aug 25, 2020 · 142c851 · 142c851
1 parent 323e1be
commit 142c851
Show file tree

Hide file tree

Showing 17 changed files with 121 additions and 235 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -270,7 +270,7 @@
         @include caret($accordion: true);
 
         &:not(.collapsed) {
-          color: $orange-2;
+          color: $brand-orange;
 
           &::after {
             transform: rotate(180deg);

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -105,14 +105,14 @@
 
     &:hover,
     &:focus {
-      color: $orange-2;
+      color: $accessible-orange;
       background: none;
       border-color: transparent;
       outline-color: currentColor;
     }
 
     &.active {
-      border-bottom-color: $orange-2;
+      border-bottom-color: $accessible-orange;
     }
   }
 }

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -216,7 +216,7 @@ ul {
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
 // stylelint-disable selector-max-type
 li::marker {
-  color: $orange-2;
+  color: $accessible-orange;
   vertical-align: middle;
 }
 
@@ -228,7 +228,7 @@ li li li::marker { color: $gray-500; }
 // @todo To remove when ::marker support is OK
 // See https://caniuse.com/#search=%3A%3Amarker
 li::before {
-  color: $orange-2;
+  color: $accessible-orange;
   vertical-align: text-top;
 }
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -385,7 +385,7 @@ $utilities: map-merge(
       property: color,
       class: text,
       values: (
-        "primary": $orange-2,
+        "primary": $accessible-orange,
         "light": $gray-500,
         "white": $white,
         "body": $body-color,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -29,28 +29,41 @@ $grays: (
   "800": $gray-800,
   "900": $gray-900
 ) !default;
+// fusv-enable
 
+// scss-docs-start brand-colors
 // Boosted mod
 //// Core colors
-$orange:   #ff7900 !default;
-$orange-2: #f16e00 !default;
+$accessible-orange: #f16e00 !default;
+$brand-orange:      #ff7900 !default;
 //// Functional colors
-$green:    #32c832 !default;
-$blue:     #527edb !default;
-$yellow:   #fc0 !default;
-$red:      #cd3c14 !default;
+$functional-green:  #32c832 !default;
+$functional-blue:   #527edb !default;
+$functional-yellow: #fc0 !default;
+$functional-red:    #cd3c14 !default;
 //// Supporting colors
-$blue-2:   #4bb4e6 !default;
-$yellow-2: #ffd200 !default;
-$green-2:  #50be87 !default;
-$purple:   #a885d8 !default;
-$pink:     #ffb4e6 !default;
-//// Aliasing Bootstrap variables, just in case
-$indigo:   $purple !default;
-$teal:     $green-2 !default;
-$cyan:     $blue-2 !default;
+$supporting-blue:   #4bb4e6 !default;
+$supporting-yellow: #ffd200 !default;
+$supporting-green:  #50be87 !default;
+$supporting-purple: #a885d8 !default;
+$supporting-pink:   #ffb4e6 !default;
+// scss-docs-end brand-colors
 // End mod
 
+
+// scss-docs-start bootstrap-colors
+$blue:    $functional-blue !default;
+$indigo:  $supporting-purple !default;
+$purple:  $supporting-purple !default;
+$pink:    $supporting-pink !default;
+$red:     $functional-red !default;
+$orange:  $brand-orange !default;
+$yellow:  $functional-yellow !default;
+$green:   $functional-green !default;
+$teal:    $supporting-green !default;
+$cyan:    $supporting-blue !default;
+// scss-docs-end bootstrap-colors
+
 // scss-docs-start colors-map
 $colors: (
   "blue":       $blue,
@@ -91,16 +104,17 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+// Boosted mod
 $background-colors: map-merge(
   $theme-colors,
   (
-    "success": $green-2,
-    "info": $blue-2,
-    "warning": $yellow-2,
+    "success": $supporting-green,
+    "info": $supporting-blue,
+    "warning": $supporting-yellow,
     "danger": $purple
   )
 ) !default;
-// fusv-enable
+// End mod
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
@@ -291,7 +305,7 @@ $body-text-align:           null !default;
 
 $link-color:                              $black !default;
 $link-decoration:                         underline !default;
-$link-hover-color:                        $orange-2 !default;
+$link-hover-color:                        $accessible-orange !default;
 $link-hover-decoration:                   null !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
@@ -945,8 +959,8 @@ $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://w
 $navbar-dark-toggler-border-color:  transparent !default;
 
 $navbar-light-color:                $black !default;
-$navbar-light-hover-color:          $orange-2 !default;
-$navbar-light-active-color:         $orange-2 !default;
+$navbar-light-hover-color:          $accessible-orange !default;
+$navbar-light-active-color:         $accessible-orange !default;
 $navbar-light-disabled-color:       $gray-500 !default;
 $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$black}' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-light-toggler-border-color: null !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -128,7 +128,7 @@
   &:required {
     ~ .form-check-label::after {
       margin-left: $form-label-margin-bottom;
-      color: $orange-2;
+      color: $accessible-orange;
       content: "*";
     }
   }
@@ -243,7 +243,7 @@
 
   &:hover + .btn,
   + .btn:hover {
-    color: $orange-2;
+    color: $accessible-orange;
     background-color: $white;
     border-color: $gray-500;
   }

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -17,7 +17,7 @@
 
 .is-required::after {
   margin-left: $form-label-margin-bottom;
-  color: $orange-2;
+  color: $accessible-orange;
   content: "*";
 }
 // End mod

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
@@ -1,4 +1,4 @@
-@each $color, $value in ("primary": $orange-2, "light": $light) { // Boosted mod: restrict to primary and light
+@each $color, $value in ("primary": $accessible-orange, "light": $light) { // Boosted mod: restrict to primary and light
   .link-#{$color} {
     color: $value;
     background-color: color-contrast($value); // Boosted mod: ensure contrast

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
@@ -45,7 +45,7 @@
           // Boosted mod: ensure contrasts in color utilities
           @if "background-color" == $property and "transparent" != inspect($value) and $primary != $value {
             color: color-contrast($value);
-          } @else if "color" == $property and "inherit" != inspect($value) and $orange-2 != $value {
+          } @else if "color" == $property and "inherit" != inspect($value) and $accessible-orange != $value {
             background-color: color-contrast($value);
           }
           // End mod

diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
@@ -156,8 +156,8 @@
 .bd-black { color: color-contrast($black); background-color: $black; }
 
 // Boosted mod
-.bd-orange-2 { color: color-contrast($orange-2); background-color: $orange-2; }
-.bd-yellow-2 { color: color-contrast($yellow-2); background-color: $yellow-2; }
+.bd-accessible-orange { color: color-contrast($accessible-orange); background-color: $accessible-orange; }
+.bd-supporting-yellow { color: color-contrast($supporting-yellow); background-color: $supporting-yellow; }
 
 @function wcag-level($contrast-ratio) {
   $level: "FAIL";
@@ -177,7 +177,7 @@
   @return $level;
 }
 
-@each $color, $value in map-merge($colors, map-merge($grays, ("yellow-2": $yellow-2, "orange-2": $orange-2, "black": $black))) {
+@each $color, $value in map-merge($colors, map-merge($grays, ("supporting-yellow": $supporting-yellow, "accessible-orange": $accessible-orange, "black": $black))) {
   .a11y-swatch-#{$color} {
     color: color-contrast($value);
     background-color: #{$value};

diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
@@ -41,7 +41,7 @@
       }
 
       &:not(.collapsed) {
-        color: $orange-2;
+        color: $accessible-orange;
 
         &:hover,
         &:focus {
@@ -61,7 +61,7 @@
   }
 
   .active {
-    color: $orange-2;
+    color: $accessible-orange;
   }
   // End mod
 }
diff --git a/site/content/docs/5.0/about/brand.md b/site/content/docs/5.0/about/brand.md
@@ -9,155 +9,12 @@ toc: true
 Have a need for Boosted's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were published by Orange SA on the [Orange Brand website](https://brand.orange.com/guidelines/).
 
 
-## Orange logo
+Please refer to our **Design guidelines** to learn about:
+- [Orange Master logo]({{< docsref "/guidelines/logos" >}})
+- [Orange color palette]({{< docsref "/guidelines/colors" >}})
+- [Orange typography]({{< docsref "/guidelines/typography" >}})
+- etc.
 
-The Orange logo is the strongest association people have with the brand, so we have to use it correctly.
-
-Our logo is made up of the orange block, the logotype and the TM sign. When using the Orange logo never try to recreate it. Instead, download our original logo artwork and make sure you follow our top rules:
-
-* The Master logo is a bespoke design — always use original artwork.
-* The Master logo sits on the grid and (in most cases) is positioned in one of the corners.
-* The Small logo is used for minimum size work and has animated behaviours.
-
-To find out how you can use our mark to make yours, read the [core guideline](https://brand.orange.com/guidelines/logo/).
-
-### Master artwork
-
-<div class="row mb-5">
-    <div class="col-lg-2 d-flex align-items-center justify-content-center">
-        <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="Master Orange logo" width="50" height="50" loading="lazy">
-    </div>
-    <div class="col-lg-10">
-        <p>The basic elements of the Master logo are <strong>the square and the word mark <mark>Orange™</mark></strong>.</p>
-        <p>Together they make up the Master logo, a trademark that is legally registered and protected.</p>
-        <p>These elements must never be altered in any way and the Master logo must always be applied using original artwork. The word mark never appears outside of the square. Always write our brand name with a leading cap (Orange) in all other cases. To protect its integrity, the Master logo may not be altered, distorted or animated in any way.</p>
-    </div>
-</div>
-
-### Clear space
-
-<div class="row mb-5">
-    <div class="col-lg-2 d-flex align-items-center justify-content-center">
-        <img src="/docs/{{< param docs_version >}}/assets/brand/logo-rule-3a.png" alt="Orange logo space" width="150" loading="lazy">
-    </div>
-    <div class="col-lg-10">
-        <p>The Master logo should always have <strong>clear space around</strong> it to protect it from other graphic elements and help it stand out.</p>
-        <p>Always aim to set the clear space to <code>0.5×</code>. Where the space is limited (e.g. web) or when you need maximum visibility (e.g. perimeter boards), set your clear space to <code>0.25×</code> instead.</p>
-        <p>To maintain clarity and legibility, we have set <strong>minimum sizes</strong> for the Master logo.</p>
-    </div>
-</div>
-
-
-#### Minimum sizes
-
-<table class="table mb-5">
-  <col>
-  <col>
-  <colgroup span="2">
-  <thead>
-    <tr>
-      <td colspan="2" class="border-0"></td>
-      <th scope="colgroup" colspan="2" id="digital">Digital</th>
-    </tr>
-    <tr>
-      <th scope="row">Media</th>
-      <th scope="col" id="print">Print</th>
-      <th scope="col" id="mobile">Mobile</th>
-      <th scope="col" id="desktop">Tablet & desktop</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row" id="size">
-        Size
-        <small class="text-muted">(×)</small>
-      </th>
-      <td>10mm</td>
-      <td>30px</td>
-      <td>50px</td>
-    </tr>
-    <tr>
-      <th scope="row" id="clear">
-        Preferred clear space
-        <small class="text-muted">(0.5×)</small>
-      </th>
-      <td>5mm</td>
-      <td>15px</td>
-      <td>25px</td>
-    </tr>
-    <tr>
-      <th scope="row" id="small">
-        Small clear space
-        <small class="text-muted">(0.25×)</small>
-      </th>
-      <td>2.5mm</td>
-      <td>7.5px</td>
-      <td>12.5px</td>
-    </tr>
-  </tbody>
-</table>
-
-
-### Small logo
-
-<div class="row">
-    <div class="col-lg-2 d-flex align-items-center justify-content-center">
-        <img src="/docs/{{< param docs_version >}}/assets/brand/logo-rule-4b.png" alt="Small Orange logo" width="100" loading="lazy">
-    </div>
-    <div class="col-lg-10">
-        <p>The Small logo is used for minimum size work <strong>when the Master logo is no longer clearly visible</strong>.</p>
-        <ul>
-            <li>The Small logo is used when the size of the Master logo appears less than <code>50px</code> on desktops or tablet screens, <code>30px</code> on mobile screens and <code>10mm</code> in printed media or product branding.</li>
-            <li>The clear space area around the Small logo is equal to <code>0.25×</code>.</li>
-            <li>The basic elements of the Small logo are the square and a line with solid white fill. Together they make up the Small logo.</li>
-            <li>The Small logo follows the same colourways as the Master logo.</li>
-        </ul>
-    </div>
-</div>
-
-These elements must never be altered in any way and must always be applied using original artwork.
-It’s possible to animate the Small logo; however this process is strictly managed by the Global brand team.
-Apply the Small logo correctly by avoiding the following:
-
-
-1. Never change the color of the line, even in animation.
-2. The line always has a solid, white fill. It is never transparent.
-3. Never use the trademark symbol.
-4. Never change the size of the line —&nbsp;it allows optimal readability in small sizes and represents the name “Orange” from the Master logo.
-5. Never change the colourways of the Small logo.
-
-
-
-## Color palette
-
-This is Orange Web UI color palette, as specified in Orange Web UI Kits.
-Please refer to the [accessibility's color contrast section]({{< docsref "/getting-started/accessibility" >}}/#color-contrast) before trying using this, in order to ensure sufficient contrasts,
-and prefer using [`.text-*` and `.bg-*` utilities]({{< docsref "/utilities/colors" >}}) to set colors, since they lock `color` and `background-color` altogether to ensure sufficient contrasts.
-
-{{< palette.inline >}}
-<div class="my-5">
-  {{- range $category := $.Site.Data.palette }}
-    <div class="row my-3">
-      <h3 class="h4 col col-md-4 col-lg-2 mb-0">{{ $category.name }}</h3>
-      <div class="col col-md-8 col-lg-10 row row-cols-2 row-cols-md-3 row-cols-lg-4">
-        {{- range $color := $category.colors }}
-          <figure class="col" aria-label="{{ $color.name }}">
-            <svg width="100%" height="6rem" role="img" aria-label="{{ $color.name }}">
-              <rect fill="{{ $color.hex }}" width="100%" height="100%"/>
-            </svg>
-            <figcaption class="py-1">
-              <strong>{{ $color.name }}</strong>
-              <br/>
-              <code>{{ $color.hex }}</code>
-            </figcaption>
-          </figure>
-        {{ end -}}
-      </div>
-    </div>
-    <hr/>
-  {{ end -}}
-</div>
-{{< /palette.inline >}}
 
 {{< callout info >}}
 ## Bootstrap brand guidelines