Merge pull request #210 from devgeniem/TMS-1203

TMS-1203: Style changes

Author: eebbi

CHANGELOG.MD

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1203: Style changes:
+    - Change text color to black
+    - Change text links to be underlined by default
+    - Add icon to readspeaker button
+    - Change secondary-button colors
+    - Change color-light-gray variables color
+    - Change quote- & key-figures-blocks font-family
+    - Change key-figures color combinations
+    - Change notice-banner color combination
+    - Remove image-banner & notice-banner pseudo-elements
+    - Change subpages-components layout
+    - Change apply-method categories colors
+
 ## [1.12.1] - 2025-10-23
 
 - TMS-1202: Allow type mistmatch for radio-button active check

assets/icons/index.js

@@ -107,6 +107,7 @@ import './veistospuisto.svg';
 import './vkontakte.svg';
 import './whatsapp.svg';
 import './update.svg';
+import './readspeaker.svg';
 import './remove.svg';
 import './place.svg';
 import './date-range.svg';

assets/icons/readspeaker.svg

@@ -51,6 +51,17 @@ a {
     }
 }
 
+.entry__content {
+    p a {
+        text-decoration: underline;
+
+        &:hover,
+        &.is-hovered {
+            text-decoration: none;
+        }
+    }
+}
+
 .has-text-paragraph {
     color: $text !important; // sass-lint:disable-line no-important
 }

assets/styles/base/_typography.scss

@@ -73,7 +73,7 @@
         &.has-colors-primary {
             color: $color-white;
 
-            .button {
+            .button:not(.is-secondary) {
                 color: $color-black !important;
 
                 .icon {

assets/styles/blocks/custom/_grid.scss

@@ -1,6 +1,6 @@
 .key-figures {
     &__number {
-        font-family: $family-tertiary;
+        font-family: $family-secondary;
 
         &.is-text-huge {
             @include from($widescreen) {
@@ -21,20 +21,20 @@
 
     &__row {
         &--light {
-            background-color: #eff6ff;
-            color: $color-semidark-blue;
+            background-color: $color-light-gray;
+            color: $text;
 
             .key-figures__description {
-                color: $color-black;
+                color: $text;
             }
         }
 
         &--accent {
-            background-color: $color-green;
-            color: $color-dark-blue;
+            background-color: $color-light-petrol;
+            color: $text;
 
             .key-figures__description {
-                color: $color-black;
+                color: $text;
             }
         }
 

assets/styles/blocks/custom/_key-figures.scss

@@ -2,20 +2,6 @@
     position: relative;
     overflow: hidden;
 
-    &::before {
-        @include from($desktop) {
-            content: "";
-            position: absolute;
-            top: -11rem;
-            right: -9rem;
-            width: 17.75rem;
-            height: 17.75rem;
-            background-image: url('../images/hero-stripes.svg');
-            background-repeat: no-repeat;
-            background-size: cover;
-        }
-    }
-
     &.has-background-primary {
         background-color: $primary;
         color: $color-white;
@@ -26,11 +12,11 @@
     }
 
     &.has-background-secondary {
-        background-color: $color-light-blueishgray !important;
-        color: $color-black;
+        background-color: $color-light-gray !important;
+        color: $text;
 
         .notice-banner__title {
-            color: $primary !important;
+            color: $text !important;
         }
     }
 

assets/styles/blocks/custom/_notice-banner.scss

@@ -35,14 +35,14 @@
         }
 
         .quote__author {
-            color: $color-light-blueishgray;
+            color: $color-light-gray;
         }
     }
 
     &.has-background-white {
         .quote__content {
             color: $color-semidark-blue;
-            font-family: $family-tertiary;
+            font-family: $family-secondary;
             font-size: $size-1;
             letter-spacing: -.03em;
             line-height: 1;

assets/styles/blocks/custom/_quote.scss

@@ -106,8 +106,9 @@ $button-transition-speed: $speed !default;
     }
 
     &.is-secondary {
-        background-color: $secondary;
-        color: $primary;
+        background-color: $primary;
+        color: $primary-invert;
+        border-color: $secondary;
 
         &.is-outlined {
             color: $primary;
@@ -118,7 +119,7 @@ $button-transition-speed: $speed !default;
         }
 
         .icon {
-            fill: $primary;
+            fill: $primary-invert;
         }
     }
 

assets/styles/helpers/_button.scss

@@ -150,7 +150,6 @@ $checkradio-top-offset: 0rem !default
             &::before,
             &:before
                 background: $primary
-                border: .1rem solid $primary-invert
         &[disabled]
             cursor: not-allowed
             + label
@@ -321,7 +320,6 @@ $checkradio-top-offset: 0rem !default
         &:after
             border-radius: 50%
             background: $primary-invert
-            border: .1764rem solid $primary-invert
             left: 0
             transform: scale(0.5)