Merge pull request #1171 from City-of-Helsinki/UHF-10374

UHF-10374: Change the color-silver-light to color-black-5
City-of-Helsinki · Feb 4, 2025 · e997096 · e997096
2 parents 89eb7fd + 3883dfc
commit e997096
Show file tree

Hide file tree

Showing 22 changed files with 38 additions and 95 deletions.
diff --git a/.github/workflows/visual.yml b/.github/workflows/visual.yml
@@ -90,7 +90,9 @@ jobs:
         # Install the site from existing dump if the cache restoration was successful.
       - name: Install Drupal from existing dump
         working-directory: ${{ env.DRUPAL_ROOT }}
-        if: steps.drupal-cache.outputs.cache-hit == 'true'
+        if: |
+          !contains(github.event.pull_request.labels.*.name, 'install-drupal-from-scratch') &&
+          steps.drupal-cache.outputs.cache-hit == 'true'
         run: |
           docker compose exec app bash -c "mysql --user=drupal --password=drupal --database=drupal --host=db --port=3306 -A < /app/public/sites/default/files/latest.sql"
           docker compose exec app bash -c "drush updb -y && drush cr"
@@ -100,7 +102,9 @@ jobs:
         # installation process and install Drupal using that dump from now on.
       - name: Install Drupal from scratch
         working-directory: ${{ env.DRUPAL_ROOT }}
-        if: steps.drupal-cache.outputs.cache-hit != 'true'
+        if: |
+          contains(github.event.pull_request.labels.*.name, 'install-drupal-from-scratch') ||
+          steps.drupal-cache.outputs.cache-hit != 'true'
         run: |
           docker compose exec app bash -c "drush si minimal -y"
           docker compose exec app bash -c "drush en redis -y"
@@ -131,7 +135,7 @@ jobs:
       - name: Evaluate if we should re-create reference images
         id: evaluate-reference-images
         if: |
-          contains( github.event.pull_request.labels.*.name, 'recreate-reference-images') ||
+          contains(github.event.pull_request.labels.*.name, 'recreate-reference-images') ||
           hashFiles('backstop/full/bitmaps_reference/') != '' ||
           github.ref == 'refs/heads/main'
         run: echo "generate-references=true" >> $GITHUB_OUTPUT

diff --git a/dist/css/nav_global.min.css b/dist/css/nav_global.min.css
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/block/_language-switcher.scss b/src/scss/06_components/block/_language-switcher.scss
@@ -5,7 +5,7 @@ $-language-block-height: 52px;
   align-content: stretch;
   align-items: center;
   align-self: center;
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   border-bottom: 1px solid $color-black-20;
   display: flex;
   grid-area: lang;

diff --git a/src/scss/06_components/helfi_calculator/_helfi_calculator.scss b/src/scss/06_components/helfi_calculator/_helfi_calculator.scss
@@ -121,7 +121,7 @@
   }
 
   .helfi-calculator__dynamic-slot {
-    background-color: $color-silver-light;
+    background-color: $color-black-5;
     padding: $spacing-double $spacing-and-half;
 
     &:not(:first-child) {

diff --git a/src/scss/06_components/messages/_announcement.scss b/src/scss/06_components/messages/_announcement.scss
@@ -5,7 +5,7 @@
 }
 
 .announcement__container {
-  --announcement-bg-color: #{$color-silver-light}; // Defaults to .announcement--notification styles
+  --announcement-bg-color: #{$color-black-5}; // Defaults to .announcement--notification styles
   --announcement-bg-size: #{$spacing-double};
   --announcement-color: #{$color-info}; // Defaults to .announcement--notification styles
   align-items: flex-start;

diff --git a/src/scss/06_components/navigation/_header-search.scss b/src/scss/06_components/navigation/_header-search.scss
@@ -1,5 +1,5 @@
 .nav-toggle-dropdown--search .nav-toggle-dropdown__content {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
 }
 
 .header-search-wrapper {

diff --git a/src/scss/06_components/navigation/_sidebar-menu.scss b/src/scss/06_components/navigation/_sidebar-menu.scss
@@ -220,7 +220,7 @@ $section-navigation-toggle-button-size: 54px;
 
 .sidebar-navigation--section-navigation {
   @include breakpoint(max-width $breakpoint-l) {
-    background-color: $color-silver-light;
+    background-color: $color-black-5;
     display: block;
   }
 
@@ -253,7 +253,7 @@ $section-navigation-toggle-button-size: 54px;
 .section-navigation__title {
   @include breakpoint(max-width $breakpoint-l) {
     @include font('h5');
-    background-color: $color-silver-light;
+    background-color: $color-black-5;
     border-bottom: 0 none;
     flex-grow: 1;
     margin-top: 0;

diff --git a/src/scss/06_components/navigation/_table-of-contents.scss b/src/scss/06_components/navigation/_table-of-contents.scss
@@ -18,7 +18,7 @@
 }
 
 .table-of-contents__container {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   border-inline-start: $spacing-half solid $color-gold;
   max-width: $spacing-and-half + $content-width-max + $spacing-and-half; // Max-width: Content max width (860px) + left and right paddings.
   padding: $spacing-double $spacing-and-half;
@@ -81,7 +81,7 @@
 }
 
 .table-of-contents__nojs {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   display: flex;
   flex-flow: column;
   padding: $spacing-double $spacing-and-half;

diff --git a/src/scss/06_components/navigation/global/_mmenu.scss b/src/scss/06_components/navigation/global/_mmenu.scss
@@ -12,7 +12,7 @@ $-footerlink-target-size: 44px;
 
 .mmenu {
   @include font('body');
-  background: $color-silver-light;
+  background: $color-black-5;
   display: none;
   width: 100vw; // this causes panel flex to break.
   z-index: 2;
@@ -41,7 +41,7 @@ $-footerlink-target-size: 44px;
 }
 
 .mmenu__panels {
-  background: $color-silver-light;
+  background: $color-black-5;
   display: grid;
   grid-template-areas: 'panels';
   grid-template-columns: 1fr;
@@ -119,7 +119,7 @@ $-footerlink-target-size: 44px;
   }
 
   &::after {
-    background: $color-silver-light;
+    background: $color-black-5;
     content: '';
     display: block;
     grid-area: icon;
@@ -297,7 +297,7 @@ $-footerlink-target-size: 44px;
 }
 
 .mmenu__footer {
-  background: $color-silver-light;
+  background: $color-black-5;
   flex-grow: 1;
   padding-bottom: $spacing;
   padding-top: $spacing;
@@ -317,8 +317,9 @@ $-footerlink-target-size: 44px;
   .menu__nolink {
     $-footer-link-font: 'body';
     $-footer-link-vertical-padding: 0.5 * ($-footerlink-target-size - get-line-height($-footer-link-font, true));
-    display: block;
+
     @include font($-footer-link-font);
+    display: block;
     padding-bottom: $-footer-link-vertical-padding;
     padding-left: $spacing;
     padding-right: $spacing;

diff --git a/src/scss/06_components/pages/_news-page.scss b/src/scss/06_components/pages/_news-page.scss
@@ -144,68 +144,6 @@
   }
 }
 
-// News listing using teasers.
-.news-listing--teasers {
-  max-width: $content-width-max;
-
-  .news-listing__item {
-    align-items: flex-start;
-    border-bottom: 1px solid $color-silver-light;
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: $spacing-and-half;
-    position: relative;
-
-    &:first-child {
-      margin-top: $spacing-and-half;
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-  }
-
-  .news-listing__content {
-    width: 100%;
-
-    @include breakpoint($breakpoint-m) {
-      padding-inline-end: $spacing-and-half;
-      width: 75%;
-    }
-  }
-
-  .news-listing__content--with-image {
-    padding-inline-end: $spacing-and-half;
-    width: 75%;
-  }
-
-  .news-listing__img {
-    @include loading-image-background;
-    width: 25%;
-
-    img {
-      display: block;
-      height: auto;
-      width: 100%;
-    }
-  }
-
-  .news-listing__title {
-    @include font('h4');
-  }
-
-  .news-listing__datetime {
-    @include font(small);
-    display: block;
-    margin-top: $spacing-half;
-
-    @include breakpoint($breakpoint-l) {
-      margin-top: $spacing;
-    }
-  }
-}
-
 .news-listing--card-teasers {
   display: grid;
   gap: 0;

diff --git a/src/scss/06_components/pages/_unit.scss b/src/scss/06_components/pages/_unit.scss
@@ -406,7 +406,7 @@
 
 .component--unit-contact-information {
   .component__container {
-    background-color: $color-silver-light;
+    background-color: $color-black-5;
     padding: $spacing-and-half $spacing $spacing-triple;
 
     @include breakpoint($breakpoint-m) {

diff --git a/src/scss/06_components/paragraphs/_content-cards.scss b/src/scss/06_components/paragraphs/_content-cards.scss
@@ -92,7 +92,7 @@ $-card-spacing: $spacing-and-half;
 }
 
 .component--content-cards-grey {
-  background: $color-silver-light;
+  background: $color-black-5;
   display: grid;
   grid-template-columns: [full-width-start] var(--component-gap, #{$spacing}) [content-start] 1fr [content-end] var(--component-gap, #{$spacing}) [full-width-end] ;
   grid-template-rows: [header-start] auto [header-end] auto;

diff --git a/src/scss/06_components/paragraphs/_hearings.scss b/src/scss/06_components/paragraphs/_hearings.scss
@@ -1,6 +1,6 @@
 .component--hearings {
   @include component-side-padding;
-  background: $color-silver-light;
+  background: $color-black-5;
 }
 
 .hearings__count-container {

diff --git a/src/scss/06_components/paragraphs/_hero.scss b/src/scss/06_components/paragraphs/_hero.scss
@@ -103,7 +103,7 @@ $koro-height: 50px;
 
 // Gray first block styles.
 .hero-wrapper.has-first-gray-bg-block {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   margin-bottom: -$spacing-quadruple;
   padding-bottom: $spacing-triple;
 
@@ -112,7 +112,7 @@ $koro-height: 50px;
   }
 
   .hero > .hds-koros {
-    color: $color-silver-light;
+    color: $color-black-5;
   }
 }
 

diff --git a/src/scss/06_components/paragraphs/_ploughing-schedule.scss b/src/scss/06_components/paragraphs/_ploughing-schedule.scss
@@ -1,5 +1,5 @@
 .component--hdbt-search--ploughing-schedule .component__container {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
 }
 
 .components--upper .component--hdbt-search--ploughing-schedule .component__container {

diff --git a/src/scss/06_components/paragraphs/_popular-service-item.scss b/src/scss/06_components/paragraphs/_popular-service-item.scss
@@ -4,7 +4,7 @@ $-service-item-font: 'special.large_link';
 $-service-item-padding: ($wcag-touch-target-size-aaa - get-line-height($-service-item-font, $unremify: true) ) * 0.5;
 
 .popular-service-item {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   margin-bottom: $spacing-and-half;
   padding-bottom: $spacing-double;
   padding-left: $spacing-and-half;

diff --git a/src/scss/06_components/paragraphs/_react-search.scss b/src/scss/06_components/paragraphs/_react-search.scss
@@ -1,5 +1,5 @@
 .component--react-search {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   position: relative;
 }
 

diff --git a/src/scss/06_components/paragraphs/_service-list-search.scss b/src/scss/06_components/paragraphs/_service-list-search.scss
@@ -1,4 +1,4 @@
 .component--service-list-search {
   @include component-side-padding;
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
 }
diff --git a/src/scss/06_components/paragraphs/_target-group-links.scss b/src/scss/06_components/paragraphs/_target-group-links.scss
@@ -15,7 +15,7 @@ $-title-spacing: calc(0.5 * (var(--icon-size) - var(--title-line-height))); // T
   --icon-size: #{$spacing-double};
   --title-line-height: #{get-line-height('h4')};
   grid-column-gap: $spacing-and-half;
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   display: grid;
   grid-template-areas:
     'icon title'

diff --git a/src/scss/06_components/paragraphs/_unit-contact-card.scss b/src/scss/06_components/paragraphs/_unit-contact-card.scss
@@ -1,5 +1,5 @@
 .unit-contact-card {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
   display: flex;
   flex-direction: column;
   gap: $spacing;

diff --git a/src/scss/06_components/paragraphs/_unit-search.scss b/src/scss/06_components/paragraphs/_unit-search.scss
@@ -1,6 +1,6 @@
 .component--unit-search {
   @include component-side-padding;
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
 }
 
 .component--unit-search .hds-checkbox__input {
@@ -9,7 +9,7 @@
 
 // Patch Siteimprove false positive color contrast issue to reduce noise
 .component--unit-search .hds-checkbox__label {
-  background-color: $color-silver-light;
+  background-color: $color-black-5;
 }
 
 // Give the checkboxes white background color. The hds-styles have the checkboxes bg transparent for some reason.