From 441a440b4f7453755e08a8ea175909d0d04f6629 Mon Sep 17 00:00:00 2001 From: "james.hancock@torchbox.com" Date: Thu, 8 Aug 2024 15:17:14 +0100 Subject: [PATCH] Standardise colour conventions --- .stylelintrc.json | 3 +- .../AdHocCard/AdHocCard.module.scss | 2 +- .../DiscordCard/DiscordCard.module.scss | 2 +- .../EventCard/EventCard.module.scss | 2 +- src/components/Footer/Footer.module.scss | 10 +- .../GroupListingMap.module.scss | 17 ++-- src/components/Header/Header.module.scss | 10 +- src/components/Link/Link.module.scss | 2 +- src/components/Map/Map.module.scss | 2 +- src/pages/Index.module.scss | 10 +- src/pages/events/EventPage.module.scss | 6 +- src/stories/ColourPalette.tsx | 95 ------------------- src/stories/Colours.mdx | 49 +++++++++- src/styles/_mixins.scss | 10 +- src/styles/globals.scss | 30 +++--- 15 files changed, 94 insertions(+), 156 deletions(-) delete mode 100644 src/stories/ColourPalette.tsx diff --git a/.stylelintrc.json b/.stylelintrc.json index 588b436..20f131e 100644 --- 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 index 0f0e9f3..fc4c509 100644 --- 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 index be0ae3e..636b1d0 100644 --- 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 index 93e4952..53dead3 100644 --- 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 index f586036..6db547d 100644 --- 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 index fb07d9b..d32d782 100644 --- 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 index 5176798..dc02176 100644 --- 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 index e4968a6..0cd0289 100644 --- 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 index 015c832..3a3852d 100644 --- 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 index 1e0b1ad..d2217db 100644 --- 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 index b2069c3..53f5179 100644 --- a/src/pages/events/EventPage.module.scss +++ b/src/pages/events/EventPage.module.scss @@ -78,7 +78,7 @@ @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; @@ -86,11 +86,11 @@ 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 deleted file mode 100644 index 6766d92..0000000 --- a/src/stories/ColourPalette.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; - -const styles = { - heading: { - color: '#1c221d', - }, - colorGrid: { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', - gap: '20px', - marginTop: '20px', - }, - colorSwatch: { - padding: '20px', - color: '#fff', - fontWeight: 'bold', - borderRadius: '5px', - }, - colorInfo: { - fontSize: '14px', - }, - colorName: { - fontWeight: 'bold', - }, - colorValue: { - fontFamily: 'monospace', - }, -}; - -const ColorSwatch = ({ - name, - value, - isLight, -}: { - name: string; - value: string; - isLight?: boolean; -}) => ( -
-
- {name} -
- {value} -
-
-); - -const ColorDocumentation = () => { - const baseColors = [ - { name: 'Bright White', value: '#fff', isLight: true }, - { name: 'White', value: '#f7fff8', isLight: true }, - { name: 'Dark Green', value: '#1a6201' }, - { name: 'Underline Green', value: '#65c783' }, - { name: 'Highlight Green', value: '#8beba8', isLight: true }, - { name: 'Disabled Green', value: '#c4f0c4', isLight: true }, - { name: 'Dark Gray', value: '#363635' }, - { name: 'Green', value: '#558564' }, - { name: 'Midnight', value: '#1c221d' }, - { name: 'Black', value: '#121613' }, - ]; - - const themeColors = [ - { name: 'Primary', value: '#1a6201' }, - { name: 'Text', value: '#1c221d' }, - { name: 'Link', value: '#1a6201' }, - { name: 'Underline', value: '#65c783' }, - { name: 'Background', value: '#f7fff8', isLight: true }, - ]; - - return ( -
-

Base Colors

-
- {baseColors.map((color, index) => ( - - ))} -
- -

Theme Colors

-
- {themeColors.map((color, index) => ( - - ))} -
-
- ); -}; - -export default ColorDocumentation; diff --git a/src/stories/Colours.mdx b/src/stories/Colours.mdx index a03877b..d883047 100644 --- 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'; - + -# Colour Palette +# Colours - +## Primary Shades + + + + + + + + +## Grey Shades + + + + + + + diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 3eb3dc1..394d6a8 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -90,7 +90,7 @@ @mixin focus-outline-inverse() { &:focus-visible { border-radius: $border-radius; - outline: 3px solid var(--color--highlight-green); + outline: 3px solid var(--color--green-20); outline-offset: 3px; } } @@ -110,8 +110,8 @@ text-decoration-color: var(--color--underline); background-image: linear-gradient( 180deg, - var(--color--highlight-green) 0%, - var(--color--highlight-green) 50%, + var(--color--green-20) 0%, + var(--color--green-20) 50%, transparent 50%, transparent 100% ); @@ -163,7 +163,7 @@ @mixin external-button-link() { @include focus-outline; - color: var(--color--white); + color: var(--color--green-05); background-color: var(--color--primary); padding: 5px 10px; margin-top: $grid * 0.5; @@ -182,7 +182,7 @@ &:hover { color: var(--color--black); - background-color: var(--color--highlight-green); + background-color: var(--color--green-20); } } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 66fcd7c..eb60cb4 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -4,25 +4,21 @@ // Base colors // https://coolors.co/palette/fffae8-d04200-363635-465e4d-558564-1c221d // https://abc.useallfive.com/?colors[]=F7FFF8,1A6201,8BEBA8,65C783,1C221D,121613 - --color--bright-white: #fff; - --color--white: #f7fff8; // #edffef; - --color--dark-green: #1a6201; - --color--underline-green: #65c783; - --color--highlight-green: #8beba8; - --color--disabled-green: #c4f0c4; - --color--brown: #a33400; - --color--dark-gray: #363635; - --color--green: #558564; - --color--midnight: #1c221d; --color--black: #121613; + --color--grey-80: #080c09; + --color--grey-60: #363635; + --color--green-50: #1a6201; + --color--green-30: #65c783; + --color--green-20: #8beba8; + --color--green-05: #f7fff8; + --color--white: #ffffff; // Theme colors - --color--primary: var(--color--dark-green); - --color--text: var(--color--midnight); + --color--primary: var(--color--green-50); + --color--text: var(--color--grey-80); --color--link: var(--color--primary); - --color--underline: var(--color--underline-green); - --color--hover: var(--color--brown); - --color--background: var(--color--white); + --color--underline: var(--color--green-30); + --color--background: var(--color--green-05); accent-color: var(--color--primary); } @@ -50,7 +46,7 @@ body { @include font-size(s); overflow-x: hidden; - background-color: var(--color--white); + background-color: var(--color--green-05); font-variant-ligatures: none; &.no-scroll { @@ -83,7 +79,7 @@ a { transition: color $transition; &:hover { - color: var(--color--hover); + color: var(--color--black); cursor: pointer; } }