TMS-1108: Add new Häive color-theme

CHANGELOG.MD

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1108: Add new Häive color-theme
+
 ## [1.59.8] - 2025-03-03
 
 - TMS-1109: Change ContentColumns & CallToAction TextArea fields to Wysiwyg

assets/assets_test.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="dist/theme_kokemus.css" title="kokemus" />
     <link rel="stylesheet" href="dist/theme_neutraali.css" title="neutraali" />
     <link rel="stylesheet" href="dist/theme_mustavalkoinen.css" title="mustavalkoinen" />
+    <link rel="stylesheet" href="dist/theme_haive.css" title="haive" />
 
     <style>
     #switcher {
@@ -81,6 +82,9 @@ <h2>Theme options</h2>
         <li>
             <button rel="mustavalkoinen" class="switcher button is-primary">Musta-valkoinen</button>
         </li>
+        <li>
+            <button rel="haive" class="switcher button is-primary">Häive</button>
+        </li>
     </ul>
 
     <hr>

assets/scripts/theme-haive.js

@@ -0,0 +1,2 @@
+import './main.js';
+import '../styles/theme-haive.scss';

assets/styles/theme-haive.scss

@@ -0,0 +1,60 @@
+@import "themes/includes";
+
+
+
+
+
+// TODO: Linkit ja ikonit paahde-värillä ( #e8b455 )
+
+
+$primary: #f8de79;
+$primary-invert: $color-black;
+$primary-light: bulmaLighten(#f2ac58, 10);
+$primary-light-invert: $color-black;
+$primary-dark: bulmaDarken(#f2ac58, 20);
+$primary-dark-invert: $color-black;
+
+$secondary: #F9ECD4;
+$secondary-invert: $color-black;
+$secondary-light: bulmaLighten($secondary, 10);
+$secondary-light-invert: $color-black;
+$secondary-dark: bulmaDarken($secondary, 10);
+$secondary-dark-invert: $color-black;
+
+$light: $primary-light;
+$light-invert: $primary-light-invert;
+$dark: $primary-dark;
+$dark-invert: $primary-dark-invert;
+$divider: $color-vaalean-harmaa;
+$divider-invert: $color-tumma-harmaa;
+
+$text: $black;
+$link: $primary-dark;
+
+$accent: $primary-dark;
+$accent-light: #f2ac58;
+
+$colors-palette-primary: ($primary, $primary-invert, $primary-dark, $primary-light);
+$colors-palette-secondary: ($secondary, $secondary-invert, $secondary-dark, $secondary-light);
+
+$colors: (
+    "primary": $colors-palette-primary,
+    "secondary": $colors-palette-secondary,
+    "white": ($color-white, $color-black),
+    "black": ($color-black, $color-white),
+    "accent": ($primary, $primary-invert),
+);
+
+$button-colors: (
+    "primary": ($primary, $color-white, $text, $text),
+    "secondary": ($secondary, $secondary-invert, $color-white, $color-black),
+);
+
+$navbar-colors: (
+    "primary": $colors-palette-primary
+);
+
+$color-background-primary-light--opaque-light: $secondary;
+
+@import "main";
+@import "themes/theme-haive-overrides";

assets/styles/themes/_theme-haive-overrides.scss

@@ -0,0 +1,258 @@
+.site-header {
+    &__logo-image {
+        > a {
+            &:focus {
+                outline-color: $black;
+            }
+        }
+    }
+}
+
+.icon {
+    &.is-primary {
+        fill: $accent !important;
+    }
+}
+
+.lang-nav--horizontal {
+    a {
+        color: $primary-invert !important;
+
+        &:hover,
+        &:focus {
+            color: $primary-invert !important;
+            background-color: $primary !important;
+        }
+    }
+
+}
+
+.language-nav {
+    .dropdown-trigger {
+        .button {
+            color: $black !important;
+            border-color: $black !important;
+
+            .icon {
+                fill: $black !important;
+            }
+        }
+    }
+}
+
+.icon-links .icon-links {
+    &__item {
+        > a.is-primary.is-outlined {
+            color: $black !important;
+            border-color: $black !important;
+        }
+
+        .icon {
+            fill: $primary !important;
+            background-color: $black !important;
+        }
+    }
+}
+
+.search-item {
+    &__title {
+        > a {
+            &:hover,
+            &:focus {
+                color: lighten($black, 25%);
+            }
+        }
+    }
+
+    &__meta-item {
+        > a {
+            &:hover,
+            &:focus {
+                color: darken($primary, 70%) !important;
+            }
+        }
+    }
+}
+
+.logo-wall {
+    &__link {
+        outline-color: $black !important;
+    }
+}
+
+.share-links {
+    a {
+        &:hover,
+        &:focus {
+            .icon {
+                fill: $primary !important;
+            }
+        }
+    }
+}
+
+.gform_wrapper {
+    .button,
+    button {
+        color: $black !important;
+        background-color: transparent !important;
+        border-color: $black !important;
+
+        &:hover,
+        &:focus {
+            color: $black !important;
+            background-color: $primary !important;
+            border-color: $black !important;
+        }
+    }
+}
+
+.subpages {
+    &__items {
+        a {
+            &.has-background-image {
+                color: $white !important;
+
+                &:hover,
+                &:focus {
+                    color: $white !important;
+                }
+            }
+
+            &.has-background-primary {
+                &:hover,
+                &:focus {
+                    color: $white !important;
+
+                    .icon {
+                        fill: $white !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.events {
+    &__item-inner {
+        > .button.is-primary {
+            color: $black !important;
+            border-color: $black !important;
+
+            &:hover,
+            &:focus {
+                color: $black !important;
+            }
+        }
+    }
+}
+
+.search-form {
+    &__button {
+        color: $black !important;
+
+        .icon {
+            fill: $black !important;
+        }
+    }
+}
+
+.events {
+    &__more-link {
+        color: $black;
+
+        .icon {
+            fill: $black;
+        }
+    }
+}
+
+.accordion {
+    &__row {
+        border-color: $black !important;
+    }
+
+    &__close-all,
+    &__open-all,
+    &__icon-text {
+        color: $primary-invert !important;
+    }
+
+    &__close-all,
+    &__open-all,
+    &__title-button {
+        .icon {
+            fill: $primary-invert !important;
+        }
+    }
+}
+
+.notice-banner {
+    &.has-background-secondary {
+        .icon {
+            fill: $black !important;
+        }
+    }
+}
+
+.link-list {
+    &__links {
+        a {
+            color: $black !important;
+
+            .icon {
+                fill: $black !important;
+            }
+        }
+
+    }
+}
+
+.grid {
+    &__item {
+        .button {
+            &,
+            &:hover,
+            &:focus {
+                background-color: $primary-invert !important;
+                color: $color-white !important;
+                border-color: $primary-invert !important;
+            }
+
+            &:hover,
+            &:focus {
+                text-decoration: underline !important;
+            }
+        }
+    }
+}
+
+.materials {
+    .has-border-secondary {
+        border-color: $black;
+    }
+
+    .button.is-primary {
+        color: $black !important;
+        border-color: $black !important;
+    }
+}
+
+.related-posts {
+    &__item {
+        .button {
+            &,
+            &:hover,
+            &:focus {
+                background-color: $primary-invert !important;
+                color: $color-white !important;
+                border-color: $primary-invert !important;
+            }
+
+            &:hover,
+            &:focus {
+                text-decoration: underline !important;
+            }
+        }
+    }
+}

lib/ACF/Fields/Settings/ThemeColorTab.php

@@ -56,6 +56,7 @@ class ThemeColorTab extends \Geniem\ACF\Field\Tab {
         'kokemus'         => 'Kokemus (Vaalean vihreä)',
         'neutraali'       => 'Neutraali (Vaalea, neutraali värimalli, jossa korkea kontrasti)',
         'mustavalkoinen'  => 'Musta-valkoinen',
+        'haive'           => 'Häive (vaaleankeltainen)',
     ];
 
     /**

webpack.config.js

@@ -33,6 +33,7 @@ const entryPoints = {
     theme_kokemus: [ `${ wpThemePath }/assets/scripts/theme-kokemus.js` ],
     theme_neutraali: [ `${ wpThemePath }/assets/scripts/theme-neutraali.js` ],
     theme_mustavalkoinen: [ `${ wpThemePath }/assets/scripts/theme-mustavalkoinen.js` ],
+    theme_haive: [ `${ wpThemePath }/assets/scripts/theme-haive.js` ],
 };
 
 // All loaders to use on assets.