Light mode updates WIP

torchbox · Jan 28, 2025 · e09ea5b · e09ea5b
1 parent 6aafa54
commit e09ea5b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 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
@@ -1,6 +1,6 @@
 <div class="grid__footer-contact-container footer-cta">
     <div class="grid__footer-contact">
-        <h2 class="heading heading--two-b heading--semibold">{{ contact_heading }}</h2>
+        <h2 class="heading heading--two-b heading--semibold footer-cta__title">{{ contact_heading }}</h2>
         <p class="footer-cta__subtitle">{{ contact_text }}</p>
         <div class="footer-cta__container">
             {% 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
@@ -38,8 +38,8 @@
                 {% endwagtailcache %}
             </nav>
 
-            {# 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" %}
         </div>
         {# Mobile menu toggle -  hide for now, will be reused in the secondary nav #}
         {% comment %} <div class="header__menu-toggle grid__header-toggle">
@@ -58,7 +58,7 @@
                     {% primarynavmobile %}
                 </ul>
             {% endwagtailcache %}
-            {# Mode switcher mobile  #}
+            {# Mode switcher mobile #}
             {% include "patterns/molecules/mode_switcher/mode_switcher.html" with mobile=True %}
         </nav> {% endcomment %}
     </div>

diff --git 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
@@ -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
@@ -140,22 +140,50 @@ $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
     --letter-motif-one: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="71" height="81" viewBox="0 0 71 81"><path d="M66.805 52.031c-.374.779-1.505.626-1.67-.22-.945-5.06-3.055-9.834-5.006-11.73l-.154.457C49.657 69.905 23.035 78.79 13.979 80.956c-.861.22-1.465-.83-.855-1.473 8.336-8.564 9.757-18.821 4.668-30.974-.988-2.251-1.957-5.061-2.673-7.786 0 0-.9-3.182-1.376-7.295l-.135.067c-5.13 4.045-7.97 9.986-9.265 13.338-.324.795-1.438.761-1.688 0C1.52 43.177-.11 35.966 1.535 29.23 5.546 12.947 20.346-.12 37.883.947c.827.051 1.11 1.05.434 1.558-2.168 1.76-4.085 4.62-5.45 8.682-3.157 9.394 2.166 27.048 2.166 27.048S49.943 27.352 53.1 17.96c1.382-4.113 1.58-7.55.914-10.258-.183-.795.647-1.421 1.287-.981 14.266 9.293 16.738 26.219 14.865 35.477-.808 4.08-2.323 7.583-3.36 9.834z" fill="%23ee5276" style="opacity: 0.9"/></svg>');
     --letter-motif-two: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="58" height="62" viewBox="0 0 58 62"><path d="M6.825 14.11c.45-.571 1.35-.24 1.332.486-.15 4.33.712 8.638 1.969 10.552l.21-.347C24.18 2.56 47.676.125 55.512 0c.748-.024 1.052.949.434 1.366-8.415 5.512-11.457 13.68-9.497 24.595.4 2.03.683 4.515.774 6.885 0 0 .158 2.779-.204 6.245l.124-.031c4.953-2.386 8.373-6.748 10.05-9.264.41-.595 1.32-.363 1.386.308.265 3.211.285 9.433-2.297 14.667-6.27 12.645-20.818 20.675-35.03 16.593-.671-.192-.722-1.065-.072-1.358 2.102-1.05 4.2-3.05 6.064-6.138 4.31-7.14 3.164-22.618 3.164-22.618s-14.24 6.216-18.55 13.357c-1.888 3.127-2.678 5.913-2.626 8.26.004.687-.791 1.05-1.237.571-10.022-10.242-8.96-24.6-5.729-31.864 1.41-3.204 3.295-5.805 4.559-7.465z" fill="%23659ff2" style="opacity: 0.9"/></svg>');
 }
 
+// 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
     --letter-motif-one: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="71" height="81" viewBox="0 0 71 81"><path d="M66.805 52.031c-.374.779-1.505.626-1.67-.22-.945-5.06-3.055-9.834-5.006-11.73l-.154.457C49.657 69.905 23.035 78.79 13.979 80.956c-.861.22-1.465-.83-.855-1.473 8.336-8.564 9.757-18.821 4.668-30.974-.988-2.251-1.957-5.061-2.673-7.786 0 0-.9-3.182-1.376-7.295l-.135.067c-5.13 4.045-7.97 9.986-9.265 13.338-.324.795-1.438.761-1.688 0C1.52 43.177-.11 35.966 1.535 29.23 5.546 12.947 20.346-.12 37.883.947c.827.051 1.11 1.05.434 1.558-2.168 1.76-4.085 4.62-5.45 8.682-3.157 9.394 2.166 27.048 2.166 27.048S49.943 27.352 53.1 17.96c1.382-4.113 1.58-7.55.914-10.258-.183-.795.647-1.421 1.287-.981 14.266 9.293 16.738 26.219 14.865 35.477-.808 4.08-2.323 7.583-3.36 9.834z" fill="%230096a8" style="opacity: 0.9"/></svg>');
     --letter-motif-two: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="58" height="62" viewBox="0 0 58 62"><path d="M6.825 14.11c.45-.571 1.35-.24 1.332.486-.15 4.33.712 8.638 1.969 10.552l.21-.347C24.18 2.56 47.676.125 55.512 0c.748-.024 1.052.949.434 1.366-8.415 5.512-11.457 13.68-9.497 24.595.4 2.03.683 4.515.774 6.885 0 0 .158 2.779-.204 6.245l.124-.031c4.953-2.386 8.373-6.748 10.05-9.264.41-.595 1.32-.363 1.386.308.265 3.211.285 9.433-2.297 14.667-6.27 12.645-20.818 20.675-35.03 16.593-.671-.192-.722-1.065-.072-1.358 2.102-1.05 4.2-3.05 6.064-6.138 4.31-7.14 3.164-22.618 3.164-22.618s-14.24 6.216-18.55 13.357c-1.888 3.127-2.678 5.913-2.626 8.26.004.687-.791 1.05-1.237.571-10.022-10.242-8.96-24.6-5.729-31.864 1.41-3.204 3.295-5.805 4.559-7.465z" fill="%23b6e2df" style="opacity: 0.9"/></svg>');
 }
 
+// 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;