Skip to content

Commit 960de4a

Browse files
eebbieebbi
authored
Merge pull request #529 from devgeniem/TMS-1108
TMS-1108: Add new Häive color-theme
2 parents 10fc3d8 + 9b5891b commit 960de4a

File tree

7 files changed

+319
-0
lines changed

7 files changed

+319
-0
lines changed

‎CHANGELOG.MD‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
- TMS-1108: Add new Häive color-theme
11+
1012
## [1.59.8] - 2025-03-03
1113

1214
- TMS-1109: Change ContentColumns & CallToAction TextArea fields to Wysiwyg

‎assets/assets_test.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel="stylesheet" href="dist/theme_kokemus.css" title="kokemus" />
1919
<link rel="stylesheet" href="dist/theme_neutraali.css" title="neutraali" />
2020
<link rel="stylesheet" href="dist/theme_mustavalkoinen.css" title="mustavalkoinen" />
21+
<link rel="stylesheet" href="dist/theme_haive.css" title="haive" />
2122

2223
<style>
2324
#switcher {
@@ -81,6 +82,9 @@ <h2>Theme options</h2>
8182
<li>
8283
<button rel="mustavalkoinen" class="switcher button is-primary">Musta-valkoinen</button>
8384
</li>
85+
<li>
86+
<button rel="haive" class="switcher button is-primary">Häive</button>
87+
</li>
8488
</ul>
8589

8690
<hr>

‎assets/scripts/theme-haive.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './main.js';
2+
import '../styles/theme-haive.scss';

‎assets/styles/theme-haive.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@import "themes/includes";
2+
3+
$primary: #f8de79;
4+
$primary-invert: $color-black;
5+
$primary-light: bulmaLighten(#f2ac58, 10);
6+
$primary-light-invert: $color-black;
7+
$primary-dark: bulmaDarken(#f2ac58, 20);
8+
$primary-dark-invert: $color-black;
9+
10+
$secondary: #f9ecd4;
11+
$secondary-invert: $color-black;
12+
$secondary-light: bulmaLighten($secondary, 10);
13+
$secondary-light-invert: $color-black;
14+
$secondary-dark: bulmaDarken($secondary, 10);
15+
$secondary-dark-invert: $color-black;
16+
17+
$light: $primary-light;
18+
$light-invert: $primary-light-invert;
19+
$dark: $primary-dark;
20+
$dark-invert: $primary-dark-invert;
21+
$divider: $color-vaalean-harmaa;
22+
$divider-invert: $color-tumma-harmaa;
23+
24+
$text: $black;
25+
$link: $primary-dark;
26+
27+
$accent: $primary-dark;
28+
$accent-light: #f2ac58;
29+
30+
$colors-palette-primary: ($primary, $primary-invert, $primary-dark, $primary-light);
31+
$colors-palette-secondary: ($secondary, $secondary-invert, $secondary-dark, $secondary-light);
32+
33+
$colors: (
34+
"primary": $colors-palette-primary,
35+
"secondary": $colors-palette-secondary,
36+
"white": ($color-white, $color-black),
37+
"black": ($color-black, $color-white),
38+
"accent": ($primary, $primary-invert),
39+
);
40+
41+
$button-colors: (
42+
"primary": ($primary, $color-white, $text, $text),
43+
"secondary": ($secondary, $secondary-invert, $color-white, $color-black),
44+
);
45+
46+
$navbar-colors: (
47+
"primary": $colors-palette-primary
48+
);
49+
50+
$color-background-primary-light--opaque-light: $secondary;
51+
52+
@import "main";
53+
@import "themes/theme-haive-overrides";

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

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
.site-header {
2+
&__logo-image {
3+
> a {
4+
&:focus {
5+
outline-color: $black;
6+
}
7+
}
8+
}
9+
}
10+
11+
.icon {
12+
&.is-primary {
13+
fill: $accent !important;
14+
}
15+
}
16+
17+
.lang-nav--horizontal {
18+
a {
19+
color: $primary-invert !important;
20+
21+
&:hover,
22+
&:focus {
23+
color: $primary-invert !important;
24+
background-color: $primary !important;
25+
}
26+
}
27+
}
28+
29+
.language-nav {
30+
.dropdown-trigger {
31+
.button {
32+
color: $black !important;
33+
border-color: $black !important;
34+
35+
.icon {
36+
fill: $black !important;
37+
}
38+
}
39+
}
40+
}
41+
42+
.icon-links .icon-links {
43+
&__item {
44+
> a.is-primary.is-outlined {
45+
color: $black !important;
46+
border-color: $black !important;
47+
}
48+
49+
.icon {
50+
fill: $primary !important;
51+
background-color: $black !important;
52+
}
53+
}
54+
}
55+
56+
.search-item {
57+
&__title {
58+
> a {
59+
&:hover,
60+
&:focus {
61+
color: lighten($black, 25%);
62+
}
63+
}
64+
}
65+
66+
&__meta-item {
67+
> a {
68+
&:hover,
69+
&:focus {
70+
color: darken($primary, 70%) !important;
71+
}
72+
}
73+
}
74+
}
75+
76+
.logo-wall {
77+
&__link {
78+
outline-color: $black !important;
79+
}
80+
}
81+
82+
.share-links {
83+
a {
84+
&:hover,
85+
&:focus {
86+
.icon {
87+
fill: $primary !important;
88+
}
89+
}
90+
}
91+
}
92+
93+
.gform_wrapper {
94+
.button,
95+
button {
96+
color: $black !important;
97+
background-color: transparent !important;
98+
border-color: $black !important;
99+
100+
&:hover,
101+
&:focus {
102+
color: $black !important;
103+
background-color: $primary !important;
104+
border-color: $black !important;
105+
}
106+
}
107+
}
108+
109+
.subpages {
110+
&__items {
111+
a {
112+
&.has-background-image {
113+
color: $white !important;
114+
115+
&:hover,
116+
&:focus {
117+
color: $white !important;
118+
}
119+
}
120+
121+
&.has-background-primary {
122+
&:hover,
123+
&:focus {
124+
color: $white !important;
125+
126+
.icon {
127+
fill: $white !important;
128+
}
129+
}
130+
}
131+
}
132+
}
133+
}
134+
135+
.events {
136+
&__item-inner {
137+
> .button.is-primary {
138+
color: $black !important;
139+
border-color: $black !important;
140+
141+
&:hover,
142+
&:focus {
143+
color: $black !important;
144+
}
145+
}
146+
}
147+
}
148+
149+
.search-form {
150+
&__button {
151+
color: $black !important;
152+
153+
.icon {
154+
fill: $black !important;
155+
}
156+
}
157+
}
158+
159+
.events {
160+
&__more-link {
161+
color: $black;
162+
163+
.icon {
164+
fill: $black;
165+
}
166+
}
167+
}
168+
169+
.accordion {
170+
&__row {
171+
border-color: $black !important;
172+
}
173+
174+
&__close-all,
175+
&__open-all,
176+
&__icon-text {
177+
color: $primary-invert !important;
178+
}
179+
180+
&__close-all,
181+
&__open-all,
182+
&__title-button {
183+
.icon {
184+
fill: $primary-invert !important;
185+
}
186+
}
187+
}
188+
189+
.notice-banner {
190+
&.has-background-secondary {
191+
.icon {
192+
fill: $black !important;
193+
}
194+
}
195+
}
196+
197+
.link-list {
198+
&__links {
199+
a {
200+
color: $black !important;
201+
202+
.icon {
203+
fill: $black !important;
204+
}
205+
}
206+
}
207+
}
208+
209+
.grid {
210+
&__item {
211+
.button {
212+
&,
213+
&:hover,
214+
&:focus {
215+
background-color: $primary-invert !important;
216+
color: $color-white !important;
217+
border-color: $primary-invert !important;
218+
}
219+
220+
&:hover,
221+
&:focus {
222+
text-decoration: underline !important;
223+
}
224+
}
225+
}
226+
}
227+
228+
.materials {
229+
.has-border-secondary {
230+
border-color: $black;
231+
}
232+
233+
.button.is-primary {
234+
color: $black !important;
235+
border-color: $black !important;
236+
}
237+
}
238+
239+
.related-posts {
240+
&__item {
241+
.button {
242+
&,
243+
&:hover,
244+
&:focus {
245+
background-color: $primary-invert !important;
246+
color: $color-white !important;
247+
border-color: $primary-invert !important;
248+
}
249+
250+
&:hover,
251+
&:focus {
252+
text-decoration: underline !important;
253+
}
254+
}
255+
}
256+
}

‎lib/ACF/Fields/Settings/ThemeColorTab.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ class ThemeColorTab extends \Geniem\ACF\Field\Tab {
5656
'kokemus' => 'Kokemus (Vaalean vihreä)',
5757
'neutraali' => 'Neutraali (Vaalea, neutraali värimalli, jossa korkea kontrasti)',
5858
'mustavalkoinen' => 'Musta-valkoinen',
59+
'haive' => 'Häive (vaaleankeltainen)',
5960
];
6061

6162
/**

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const entryPoints = {
3333
theme_kokemus: [ `${ wpThemePath }/assets/scripts/theme-kokemus.js` ],
3434
theme_neutraali: [ `${ wpThemePath }/assets/scripts/theme-neutraali.js` ],
3535
theme_mustavalkoinen: [ `${ wpThemePath }/assets/scripts/theme-mustavalkoinen.js` ],
36+
theme_haive: [ `${ wpThemePath }/assets/scripts/theme-haive.js` ],
3637
};
3738

3839
// All loaders to use on assets.

0 commit comments

Comments
 (0)