feat: adjust colours with updates from Figma (#9)

fix: reset default font fix: resolve component title issue
inclusive-design · Jul 18, 2023 · 6727f03 · 6727f03
1 parent 7a023bc
commit 6727f03
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 32 deletions.
diff --git a/src/_includes/components/color/color.config.js b/src/_includes/components/color/color.config.js
@@ -3,16 +3,21 @@ module.exports = {
     context: {
         colors: [
             "blue-100",
-            "blue-500",
+            "blue-600",
             "blue-700",
             "green-100",
-            "green-300",
+            "green-200",
             "green-500",
+            "green-600",
             "green-700",
             "red-100",
             "red-500",
+            "red-600",
             "orange-100",
-            "orange-500"
+            "orange-500",
+            "orange-600",
+            "white",
+            "black"
         ]
     }
 };
diff --git a/src/_includes/components/color/color.njk b/src/_includes/components/color/color.njk
@@ -7,7 +7,7 @@
     {% for color in params.colors %}
         {% if 'blue' in color %}
             <div class='flex-col gap-s'>
-                <div class='rounded-full width-3xl height-3xl background-{{ color }}'></div>
+                <div class='rounded-full width-3xl height-3xl bg-{{ color }}'></div>
                 <div class='mx-auto'>{{ color }}</div>
             </div>
         {% endif %}
@@ -19,7 +19,7 @@
     {% for color in params.colors %}
         {% if 'green' in color %}
             <div class='flex-col gap-s'>
-                <div class='rounded-full width-3xl height-3xl background-{{ color }}'></div>
+                <div class='rounded-full width-3xl height-3xl bg-{{ color }}'></div>
                 <div class='mx-auto'>{{ color }}</div>
             </div>
         {% endif %}
@@ -31,7 +31,7 @@
     {% for color in params.colors %}
         {% if 'red' in color %}
             <div class='flex-col gap-s'>
-                <div class='rounded-full width-3xl height-3xl background-{{ color }}'></div>
+                <div class='rounded-full width-3xl height-3xl bg-{{ color }}'></div>
                 <div class='mx-auto'>{{ color }}</div>
             </div>
         {% endif %}
@@ -43,7 +43,19 @@
     {% for color in params.colors %}
         {% if 'orange' in color %}
             <div class='flex-col gap-s'>
-                <div class='rounded-full width-3xl height-3xl background-{{ color }}'></div>
+                <div class='rounded-full width-3xl height-3xl bg-{{ color }}'></div>
+                <div class='mx-auto'>{{ color }}</div>
+            </div>
+        {% endif %}
+    {% endfor %}
+</div>
+
+<h2>Neutral</h2>
+<div class='flex-row gap-m'>
+    {% for color in params.colors %}
+        {% if 'black' in color or 'white' in color or 'gray' in color %}
+            <div class='flex-col gap-s'>
+                <div class='rounded-full width-3xl height-3xl bg-{{ color }}'></div>
                 <div class='mx-auto'>{{ color }}</div>
             </div>
         {% endif %}

diff --git a/src/components-full-pages.njk b/src/components-full-pages.njk
@@ -5,12 +5,12 @@ pagination:
     alias: component
 permalink: "components/full/{{ component.slug }}/"
 title: 'Components'
-renderData:
-  title: "{{ component.title }}"
 ---
 
 {% extends "layout.njk" %}
 
+{% set renderData = {title: component.title} %}
+
 {% block inner %}
   {% set comp %}
     {{ c(component.name, component.context) }}

diff --git a/src/components-pages.njk b/src/components-pages.njk
@@ -14,6 +14,8 @@ renderData:
 
 {% from "design-system/component.njk" import code, context %}
 
+{% set renderData = {title: component.title} %}
+
 {% block content %}
   <seven-minute-tabs class="ds-stretch">
     <ol role="tablist" class="ds-tabs" aria-label="What does this tab chooser do?">

diff --git a/src/static/css/color.css b/src/static/css/color.css
@@ -1,43 +1,63 @@
-.background-blue-100 {
+.bg-blue-100 {
     background-color: var(--color-blue-100);
 }
 
-.background-blue-500 {
-    background-color: var(--color-blue-500);
+.bg-blue-600 {
+    background-color: var(--color-blue-600);
 }
 
-.background-blue-700 {
+.bg-blue-700 {
     background-color: var(--color-blue-700);
 }
 
-.background-green-100 {
+.bg-green-100 {
     background-color: var(--color-green-100);
 }
 
-.background-green-300 {
-    background-color: var(--color-green-300);
+.bg-green-200 {
+    background-color: var(--color-green-200);
 }
 
-.background-green-500 {
+.bg-green-500 {
     background-color: var(--color-green-500);
 }
 
-.background-green-700 {
+.bg-green-600 {
+    background-color: var(--color-green-600);
+}
+
+.bg-green-700 {
     background-color: var(--color-green-700);
 }
 
-.background-red-100 {
+.bg-red-100 {
     background-color: var(--color-red-100);
 }
 
-.background-red-500 {
+.bg-red-500 {
     background-color: var(--color-red-500);
 }
 
-.background-orange-100 {
+.bg-red-600 {
+    background-color: var(--color-red-600);
+}
+
+.bg-orange-100 {
     background-color: var(--color-orange-100);
 }
 
-.background-orange-500 {
+.bg-orange-500 {
     background-color: var(--color-orange-500);
 }
+
+.bg-orange-600 {
+    background-color: var(--color-orange-600);
+}
+
+.bg-white {
+    background-color: var(--color-white);
+}
+
+.bg-black {
+    background-color: var(--color-black);
+}
diff --git a/src/static/css/reset.css b/src/static/css/reset.css
@@ -1,5 +1,6 @@
 /* Reset */
 body {
+    font-family: var(--font-system, sans-serif);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     margin: 0;

diff --git a/src/static/css/variables.css b/src/static/css/variables.css
@@ -2,28 +2,52 @@
     /* Colors */
     --color-blue-100-hsl: 234, 100%, 96%;
     --color-blue-100: hsl(var(--color-blue-100-hsl));
-    --color-blue-500-hsl: 234, 62%, 51%;
-    --color-blue-500: hsl(var(--color-blue-500-hsl));
-    --color-blue-700-hsl: 234, 61%, 33%;
+    --color-blue-600-hsl: 234, 62%, 51%;
+    --color-blue-600: hsl(var(--color-blue-600-hsl));
+    --color-blue-700-hsl: 234, 72%, 39%;
     --color-blue-700: hsl(var(--color-blue-700-hsl));
-    --color-green-100-hsl: 170, 37%, 97%;
+    --color-green-100-hsl: 170, 38%, 97%;
     --color-green-100: hsl(var(--color-green-100-hsl));
-    --color-green-300-hsl: 170, 54%, 89%;
-    --color-green-300: hsl(var(--color-green-300-hsl));
-    --color-green-500-hsl: 175, 71%, 69%;
+    --color-green-200-hsl: 170, 54%, 89%;
+    --color-green-200: hsl(var(--color-green-200-hsl));
+    --color-green-500-hsl: 163, 70%, 72%;
     --color-green-500: hsl(var(--color-green-500-hsl));
-    --color-green-700-hsl: 175, 80%, 16%;
+    --color-green-600-hsl: 175, 67%, 54%;
+    --color-green-600: hsl(var(--color-green-600-hsl));
+    --color-green-700-hsl: 175, 81%, 16%;
     --color-green-700: hsl(var(--color-green-700-hsl));
     --color-red-100-hsl: 0, 100%, 97%;
     --color-red-100: hsl(var(--color-red-100-hsl));
-    --color-red-500-hsl: 0, 89%, 69%;
+    --color-red-500-hsl: 0, 92%, 70%;
     --color-red-500: hsl(var(--color-red-500-hsl));
+    --color-red-600-hsl: 0, 83%, 58%;
+    --color-red-600: hsl(var(--color-red-600-hsl));
     --color-orange-100-hsl: 40, 100%, 97%;
     --color-orange-100: hsl(var(--color-orange-100-hsl));
-    --color-orange-500-hsl: 40, 100%, 49%;
+    --color-orange-500-hsl: 36, 94%, 74%;
     --color-orange-500: hsl(var(--color-orange-500-hsl));
+    --color-orange-600-hsl: 40, 100%, 49%;
+    --color-orange-600: hsl(var(--color-orange-600-hsl));
+    --color-white-hsl: 0, 0%, 100%;
+    --color-white: hsl(var(--color-white-hsl));
+    --color-black-hsl: 0, 0%, 0%;
+    --color-black: hsl(var(--color-black-hsl));
 
     /* Fonts */
+    --font-system:
+        -apple-system,
+        blinkmacsystemfont,
+        avenir next,
+        avenir,
+        segoe ui,
+        helvetica neue,
+        helvetica,
+        cantarell,
+        ubuntu,
+        roboto,
+        noto,
+        arial,
+        sans-serif;
     --font-sans:
         martel,
         -apple-system,