From 0347da343a8b307bbb53375db76f841c4938af9b Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Thu, 2 Jan 2025 13:48:44 +0100 Subject: [PATCH 01/16] Update main heading styles --- .../patterns/molecules/title-filters/title-filters--event.html | 2 +- .../patterns/molecules/title-filters/title-filters--team.html | 3 +-- .../patterns/molecules/title-filters/title-filters.html | 2 +- .../templates/patterns/pages/blog/blog_detail.html | 2 +- .../patterns/pages/impact_reports/impact_report_page.html | 2 +- .../templates/patterns/pages/service/service_page.html | 2 +- .../templates/patterns/pages/standard/standard_page.html | 2 +- .../templates/patterns/pages/team/team_detail.html | 2 +- .../templates/patterns/pages/wagtail/password_required.html | 2 +- .../templates/patterns/pages/work/work_page_base.html | 3 +-- tbx/static_src/sass/components/_title-filters.scss | 2 +- 11 files changed, 11 insertions(+), 13 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html index ffa373281..cb733bc5e 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html +++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--event.html @@ -2,7 +2,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %} +

{{ item.title }}

{% if tags %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html index 9e8b931cd..c728fc83d 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html +++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters--team.html @@ -2,8 +2,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %} - +

{{ item.title }}

{{ strapline }}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html index e2c91ba4f..38ac6e3a1 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html +++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html @@ -2,7 +2,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=item.title classes="motif-heading--one" %} +

{{ item.title }}

{% if tags %} diff --git a/tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html b/tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html index 77a237dc3..952ba7128 100644 --- a/tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html +++ b/tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html @@ -31,7 +31,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b" %} +

{{ page.title }}

{% pageurl page.blog_index as blog_index_url %} diff --git a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html index c7b0e1234..8deb6139e 100644 --- a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html @@ -4,7 +4,7 @@ {% block content %}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +

{{ page.title }}

diff --git a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html index a2933e922..462c2c1dc 100644 --- a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html @@ -4,7 +4,7 @@ {% block content %}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +

{{ page.title }}

{% if page.intro %} diff --git a/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html b/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html index 8368c871a..3853e0d3b 100644 --- a/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.html @@ -4,7 +4,7 @@ {% block content %}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +

{{ page.title }}

{% include_block page.body %} diff --git a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html index f5eedae10..ce291d952 100644 --- a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html +++ b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html @@ -4,7 +4,7 @@ {% block content %}
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one" %} +

{{ page.title }}

diff --git a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html index e008588c2..6503a2323 100644 --- a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html +++ b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html @@ -11,7 +11,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading="Password required" classes="motif-heading--one" %} +

Password required

diff --git a/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html b/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html index 44c9e53aa..88a4c98bf 100644 --- a/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html +++ b/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html @@ -27,8 +27,7 @@
- {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b mb-spacerMini md:mb-spacerSmall" %} - +

{{ page.title }}

{% block intro %} {# intro content goes here - different for work page and historical work page #} {% endblock %} diff --git a/tbx/static_src/sass/components/_title-filters.scss b/tbx/static_src/sass/components/_title-filters.scss index 4b15468cf..eb89965fe 100644 --- a/tbx/static_src/sass/components/_title-filters.scss +++ b/tbx/static_src/sass/components/_title-filters.scss @@ -23,7 +23,7 @@ background-color: var(--color--decoration); margin-right: 30px; position: relative; - top: 28px; + top: 17px; } } From 8080cbbd85eb6b10a96077587ad26d28eed3e724 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Thu, 2 Jan 2025 13:58:13 +0100 Subject: [PATCH 02/16] Update fonts docs --- docs/front-end/fonts.md | 4 ++-- docs/infrastructure.md | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/front-end/fonts.md b/docs/front-end/fonts.md index fe69b6c5d..ff9548655 100644 --- a/docs/front-end/fonts.md +++ b/docs/front-end/fonts.md @@ -2,7 +2,7 @@ The site uses 'Outfit' as the main font and 'sans-serif' as the fallback font. -Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 300 and 600 can be used. +Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 200 and 600 can be used. We originally limited the number of font variants for reasons of sustainability, although the fact that this is a variable font means that extra weights could be added if required without impacting carbon emissions. @@ -12,7 +12,7 @@ The font is loaded using the following CSS in `sass/base/_fonts.scss`: @font-face { font-family: 'Outfit'; font-style: normal; - font-weight: 300 600; + font-weight: 200 600; font-display: swap; src: url(../fonts/outfit-variable-font.woff2) format('woff2-variations'); } diff --git a/docs/infrastructure.md b/docs/infrastructure.md index 8b25cb005..c115f5827 100644 --- a/docs/infrastructure.md +++ b/docs/infrastructure.md @@ -123,4 +123,5 @@ This will be copied by flightpath. [^1]: The client in this case is Torchbox! + [^2]: See [`tbx/core/utils/scripts/run_flightpath.py`](https://github.com/torchbox/torchbox.com/blob/bfccccca76c389a2f539419e745e7ac5f191ce4c/tbx/core/utils/scripts/run_flightpath.py) From 23bbf3bcfdcd3094b39407e6ad0b5fba9929196c Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 6 Jan 2025 18:11:49 +0100 Subject: [PATCH 03/16] Update color themes dark mode --- .../patterns/atoms/icons/quote-icon.html | 4 +- .../patterns/atoms/icons/results-ring.html | 2 +- .../patterns/atoms/sprites/sprites.html | 36 +-- .../blocks/mailchimp_form_block.yaml | 2 +- .../styleguide/typography/typography.html | 2 +- .../templates/patterns/styleguide_base.html | 4 +- tbx/static_src/sass/base/_base.scss | 2 +- tbx/static_src/sass/components/_avatar.scss | 16 +- .../sass/components/_button-link.scss | 8 +- .../sass/components/_division-signpost.scss | 12 +- .../sass/components/_employee-owned-icon.scss | 2 +- tbx/static_src/sass/components/_form.scss | 2 +- .../sass/components/_home-page-intro.scss | 16 +- .../sass/components/_instagram-gallery.scss | 4 +- .../sass/components/_mailchimp.scss | 6 +- .../sass/components/_mode-switcher.scss | 18 +- tbx/static_src/sass/components/_promo.scss | 2 +- .../sass/components/_report-in-page-nav.scss | 2 +- .../sass/components/_report-section.scss | 4 +- .../sass/components/_skip-link.scss | 2 +- tbx/static_src/sass/components/_table.scss | 4 +- .../sass/components/_tabs-mobile.scss | 4 +- tbx/static_src/sass/components/_tabs.scss | 2 +- tbx/static_src/sass/components/_values.scss | 2 +- .../sass/components/_work-sections.scss | 4 +- .../navigation/_primary-nav-mobile.scss | 4 +- .../navigation/_sub-nav-desktop-mini.scss | 4 +- .../navigation/_sub-nav-desktop.scss | 4 +- .../navigation/_sub-nav-mobile.scss | 4 +- tbx/static_src/sass/config/_mixins.scss | 10 +- tbx/static_src/sass/config/_variables.scss | 302 +++++------------- 31 files changed, 172 insertions(+), 318 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/atoms/icons/quote-icon.html b/tbx/project_styleguide/templates/patterns/atoms/icons/quote-icon.html index 023d9b847..1fa45b6de 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/icons/quote-icon.html +++ b/tbx/project_styleguide/templates/patterns/atoms/icons/quote-icon.html @@ -5,8 +5,8 @@ - - + + {% endwith %} diff --git a/tbx/project_styleguide/templates/patterns/atoms/icons/results-ring.html b/tbx/project_styleguide/templates/patterns/atoms/icons/results-ring.html index edecef0d0..0c6f9d263 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/icons/results-ring.html +++ b/tbx/project_styleguide/templates/patterns/atoms/icons/results-ring.html @@ -1,3 +1,3 @@ diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html index bd0f0620a..25fbb2d1d 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html +++ b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html @@ -48,9 +48,9 @@ - + - + @@ -83,80 +83,80 @@ {# id matches showcase homepage block icon value #} - + {# id matches showcase homepage block icon value #} - + {# id matches showcase homepage block icon value #} - + {# id matches showcase homepage block icon value #} - + {# for animated megaphone icon - megaphone #} - + {# for animated megaphone icon - noise icons #} - + {# for animated wagtail icon - head outline #} - + {# for animated wagtail icon - coloured circle #} - + {# for animated wagtail icon - top beak #} - + {# for animated wagtail icon - bottom beak #} - + {# for animated target icon - target center #} - + {# for animated target icon - target inner #} - + {# for animated target icon - target outer #} - + {# for animated lightbulb icon - lightbulb inner #} - - + + {# for animated lightbulb icon - lightbulb inner #} - + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml index 78036d967..774e33296 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml @@ -1,2 +1,2 @@ context: - value: '
' + value: '
This is an error
' diff --git a/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html b/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html index c01351748..abcc9167e 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html @@ -90,7 +90,7 @@

Heading 4

Links styled as buttons

-

+

Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} Digital products {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide_base.html b/tbx/project_styleguide/templates/patterns/styleguide_base.html index 680588c80..63508a32a 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide_base.html +++ b/tbx/project_styleguide/templates/patterns/styleguide_base.html @@ -12,9 +12,9 @@

diff --git a/tbx/static_src/sass/base/_base.scss b/tbx/static_src/sass/base/_base.scss index 523dc0dc7..c249206ae 100755 --- a/tbx/static_src/sass/base/_base.scss +++ b/tbx/static_src/sass/base/_base.scss @@ -41,7 +41,7 @@ form { input:focus, select:focus, textarea:focus { - outline: $focus-width solid var(--color--focus-ring); + outline: $focus-width solid var(--color--theme-primary); outline-offset: 0; } } diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss index 53ee35740..66627c33e 100644 --- a/tbx/static_src/sass/components/_avatar.scss +++ b/tbx/static_src/sass/components/_avatar.scss @@ -1,6 +1,14 @@ @use 'config' as *; .avatar { + // Component-specific heme-less accent colors + --avatar-accent-one: #{$color--white}; + --avatar-accent-two: #{$color--white}; + // Themed accent colors + [class*='theme-'] & { + --avatar-accent-one: var(--color--theme-primary); + --avatar-accent-two: var(--color--theme-secondary); + } position: relative; width: $avatar-size-72; height: $avatar-size-72; @@ -43,11 +51,10 @@ display: block; border-radius: 50%; position: absolute; - opacity: 0.8; } &::before { - border: 1px solid var(--color--accent-two); + border: 1px solid var(--avatar-accent-two); width: 102%; height: 103%; inset: -3px 2px; @@ -55,13 +62,13 @@ @include media-query(medium) { width: 95%; height: 95%; - border-width: 3px; + border-width: 2px; inset: 2px -3px; } } &::after { - border: 2px solid var(--color--accent-three); + border: 2px solid var(--avatar-accent-one); height: 95%; width: 95%; inset: 2px 3px; @@ -69,6 +76,7 @@ @include media-query(medium) { width: 102%; height: 103%; + border-width: 3px; inset: -5px -4px; } } diff --git a/tbx/static_src/sass/components/_button-link.scss b/tbx/static_src/sass/components/_button-link.scss index 78c1ce416..e9e785061 100644 --- a/tbx/static_src/sass/components/_button-link.scss +++ b/tbx/static_src/sass/components/_button-link.scss @@ -10,7 +10,7 @@ width: 100%; color: var(--color--white); transition: background-color $transition-quick; - // TODO: add default bg color for themed pages var(--color--accent) once color themes BE is ready + background-color: var(--color--theme-primary); @include reduced-motion() { transition: none; @@ -26,15 +26,15 @@ } &--theme-coral { - background-color: $color--coral-charity; + background-color: $color--coral; } &--theme-nebuline { - background-color: $color--nebuline-public; + background-color: $color--nebuline; } &--theme-lagoon { - background-color: $color--lagoon-wagtail; + background-color: $color--lagoon; } &__arrow { diff --git a/tbx/static_src/sass/components/_division-signpost.scss b/tbx/static_src/sass/components/_division-signpost.scss index dd41d1e57..e3553ebba 100644 --- a/tbx/static_src/sass/components/_division-signpost.scss +++ b/tbx/static_src/sass/components/_division-signpost.scss @@ -35,26 +35,26 @@ } &--theme-coral { - background-color: var(--color--coral-charity); + background-color: var(--color--coral); &:has(.button-link:hover) { - background-color: var(--color--coral-30); + background-color: var(--color--coral-dark); } } &--theme-nebuline { - background-color: var(--color--nebuline-public); + background-color: var(--color--nebuline); &:has(.button-link:hover) { - background-color: var(--color--nebuline-30); + background-color: var(--color--nebuline-dark); } } &--theme-lagoon { - background-color: var(--color--lagoon-wagtail); + background-color: var(--color--lagoon); &:has(.button-link:hover) { - background-color: var(--color--lagoon-30); + background-color: var(--color--lagoon-dark); } } } diff --git a/tbx/static_src/sass/components/_employee-owned-icon.scss b/tbx/static_src/sass/components/_employee-owned-icon.scss index c6a86c7a1..cf406fc52 100644 --- a/tbx/static_src/sass/components/_employee-owned-icon.scss +++ b/tbx/static_src/sass/components/_employee-owned-icon.scss @@ -43,7 +43,7 @@ position: absolute; top: calc(50% - 15px); left: calc(50% - 19px); - color: var(--color--coral-charity); + color: var(--color--coral); opacity: 0.5; mix-blend-mode: screen; diff --git a/tbx/static_src/sass/components/_form.scss b/tbx/static_src/sass/components/_form.scss index 8655d1519..1c0697f39 100644 --- a/tbx/static_src/sass/components/_form.scss +++ b/tbx/static_src/sass/components/_form.scss @@ -33,6 +33,6 @@ } .errorlist { - color: var(--color--light-background); + color: var(--color--theme-primary-light); font-weight: $weight--semibold; } diff --git a/tbx/static_src/sass/components/_home-page-intro.scss b/tbx/static_src/sass/components/_home-page-intro.scss index c9a99a5be..1ad264a53 100644 --- a/tbx/static_src/sass/components/_home-page-intro.scss +++ b/tbx/static_src/sass/components/_home-page-intro.scss @@ -17,10 +17,10 @@ .text-coral { @include media-query(large) { @include link-styles( - $color: var(--color--coral-charity), - $interaction-color: var(--color--coral-charity), - $underline-color: var(--color--coral-charity), - $underline-hover-color: var(--color--coral-charity) + $color: var(--color--coral), + $interaction-color: var(--color--coral), + $underline-color: var(--color--coral), + $underline-hover-color: var(--color--coral) ); } } @@ -28,10 +28,10 @@ .text-nebuline { @include media-query(large) { @include link-styles( - $color: var(--color--nebuline-public), - $interaction-color: var(--color--nebuline-public), - $underline-color: var(--color--nebuline-public), - $underline-hover-color: var(--color--nebuline-public) + $color: var(--color--nebuline), + $interaction-color: var(--color--nebuline), + $underline-color: var(--color--nebuline), + $underline-hover-color: var(--color--nebuline) ); } } diff --git a/tbx/static_src/sass/components/_instagram-gallery.scss b/tbx/static_src/sass/components/_instagram-gallery.scss index 9c6a87283..1ce06ac50 100644 --- a/tbx/static_src/sass/components/_instagram-gallery.scss +++ b/tbx/static_src/sass/components/_instagram-gallery.scss @@ -17,11 +17,11 @@ width: 100%; aspect-ratio: 1 / 1; overflow: hidden; - border: 1px solid var(--color--accent-three); + border: 1px solid var(--color--theme-primary); transition: border $transition-quick; &:hover { - border: 3px solid var(--color--accent-three); + border: 3px solid var(--color--theme-primary); } &:focus { diff --git a/tbx/static_src/sass/components/_mailchimp.scss b/tbx/static_src/sass/components/_mailchimp.scss index 77650af8f..f0f4bd0a5 100644 --- a/tbx/static_src/sass/components/_mailchimp.scss +++ b/tbx/static_src/sass/components/_mailchimp.scss @@ -94,8 +94,8 @@ div.mce_inline_error { @include font-size('size-seven'); font-weight: $weight--semibold; - color: var(--color--accent-two-inverse); - background-color: var(--color--light-grey-background); + color: var(--color--theme-primary-dark); + background-color: var(--color--theme-primary-light); margin-top: 10px; padding: 5px 10px; } @@ -109,7 +109,7 @@ } #mce-error-response { - color: var(--color--accent-two); + color: var(--color--theme-secondary); font-weight: $weight--semibold; padding: 0; margin: $spacer-mini 0 $spacer-medium; diff --git a/tbx/static_src/sass/components/_mode-switcher.scss b/tbx/static_src/sass/components/_mode-switcher.scss index c7979371c..b2ef0f4f0 100644 --- a/tbx/static_src/sass/components/_mode-switcher.scss +++ b/tbx/static_src/sass/components/_mode-switcher.scss @@ -3,12 +3,12 @@ .mode-switcher { $root: &; padding-top: 45px; - border-top: 1px solid var(--color--nav-border); - display: flex; + border-top: 1px solid var(--color--border); + display: none; // temporarily hidden until the light mode is updated justify-content: center; @include media-query(menu) { - display: inline-block; + display: none; // temporarily hidden until the light mode is updated padding-top: 0; padding-left: $spacer-small; margin-left: $spacer-small; @@ -52,7 +52,7 @@ .mode-light & { @include media-query(menu) { - color: var(--color--accent-three); + color: var(--color--theme-primary); } } } @@ -63,14 +63,14 @@ .mode-dark & { @include media-query(menu) { - color: var(--color--accent-three); + color: var(--color--theme-primary); } } } } &__button { - border: 1px solid var(--color--heading-50); + border: 1px solid var(--color--grey-70); border-radius: 21px; width: 49px; height: 26px; @@ -79,10 +79,6 @@ align-items: center; position: relative; - @include media-query(menu) { - border: 1px solid var(--color--text-50); - } - &::before { top: 3px; inset-inline-start: 26px; @@ -98,7 +94,7 @@ border: 1px solid transparent; @include media-query(menu) { - background-color: var(--color--accent-three); + background-color: var(--color--theme-primary); } @include reduced-motion() { diff --git a/tbx/static_src/sass/components/_promo.scss b/tbx/static_src/sass/components/_promo.scss index 8695e14db..7958eb99c 100644 --- a/tbx/static_src/sass/components/_promo.scss +++ b/tbx/static_src/sass/components/_promo.scss @@ -13,7 +13,7 @@ display: flex; flex-direction: column; justify-content: center; - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); color: var(--color--light-background-text); padding: $spacer-small; order: 2; diff --git a/tbx/static_src/sass/components/_report-in-page-nav.scss b/tbx/static_src/sass/components/_report-in-page-nav.scss index 55e96057e..0880f737c 100644 --- a/tbx/static_src/sass/components/_report-in-page-nav.scss +++ b/tbx/static_src/sass/components/_report-in-page-nav.scss @@ -69,7 +69,7 @@ width: 11px; height: 16px; display: inline-block; - color: var(--color--accent-three); + color: var(--color--theme-primary); transform: translateY(-2px); margin-left: 7px; transition: transform $transition-quick; diff --git a/tbx/static_src/sass/components/_report-section.scss b/tbx/static_src/sass/components/_report-section.scss index 3df42f97e..c8c2cd710 100644 --- a/tbx/static_src/sass/components/_report-section.scss +++ b/tbx/static_src/sass/components/_report-section.scss @@ -41,11 +41,11 @@ @include ring($diameter: 30px, $opacity: 0.75); &--one { - @include ring-one($top: 3px, $color: var(--color--accent-two)); + @include ring-one($top: 3px, $color: var(--color--theme-secondary)); } &--two { - @include ring-two($top: 3px, $color: var(--color--accent-three)); + @include ring-two($top: 3px, $color: var(--color--theme-primary)); } } diff --git a/tbx/static_src/sass/components/_skip-link.scss b/tbx/static_src/sass/components/_skip-link.scss index 5fcd9de49..f196cb0df 100644 --- a/tbx/static_src/sass/components/_skip-link.scss +++ b/tbx/static_src/sass/components/_skip-link.scss @@ -5,7 +5,7 @@ top: -200px; left: 0; color: var(--color--light-background-text); - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); padding: $spacer-mini; &:focus { diff --git a/tbx/static_src/sass/components/_table.scss b/tbx/static_src/sass/components/_table.scss index 1d845941d..0fd42819b 100644 --- a/tbx/static_src/sass/components/_table.scss +++ b/tbx/static_src/sass/components/_table.scss @@ -19,12 +19,12 @@ &__cell { padding: $spacer-mini-plus; - border: 1px solid var(--color--light-background); + border: 1px solid var(--color--theme-primary-light); text-align: left; &--heading { @include font-size(size-five); - background-color: var(--color--light-background); + background-color: var(--color--theme-primary-light); color: var(--color--light-background-text); } diff --git a/tbx/static_src/sass/components/_tabs-mobile.scss b/tbx/static_src/sass/components/_tabs-mobile.scss index 7f20af471..5574e956e 100644 --- a/tbx/static_src/sass/components/_tabs-mobile.scss +++ b/tbx/static_src/sass/components/_tabs-mobile.scss @@ -66,11 +66,11 @@ @include ring($opacity: 1); &--one { - @include ring-one($color: var(--color--accent-two)); + @include ring-one($color: var(--color--theme-secondary)); } &--two { - @include ring-two($color: var(--color--accent-three)); + @include ring-two($color: var(--color--theme-primary)); } } diff --git a/tbx/static_src/sass/components/_tabs.scss b/tbx/static_src/sass/components/_tabs.scss index 2c3ccaf3b..c4ade2bfd 100644 --- a/tbx/static_src/sass/components/_tabs.scss +++ b/tbx/static_src/sass/components/_tabs.scss @@ -29,7 +29,7 @@ margin-bottom: $spacer-small; &:focus { - outline: $focus-width solid var(--color--focus-ring-muted); + outline: $focus-width solid var(--color--theme-primary-muted); } &--active { diff --git a/tbx/static_src/sass/components/_values.scss b/tbx/static_src/sass/components/_values.scss index adfb84e79..6221470cc 100644 --- a/tbx/static_src/sass/components/_values.scss +++ b/tbx/static_src/sass/components/_values.scss @@ -75,7 +75,7 @@ &__strapline { @include font-size('size-five'); - color: var(--color--accent-three); + color: var(--color--theme-primary); font-weight: $weight--semibold; margin-bottom: $spacer-mini-plus; } diff --git a/tbx/static_src/sass/components/_work-sections.scss b/tbx/static_src/sass/components/_work-sections.scss index 8fb40bd9c..5b6d94ab0 100644 --- a/tbx/static_src/sass/components/_work-sections.scss +++ b/tbx/static_src/sass/components/_work-sections.scss @@ -24,11 +24,11 @@ @include ring($diameter: 30px, $opacity: 0.75); &--one { - @include ring-one($top: 3px, $color: var(--color--accent-two)); + @include ring-one($top: 3px, $color: var(--color--theme-secondary)); } &--two { - @include ring-two($top: 3px, $color: var(--color--accent-three)); + @include ring-two($top: 3px, $color: var(--color--theme-primary)); } } } diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss index b3df41007..f502bed92 100644 --- a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss +++ b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss @@ -13,7 +13,7 @@ Styles for the top level of the navigation at mobile @include z-index(base); @include nav-fixed-position($header-height: $header-height-mobile); display: block; - background-color: var(--color--nav-background); + background-color: var(--color--background); @include media-query(menu) { display: none; @@ -43,7 +43,7 @@ Styles for the top level of the navigation at mobile @include font-size('size-five'); display: flex; padding: $spacer-small; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); justify-content: space-between; align-items: center; diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss index 2ef440de6..efb6aa077 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-desktop-mini.scss @@ -16,7 +16,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $header-height: $header-height-desktop, $full-height: false ); - background-color: var(--color--nav-background); + background-color: var(--color--background); padding: 25px 0 $spacer-mini; position: absolute; top: $spacer-medium; @@ -50,7 +50,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve font-weight: $weight--regular; display: block; padding: $spacer-mini $spacer-mini-plus; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); &:focus { @include focus-style(); diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss index bdab65aa2..e530af040 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss @@ -18,7 +18,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $header-height: $header-height-desktop, $full-height: false ); - background-color: var(--color--nav-background); + background-color: var(--color--background); padding: $spacer-half $grid-gutters; // for high contrast mode border: 1px solid transparent; @@ -97,7 +97,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve // a link item at the lowest level &--child { @include link-styles( - $color: var(--color--nav-text), + $color: var(--color--heading), $interaction-color: var(--color--heading), $underline-color: var(--color--heading) ); diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss index 83e1d91be..850c86ecb 100644 --- a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss +++ b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss @@ -14,7 +14,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve $root: &; @include z-index(base); @include nav-fixed-position($header-height: $header-height-mobile); - background-color: var(--color--nav-background); + background-color: var(--color--background); // the unordered list containing the level 2 menu items // also used for the level 3 menu items @@ -35,7 +35,7 @@ Here we refer to 'level 1 children' as 'level 2' and 'level 2 children' as 'leve @include font-size('size-five'); display: flex; padding: $spacer-small; - border-bottom: 1px solid var(--color--nav-border); + border-bottom: 1px solid var(--color--border); gap: 18px; align-items: center; diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss index bbffdd347..b786da6d4 100755 --- a/tbx/static_src/sass/config/_mixins.scss +++ b/tbx/static_src/sass/config/_mixins.scss @@ -124,7 +124,7 @@ $shadow: false, $underline-hover-color: $color ) { - outline: $focus-width solid var(--color--focus-ring); + outline: $focus-width solid var(--color--theme-primary); text-decoration-thickness: $link-underline-thickness-interaction; text-decoration-color: $underline-hover-color; @@ -343,23 +343,23 @@ } } -@mixin ring-one($top: 8px, $color: var(--color--accent-three)) { +@mixin ring-one($top: 8px, $color: var(--color--theme-primary)) { top: $top; color: $color; } -@mixin ring-two($top: 8px, $color: var(--color--accent-two)) { +@mixin ring-two($top: 8px, $color: var(--color--theme-secondary)) { left: $top; color: $color; } @mixin ring-one-hover() { - color: var(--color--accent-two); + color: var(--color--theme-secondary); opacity: 1; } @mixin ring-two-hover() { - color: var(--color--accent-three); + color: var(--color--theme-primary); opacity: 1; } diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss index 46844a3f9..2a35693b4 100755 --- a/tbx/static_src/sass/config/_variables.scss +++ b/tbx/static_src/sass/config/_variables.scss @@ -1,73 +1,51 @@ @use 'sass:color'; // --------------------------------- Colors ------------------------------------ -// See https://torchbox.github.io/front-end/themes_and_modes/#css-variables +// See https://torchbox.github.io/torchbox.com/front-end/themes_and_modes/#css-variables -$color--black: #000; -$color--eclipse: #1d2325; -$color--dark-background: #171c1d; - -$color--nebuline-public: #6f60d0; -$color--nebuline-30: #481cd9; -$color--nebuline-20: #9373ff; -$color--nebuline-10: #f1edff; - -$color--coral-charity: #ee5276; -$color--coral-30: #d02e3c; -$color--coral-20: #fc8698; -$color--coral-10: #f9f1f6; - -$color--lagoon-wagtail: #0096a8; -$color--lagoon-30: #0b778e; -$color--lagoon-20: #6bd8ef; -$color--lagoon-10: #ecf2ed; +// Charity coral theme +$color--coral: #ee5276; +$color--coral-dark: #be425e; +$color--coral-light: #f9f1f6; +$color--sky: #659ff2; -$color--banana-30: #417c35; -$color--banana-20: #fde05f; -$color--banana-10: #fff6d0; +// Public nebuline theme +$color--nebuline: #6f60d0; +$color--nebuline-dark: #594da6; +$color--nebuline-light: #f1edff; +$color--spearmint: #6cd9bf; -$color--earth-30: #5d7150; -$color--earth-20: #a9ba9e; -$color--earth-10: #f0eeea; +// Wagtail lagoon theme +$color--lagoon: #0096a8; +$color--lagoon-dark: #007886; +$color--lagoon-light: #ecf2ed; +$color--coolmint: #b6e2df; -$color--pink: #fe7eec; -$color--purple: #5e1998; -$color--sky: #659ff2; -$color--blue: #2828ef; -$color--unripe-banana: #418433; +// About green theme $color--green: #398078; -$color--spearmint: #6cd9bf; -$color--coolmint: #b6e2df; +$color--green-dark: #2e6660; +$color--green-light: #f0eeea; +$color--banana: #fde05f; $color--white: #fff; $color--grey-5: #efefef; $color--grey-10: #e6e6e6; $color--grey-20: #ccc; -$color--grey-30: #b3b3b3; -$color--grey-40: #999; $color--grey-50: #808080; -$color--grey-60: #666; $color--grey-70: #4d4d4d; -$color--grey-75: #3a3a3a; - $color--mid-grey: #282e30; // in figma this colour is created with a very transparent white, but this is used on the cookie banner where it needs to be a solid colour - -// specific colour for the streamfield background in the earth theme light mode, where grey 5 is too light -$color--earth-streamfield-background: #e6e3df; +$color--eclipse: #1d2325; +$color--black: #000; // Dark mode by default :root, .mode-dark { - // the following base variables do not change with the theme + // The following base variables do not change with the theme --color--dark-background: #{color.adjust($color--black, $alpha: -0.7)}; --color--background: #{$color--eclipse}; - --color--nav-text: #{$color--grey-5}; - --color--nav-border: #{color.adjust($color--eclipse, $alpha: -0.3)}; --color--light-background-text: #{$color--eclipse}; --color--heading: #{$color--white}; - --color--heading-50: #{color.adjust($color--white, $alpha: -0.5)}; --color--text: #{$color--grey-20}; - --color--text-50: #{color.adjust($color--grey-20, $alpha: -0.5)}; --color--link: #{$color--white}; --color--link-underline: #{color.adjust($color--white, $alpha: -0.5)}; --color--link-interaction: #{$color--white}; @@ -77,132 +55,79 @@ $color--earth-streamfield-background: #e6e3df; --color--border: #{color.adjust($color--grey-50, $alpha: -0.5)}; --color--overlay: #{color.adjust($color--black, $alpha: -0.6)}; --color--background--overlay: #{color.adjust($color--eclipse, $alpha: -1)}; - --color--light-grey-background: #{$color--grey-5}; --color--background-swirls-one: #{$color--black}; --color--background-swirls-two: #{$color--white}; - // The following base variables do not change with neither theme nor mode - // where we always want white + // The following base variables do not change with either theme or mode --color--white: #{$color--white}; - // where we always want black - used by footer carbon component - --color--black: #{$color--black}; - // where we always want grey-10 - used by footer carbon component --color--grey-10: #{$color--grey-10}; - // where we always want grey-50 - used by footer nav links - --color--grey-50: #{$color--grey-50}; - // where we always want elcipse (high contrast mode bits) + --color--grey-70: #{$color--grey-70}; --color--eclipse: #{$color--eclipse}; - --color--coral-charity: #{$color--coral-charity}; - --color--nebuline-public: #{$color--nebuline-public}; - --color--lagoon-wagtail: #{$color--lagoon-wagtail}; - --color--coral-30: #{$color--coral-30}; - --color--nebuline-30: #{$color--nebuline-30}; - --color--lagoon-30: #{$color--lagoon-30}; + --color--black: #{$color--black}; + --color--coral: #{$color--coral}; + --color--coral-dark: #{$color--coral-dark}; + --color--nebuline: #{$color--nebuline}; + --color--nebuline-dark: #{$color--nebuline-dark}; + --color--lagoon: #{$color--lagoon}; + --color--lagoon-dark: #{$color--lagoon-dark}; --color--sky: #{$color--sky}; } -// Coral theme, dark mode - also by default +// Coral theme, dark mode :root, .theme-coral.mode-dark { - --color--focus-ring: #{$color--coral-20}; - --color--focus-ring-muted: #{color.adjust($color--coral-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--nebuline-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--coral-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--purple}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--pink}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-30}; - --color--accent-three-inverse: #{$color--coral-30}; - --color--nav-background: #{$color--nebuline-30}; - --color--light-background: #{$color--coral-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--coral-20}; + --color--theme-primary: #{$color--coral}; + --color--theme-primary-muted: #{color.adjust($color--coral, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--coral-dark}; + --color--theme-primary-light: #{$color--coral-light}; + --color--theme-secondary: #{$color--sky}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 9373ff and --color--accent-three fc8698 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary ee5276 and --color--theme-secondary 659ff2 + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } -// Lagoon theme, dark mode -.theme-lagoon.mode-dark { - --color--focus-ring: #{$color--lagoon-20}; - --color--focus-ring-muted: #{color.adjust($color--lagoon-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--nebuline-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--lagoon-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--blue}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--sky}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-30}; - --color--accent-three-inverse: #{$color--lagoon-30}; - --color--nav-background: #{$color--nebuline-30}; - --color--light-background: #{$color--lagoon-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--lagoon-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 9373ff and --color--accent-three 6bd8ef - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); +// Nebuline theme, dark mode +.theme-nebuline.mode-dark { + --color--theme-primary: #{$color--nebuline}; + --color--theme-primary-muted: #{color.adjust( + $color--nebuline, + $alpha: -0.5 + )}; + --color--theme-primary-dark: #{$color--nebuline-dark}; + --color--theme-primary-light: #{$color--nebuline-light}; + --color--theme-secondary: #{$color--spearmint}; } -// Banana theme, dark mode -.theme-banana.mode-dark { - --color--focus-ring: #{$color--banana-20}; - --color--focus-ring-muted: #{color.adjust($color--banana-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--lagoon-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--banana-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--unripe-banana}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--spearmint}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-30}; - --color--accent-three-inverse: #{$color--banana-30}; - --color--nav-background: #{$color--lagoon-30}; - --color--light-background: #{$color--banana-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--banana-20}; +// Lagoon theme, dark mode +.theme-lagoon.mode-dark { + --color--theme-primary: #{$color--lagoon}; + --color--theme-primary-muted: #{color.adjust($color--lagoon, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--lagoon-dark}; + --color--theme-primary-light: #{$color--lagoon-light}; + --color--theme-secondary: #{$color--coolmint}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 6bd8ef and --color--accent-three fde05f - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary 0096a8 and --color--theme-secondary b6e2df + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } -// Earth theme, dark mode -.theme-earth.mode-dark { - --color--focus-ring: #{$color--earth-20}; - --color--focus-ring-muted: #{color.adjust($color--earth-20, $alpha: -0.4)}; - --color--accent-one: #{$color--eclipse}; - --color--accent-two: #{$color--lagoon-20}; // 'primary-darkmode' in figma - --color--accent-three: #{$color--earth-20}; // 'secondary-darkmode' in figma - --color--accent-four: #{$color--green}; // 'highlight dark' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--coolmint}; // 'highlight light' in figma - // inverse using the light mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-30}; - --color--accent-three-inverse: #{$color--banana-30}; - --color--nav-background: #{$color--lagoon-30}; - --color--light-background: #{$color--earth-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--earth-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 6bd8ef and --color--accent-three a9ba9e - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); +// Green theme, dark mode +.theme-green.mode-dark { + --color--theme-primary: #{$color--green}; + --color--theme-primary-muted: #{color.adjust($color--green, $alpha: -0.5)}; + --color--theme-primary-dark: #{$color--green-dark}; + --color--theme-primary-light: #{$color--green-light}; + --color--theme-secondary: #{$color--banana}; } .mode-light { // redeclare any base variables that are different in light mode (these ones don't change with the theme) --color--dark-background: #{color.adjust($color--black, $alpha: -0.97)}; --color--background: #{$color--white}; - --color--nav-text: #{$color--eclipse}; - --color--nav-border: #{color.adjust($color--white, $alpha: -0.3)}; --color--heading: #{$color--eclipse}; - --color--heading-50: #{color.adjust($color--eclipse, $alpha: -0.5)}; --color--text: #{$color--grey-70}; - --color--text-50: #{color.adjust($color--grey-70, $alpha: -0.5)}; --color--decoration: #{$color--eclipse}; --color--link: #{$color--eclipse}; --color--link-underline: #{color.adjust($color--eclipse, $alpha: -0.5)}; @@ -213,98 +138,23 @@ $color--earth-streamfield-background: #e6e3df; --color--background-swirls-two: #{$color--grey-50}; } -// Coral theme, light mode (coral theme is by default if theme class not specified) +// Coral theme, light mode .mode-light, .theme-coral.mode-light { - --color--focus-ring: #{$color--coral-30}; - --color--focus-ring-muted: #{color.adjust($color--coral-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--nebuline-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--coral-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--pink}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--purple}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-20}; - --color--accent-three-inverse: #{$color--coral-20}; - --color--nav-background: #{$color--nebuline-20}; - --color--light-background: #{$color--coral-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--coral-20}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two 481cd9 and --color--accent-three d02e3c - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary ee5276 and --color--theme-secondary 659ff2 + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } // Lagoon theme, light mode .theme-lagoon.mode-light { - --color--focus-ring: #{$color--lagoon-30}; - --color--focus-ring-muted: #{color.adjust($color--lagoon-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--nebuline-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--lagoon-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--sky}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--blue}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--nebuline-20}; - --color--accent-three-inverse: #{$color--lagoon-20}; - --color--nav-background: #{$color--nebuline-20}; - --color--light-background: #{$color--lagoon-10}; - --color--secondary-light-background: #{$color--nebuline-10}; - --color--footer-coloured-text: #{$color--lagoon-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #7045ff and --color--accent-three #0b778e - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); -} - -// Banana theme, light mode -.theme-banana.mode-light { - --color--focus-ring: #{$color--banana-30}; - --color--focus-ring-muted: #{color.adjust($color--banana-30, $alpha: -0.4)}; - --color--accent-one: #{$color--white}; - --color--accent-two: #{$color--lagoon-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--banana-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--spearmint}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--unripe-banana}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-20}; - --color--accent-three-inverse: #{$color--banana-20}; - --color--nav-background: #{$color--lagoon-20}; - --color--light-background: #{$color--banana-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--banana-20}; - // Motif heading flames - // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #0c8099 and --color--accent-three #417c35 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); -} - -// Earth theme, light mode -.theme-earth.mode-light { - // Usual overrides - --color--focus-ring: #{$color--earth-30}; - --color--focus-ring-muted: #{color.adjust($color--earth-30, $alpha: -0.4)}; - --color--accent-one: #{$color--earth-10}; - --color--accent-two: #{$color--lagoon-30}; // 'primary-lightmode' in figma - --color--accent-three: #{$color--earth-30}; // 'secondary-lightmode' in figma - --color--accent-four: #{$color--coolmint}; // 'highlight light' in figma. Note that these colours were primarily intended for a mix-blend in the letter caps, which we're no longer using. - --color--accent-five: #{$color--green}; // 'highlight dark' in figma - // inverse using the dark mode colour accent - used for 'results icon' in the featured case study - --color--accent-two-inverse: #{$color--lagoon-20}; - --color--accent-three-inverse: #{$color--earth-20}; - --color--nav-background: #{$color--lagoon-20}; - --color--light-background: #{$color--earth-10}; - --color--secondary-light-background: #{$color--lagoon-10}; - --color--footer-coloured-text: #{$color--earth-20}; // Motif heading flames // - The 'fill' colour is inlined with the '#' of the hex being replaced with '%23' e.g. #ff0000 becomes %23ff0000 - // - The hex colours used should be the same as --color--accent-two #0c8099 and --color--accent-three #5d7150 - --letter-motif-one: url('data:image/svg+xml;utf8,'); - --letter-motif-two: url('data:image/svg+xml;utf8,'); + // - The hex colours used should be the same as --color--theme-primary 0096a8 and --color--theme-secondary b6e2df + --letter-motif-one: url('data:image/svg+xml;utf8,'); + --letter-motif-two: url('data:image/svg+xml;utf8,'); } // --------------------------------- Fonts ------------------------------------- @@ -491,7 +341,7 @@ $z-index: ( // --------------------------------- Accessibility ----------------------------- -$focus-color: var(--color--focus-ring); +$focus-color: var(--color--theme-primary); $focus-width: 3px; // --------------------------------- Specific styles --------------------------- From d648d2fb4f5f47d292a4b298472a815bdbdbb109 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 6 Jan 2025 18:19:57 +0100 Subject: [PATCH 04/16] Linting --- tbx/static_src/sass/config/_variables.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss index 2a35693b4..813019114 100755 --- a/tbx/static_src/sass/config/_variables.scss +++ b/tbx/static_src/sass/config/_variables.scss @@ -90,10 +90,7 @@ $color--black: #000; // Nebuline theme, dark mode .theme-nebuline.mode-dark { --color--theme-primary: #{$color--nebuline}; - --color--theme-primary-muted: #{color.adjust( - $color--nebuline, - $alpha: -0.5 - )}; + --color--theme-primary-muted: #{color.adjust($color--nebuline, $alpha: -0.5)}; --color--theme-primary-dark: #{$color--nebuline-dark}; --color--theme-primary-light: #{$color--nebuline-light}; --color--theme-secondary: #{$color--spearmint}; From b3b5c1e02777f86c6fdc2f80e4d0f644b5263334 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 6 Jan 2025 18:44:18 +0100 Subject: [PATCH 05/16] Clean code --- .../templates/patterns/atoms/sprites/sprites.html | 2 +- .../molecules/streamfield/blocks/mailchimp_form_block.yaml | 2 +- tbx/project_styleguide/templates/patterns/styleguide_base.html | 1 + tbx/static_src/sass/components/_avatar.scss | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html index 25fbb2d1d..9967ccd74 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html +++ b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html @@ -93,7 +93,7 @@ {# id matches showcase homepage block icon value #} - + {# id matches showcase homepage block icon value #} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml index 774e33296..78036d967 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/mailchimp_form_block.yaml @@ -1,2 +1,2 @@ context: - value: '
This is an error
' + value: '
' diff --git a/tbx/project_styleguide/templates/patterns/styleguide_base.html b/tbx/project_styleguide/templates/patterns/styleguide_base.html index 63508a32a..af658920c 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide_base.html +++ b/tbx/project_styleguide/templates/patterns/styleguide_base.html @@ -14,6 +14,7 @@ +
diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss index 66627c33e..7156e2f3e 100644 --- a/tbx/static_src/sass/components/_avatar.scss +++ b/tbx/static_src/sass/components/_avatar.scss @@ -1,7 +1,7 @@ @use 'config' as *; .avatar { - // Component-specific heme-less accent colors + // Component-specific theme-less accent colors --avatar-accent-one: #{$color--white}; --avatar-accent-two: #{$color--white}; // Themed accent colors From fd5af4f063b1eee5d3997eefa1ceaca6d3bcc9c0 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 6 Jan 2025 19:12:58 +0100 Subject: [PATCH 06/16] Fix linting issue from previous merge --- docs/infrastructure.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/infrastructure.md b/docs/infrastructure.md index c115f5827..8b25cb005 100644 --- a/docs/infrastructure.md +++ b/docs/infrastructure.md @@ -123,5 +123,4 @@ This will be copied by flightpath. [^1]: The client in this case is Torchbox! - [^2]: See [`tbx/core/utils/scripts/run_flightpath.py`](https://github.com/torchbox/torchbox.com/blob/bfccccca76c389a2f539419e745e7ac5f191ce4c/tbx/core/utils/scripts/run_flightpath.py) From 66970225ab2b23de9c56f92f8b9ea3f49745a039 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Tue, 7 Jan 2025 15:23:39 +0800 Subject: [PATCH 07/16] Remove newline at end of file --- tbx/project_styleguide/templates/patterns/base_page.html | 1 - 1 file changed, 1 deletion(-) diff --git a/tbx/project_styleguide/templates/patterns/base_page.html b/tbx/project_styleguide/templates/patterns/base_page.html index e6fc3399b..d0a60264a 100644 --- a/tbx/project_styleguide/templates/patterns/base_page.html +++ b/tbx/project_styleguide/templates/patterns/base_page.html @@ -126,4 +126,3 @@ {% block footer %} {% include "patterns/organisms/footer/footer.html" %} {% endblock footer %} - From b1ec6480a37b86fc338e0643c274366cf8387eb5 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Tue, 7 Jan 2025 15:13:46 +0300 Subject: [PATCH 08/16] Update typography, newsletter link, and logos --- .../templates/patterns/organisms/footer/footer.html | 2 +- tbx/static_src/sass/base/_typography.scss | 1 + tbx/static_src/sass/components/_footer.scss | 6 ------ tbx/static_src/sass/components/_partners.scss | 1 - tbx/static_src/sass/config/_variables.scss | 2 +- 5 files changed, 3 insertions(+), 9 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html b/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html index 8c5acc0f4..51f6768fb 100644 --- a/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html +++ b/tbx/project_styleguide/templates/patterns/organisms/footer/footer.html @@ -10,7 +10,7 @@ {% wagtailcache 600 "footerlinks" current_site.pk is_pattern_library %} {% footerlinks %} {% endwagtailcache %} - +