Standardise colour conventions

jhancock532 · Aug 8, 2024 · 441a440 · 441a440
1 parent 3bf8de9
commit 441a440
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 156 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -3,6 +3,7 @@
   "rules": {
     "selector-max-id": 0,
     "custom-property-pattern": null,
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "color-hex-length": "long"
   }
 }
diff --git a/src/components/AdHocCard/AdHocCard.module.scss b/src/components/AdHocCard/AdHocCard.module.scss
@@ -5,7 +5,7 @@
 
     padding: $grid;
     border-radius: $border-radius;
-    background-color: var(--color--bright-white);
+    background-color: var(--color--white);
     margin-bottom: auto;
     max-width: 600px;
     box-shadow: $box-shadow;

diff --git a/src/components/DiscordCard/DiscordCard.module.scss b/src/components/DiscordCard/DiscordCard.module.scss
@@ -5,7 +5,7 @@
 
     padding: $grid;
     border-radius: $border-radius;
-    background-color: var(--color--bright-white);
+    background-color: var(--color--white);
     margin-bottom: auto;
     max-width: 600px;
     box-shadow: $box-shadow;

diff --git a/src/components/EventCard/EventCard.module.scss b/src/components/EventCard/EventCard.module.scss
@@ -6,7 +6,7 @@
     flex-direction: column;
     gap: 15px;
     border-radius: $border-radius;
-    background-color: var(--color--bright-white);
+    background-color: var(--color--white);
     margin-bottom: auto;
     max-width: 600px;
     box-shadow: $box-shadow;

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -3,7 +3,7 @@
 
     padding-top: $grid * 2;
     padding-bottom: $grid * 2;
-    background-color: var(--color--midnight);
+    background-color: var(--color--grey-80);
 
     @include media-query(large) {
         padding-top: $grid * 4;
@@ -16,7 +16,7 @@
 
     font-weight: 400;
     margin-bottom: $grid / 2;
-    color: var(--color--white);
+    color: var(--color--green-05);
 }
 
 .link {
@@ -25,11 +25,11 @@
 
     font-weight: 400;
     margin-top: $grid;
-    color: var(--color--highlight-green);
+    color: var(--color--green-20);
 
     &:hover {
-        color: var(--color--midnight);
+        color: var(--color--grey-80);
         text-decoration: underline;
-        text-decoration-color: var(--color--highlight-green);
+        text-decoration-color: var(--color--green-20);
     }
 }
diff --git a/src/components/GroupListingMap/GroupListingMap.module.scss b/src/components/GroupListingMap/GroupListingMap.module.scss
@@ -17,20 +17,17 @@
     display: flex;
     justify-content: center;
     width: 100%;
-    border: 1px solid var(--color--disabled-green);
+    border: 0.5px solid var(--color--green-20);
     border-radius: $border-radius;
     background: url('/images/map-toggle-background.webp'),
         url('/images/map-toggle-background.png'),
-        linear-gradient(
-            var(--color--highlight-green),
-            var(--color--underline-green)
-        );
+        linear-gradient(var(--color--green-20), var(--color--green-30));
     cursor: pointer;
 
     &:hover {
         .mapToggleButtonText {
             color: var(--color--black);
-            background-color: var(--color--disabled-green);
+            background-color: var(--color--green-20);
         }
     }
 }
@@ -41,11 +38,11 @@
     justify-content: space-between;
     width: max-content;
     font-weight: 500;
-    color: var(--color--bright-white);
-    background-color: var(--color--dark-green);
+    color: var(--color--white);
+    background-color: var(--color--green-50);
     padding: $grid * 0.5 $grid * 0.5 $grid * 0.5 $grid;
     border-radius: $border-radius;
-    border: 1px solid var(--color--dark-gray);
+    border: 1px solid var(--color--grey-60);
     transition: background-color 0.3s ease;
 }
 
@@ -68,7 +65,7 @@
         outline: none;
 
         .buttonText {
-            outline: 3px solid var(--color--dark-green);
+            outline: 3px solid var(--color--green-50);
             outline-offset: 3px;
         }
     }

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -14,7 +14,7 @@
 
     font-weight: 400;
     margin-bottom: $grid / 2;
-    color: var(--color--white);
+    color: var(--color--green-05);
 }
 
 .link {
@@ -41,7 +41,7 @@
     left: 0;
     right: 0;
     z-index: 2000;
-    background-color: var(--color--bright-white);
+    background-color: var(--color--white);
     padding: $grid;
     box-shadow: $box-shadow;
     display: none;
@@ -82,7 +82,7 @@
 .menuButton {
     @include font-size(m);
 
-    color: var(--color--white);
+    color: var(--color--green-05);
     background-color: var(--color--primary);
     padding: $grid / 2;
     border-radius: $border-radius;
@@ -95,11 +95,11 @@
     margin-right: auto;
 
     svg {
-        color: var(--color--white);
+        color: var(--color--green-05);
     }
 
     &:hover {
-        background-color: var(--color--highlight-green);
+        background-color: var(--color--green-20);
         color: var(--color--text);
 
         & svg {

diff --git a/src/components/Link/Link.module.scss b/src/components/Link/Link.module.scss
@@ -10,7 +10,7 @@
 .link {
     @include highlight-link;
 
-    color: var(--color--midnight);
+    color: var(--color--grey-80);
 
     &:hover {
         color: var(--color--black);

diff --git a/src/components/Map/Map.module.scss b/src/components/Map/Map.module.scss
@@ -29,7 +29,7 @@
 
 .eventLink {
     :global(.leaflet-container) & {
-        color: var(--color--white);
+        color: var(--color--green-05);
     }
 
     @include external-button-link;

diff --git a/src/pages/Index.module.scss b/src/pages/Index.module.scss
@@ -88,8 +88,8 @@
     border: 0;
     border-radius: 3px;
     padding: 8px 12px;
-    background-color: var(--color--dark-gray);
-    color: var(--color--white);
+    background-color: var(--color--grey-60);
+    color: var(--color--green-05);
     font-weight: 450;
 
     @include media-query(medium) {
@@ -133,8 +133,8 @@
     align-items: center;
     justify-content: space-between;
     padding: $grid * 0.5;
-    background-color: var(--color--dark-green);
-    color: var(--color--white);
+    background-color: var(--color--green-50);
+    color: var(--color--green-05);
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -143,7 +143,7 @@
 
     &:hover {
         color: var(--color--black);
-        background-color: var(--color--disabled-green);
+        background-color: var(--color--green-20);
     }
 
     &:hover .filterIcon {

diff --git a/src/pages/events/EventPage.module.scss b/src/pages/events/EventPage.module.scss
@@ -78,19 +78,19 @@
         @include focus-outline;
 
         background-color: var(--color--primary);
-        color: var(--color--white);
+        color: var(--color--green-05);
         border: none;
         border-radius: $border-radius;
         width: max-content;
         padding: 10px 10px 8px 16px;
         cursor: pointer;
 
         & .toggleMapButton__icon path {
-            fill: var(--color--white);
+            fill: var(--color--green-05);
         }
 
         &:hover {
-            background-color: var(--color--highlight-green);
+            background-color: var(--color--green-20);
             color: var(--color--text);
 
             & .toggleMapButton__icon path {

diff --git a/src/stories/ColourPalette.tsx b/src/stories/ColourPalette.tsx
diff --git a/src/stories/Colours.mdx b/src/stories/Colours.mdx
@@ -1,8 +1,47 @@
-import { Meta } from '@storybook/blocks';
-import ColorDocumentation from './ColourPalette.tsx';
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
-<Meta title="Tokens/Colours" />
+<Meta title="Style Guide/Colours" />
 
-# Colour Palette
+# Colours
 
-<ColorDocumentation />
+## Primary Shades
+
+<ColorPalette>
+    <ColorItem
+        title="--color--green-50"
+        subtitle="The primary accent for buttons."
+        colors={['#1a6201']}
+    />
+    <ColorItem
+        title="--color--green-30"
+        subtitle="Used for link underlines."
+        colors={['#65c783']}
+    />
+    <ColorItem
+        title="--color--green-20"
+        subtitle="Used for text highlight & hover effects."
+        colors={['#8beba8']}
+    />
+    <ColorItem
+        title="--color--green-05"
+        subtitle="The main background colour."
+        colors={['#f7fff8']}
+    />
+</ColorPalette>
+
+## Grey Shades
+
+<ColorPalette>
+    <ColorItem
+        title="--color--white"
+        subtitle="Used for the inside of cards."
+        colors={['#fff']}
+    />
+    <ColorItem title="--color--grey-60" colors={['#363635']} />
+    <ColorItem
+        title="--color--grey-80"
+        subtitle="The colour of text."
+        colors={['#1c221d']}
+    />
+    <ColorItem title="--color--black" colors={['#121613']} />
+</ColorPalette>