From e09ea5b58a07f383900b89f028dd87efc09b54d5 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Tue, 28 Jan 2025 18:30:51 +0300 Subject: [PATCH] Light mode updates WIP --- .../molecules/footer-cta/footer-cta.html | 2 +- .../patterns/organisms/header/header.html | 6 ++-- .../sass/components/_footer-cta.scss | 4 +++ tbx/static_src/sass/components/_footer.scss | 3 +- tbx/static_src/sass/config/_variables.scss | 28 +++++++++++++++++++ 5 files changed, 38 insertions(+), 5 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html b/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html index 5c6e8a107..7a8cee3fc 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html +++ b/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html @@ -1,6 +1,6 @@
-

{{ contact_heading }}

+

{{ contact_heading }}

{{ contact_text }}

{% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--footer-cta" %} diff --git a/tbx/project_styleguide/templates/patterns/organisms/header/header.html b/tbx/project_styleguide/templates/patterns/organisms/header/header.html index 4e04b6787..35db9c846 100644 --- a/tbx/project_styleguide/templates/patterns/organisms/header/header.html +++ b/tbx/project_styleguide/templates/patterns/organisms/header/header.html @@ -38,8 +38,8 @@ {% endwagtailcache %} - {# Mode switcher desktop - hide for now #} - {% comment %} {% include "patterns/molecules/mode_switcher/mode_switcher.html" %} {% endcomment %} + {# Mode switcher desktop #} + {% include "patterns/molecules/mode_switcher/mode_switcher.html" %}
{# Mobile menu toggle - hide for now, will be reused in the secondary nav #} {% comment %}
@@ -58,7 +58,7 @@ {% primarynavmobile %} {% endwagtailcache %} - {# Mode switcher mobile #} + {# Mode switcher mobile #} {% include "patterns/molecules/mode_switcher/mode_switcher.html" with mobile=True %} {% endcomment %}
diff --git a/tbx/static_src/sass/components/_footer-cta.scss b/tbx/static_src/sass/components/_footer-cta.scss index c9a396e51..7b0bf0e64 100644 --- a/tbx/static_src/sass/components/_footer-cta.scss +++ b/tbx/static_src/sass/components/_footer-cta.scss @@ -8,6 +8,10 @@ padding: $spacer-half 0; } + &__title { + color: var(--color--theme-primary); + } + &__subtitle { @include font-size('size-four'); color: var(--color--heading); diff --git a/tbx/static_src/sass/components/_footer.scss b/tbx/static_src/sass/components/_footer.scss index f2c85f56f..c5f4c140e 100644 --- a/tbx/static_src/sass/components/_footer.scss +++ b/tbx/static_src/sass/components/_footer.scss @@ -119,7 +119,7 @@ flex-direction: column; height: 100%; margin: $spacer-medium 0 $spacer-mini; - color: var(--color--grey-20); + color: var(--color--text); @include media-query(large) { justify-content: center; @@ -157,6 +157,7 @@ &__carbon-impact-link { @include link-styles( $color: var(--color--grey-10), + $underline-color: var(--color--grey-50), $interaction-color: var(--color--white) ); } diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss index 572434ca6..242433190 100755 --- a/tbx/static_src/sass/config/_variables.scss +++ b/tbx/static_src/sass/config/_variables.scss @@ -140,6 +140,11 @@ $color--black: #000; // Coral theme, light mode .mode-light, .theme-coral.mode-light { + --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--theme-primary ee5276 and --color--theme-secondary 659ff2 @@ -147,8 +152,22 @@ $color--black: #000; --letter-motif-two: url('data:image/svg+xml;utf8,'); } +// Nebuline theme, light mode +.theme-nebuline.mode-light { + --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}; +} + // Lagoon theme, light mode .theme-lagoon.mode-light { + --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--theme-primary 0096a8 and --color--theme-secondary b6e2df @@ -156,6 +175,15 @@ $color--black: #000; --letter-motif-two: url('data:image/svg+xml;utf8,'); } +// Green theme, light mode +.theme-green.mode-light { + --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}; +} + // --------------------------------- Fonts ------------------------------------- $font--primary: 'Outfit', sans-serif;