Re-factor and streamline the SCSS basics.

This is a major overhaul and refactoring of all the basics.
It moves shared items out of the individual stories, and into
mixins, variables and other base files.
One of the major things is that it streamlines typography:
It introduces a variables.typography.scss file, that defines all
the typographies, and a @include typography($VARIABLE) to use them.
This way, we can keep track of typographies, and have a single place
to look when we make new modules.

This way, we also have an easy way of quality-secure against figma.
All of this is the first step. There is still a lot of stuff that
needs to be fixed.

To begin with, I've made sure that all existing classes still work.
E.g. '.text-h1' will still compile to the same, but in SCSS we cant
use %text-h1 anymore.
A future step is to look through all the stuff I've marked as
'legacy', and tweak/remove/edit the classes throughout dpl-cms, react
and other places.

base.scss

@@ -1,24 +1,18 @@
 @import "./src/styles/scss/reset";
-@import "./src/stories/Library/colors/color-variables";
 @import "./src/styles/scss/skeleton";
-@import "./src/styles/scss/container";
+@import "./src/styles/scss/tools";
 
-// The imports below are not advised to be moved around, because
-// they cross-reference various defined variables between each other.
+// Legacy - utility classes and other stuff that needs to be cleaned later.
+@import "./src/styles/scss/legacy";
 
 // Library
-@import "./src/stories/Library/breakpoints/breakpoints";
-@import "./src/stories/Library/typography/typography";
 @import "./src/stories/Library/links/links";
 @import "./src/stories/Library/link-filters/link-filters";
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
-@import "./src/stories/Library/layout/spacing";
-@import "./src/stories/Library/layout/z-index";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";
-@import "./src/stories/Library/pagefold/pagefold";
 @import "./src/stories/Library/dropdown/dropdown";
 @import "./src/stories/Library/breadcrumb/breadcrumb";
 @import "./src/stories/Library/status-label/status-label";
@@ -123,5 +117,3 @@
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
-// Should be last to make it easier to overwrite.
-@import "./src/stories/Library/colors/color-classes";

docs/scss.md

@@ -0,0 +1,65 @@
+# SCSS strategy
+
+In December 2023, we have aimed to streamline the way we write SCSS.
+Some of these rules have not been applied on previous code, but moving forward,
+this is what we aim to do.
+
+## BEM naming convention
+
+### Examples of do's and dont's
+
+Assuming we have a Counter block:
+- Styling must be placed in a correspondingly named file `counter.scss`
+- `.counter__title` ✅
+- `&__title` ❌ (`&__` should be avoided, to avoid massive indention.)
+- `.counter-title` ❌ (Must start with `.FILE-NAME__`)
+- `.counter__title__text` ❌ (Only one level)
+
+#### Variants, modifiers and JS
+
+Sometimes you may want to target stuff using JS. This should be done with a
+specific `.js-XXX` class. That way, it is easier to manage when refactoring,
+and to signal that altering this class may have "invisible" consequences.
+
+Sometimes, you'll want to send data via JS to CSS. This is done using
+modifier classes - A snake-case class, usually starting with verbs - e.g.
+`.is-active`, `.has-many-items`
+
+Sometimes you'll want to add variants to CSS-only classes. This can be done
+using **variant classes** - e.g. `.counter--large`, `.counter__title--large`.
+**These classes must not be set alone.** E.g. `.counter__title--large` must not
+exist on an element without also having `.counter__title`.
+
+A quick guide:
+
+|                  | JS | CSS |
+|------------------|----|-----|
+| .js-counter      | 🟢  | 🔴   |
+| .is-active       | 🟢  | 🟢   |
+| .has-numbers     | 🟢  | 🟢   |
+| .counter         | 🔴  | 🟢   |
+| .counter__title  | 🔴  | 🟢   |
+| .counter--active | 🔴  | 🟢   |
+
+## Mixins, placeholder and variables
+
+Shared tooling is saved in [src/styles/scss/tools](../src/styles/scss/tools),
+NOT in individual stories.
+
+### Typography
+
+Typography is defined in
+[src/styles/scss/tools/variables.typography.scss](../src/styles/scss/tools/variables.typography.scss).
+These variables, all starting with `$typo__`, can be used, using a mixin,
+`@include typography($typo__h2);` in stories.
+Generally speaking, font styling should be avoided directly in stories, rather
+adding new variants in the `variables.typography.scss` file.
+This way, we can better keep track of what is available, and avoid duplicate
+styling in the future.
+
+## Legacy classes
+
+In the future, we want to apply these rules to old code too. Until then,
+the old classes are supported using the files in [src/styles/scss/legacy](../src/styles/scss/legacy).
+
+These classes should **not be used in new components**

src/stories/Blocks/advanced-search/advanced-search.scss

@@ -1,41 +1,41 @@
 .advanced-search {
   width: 100%;
-  padding: 40px $s-md;
+  padding: $s-odd-40 $s-md;
 
-  background-color: $c-global-primary;
+  background-color: $color__global-primary;
 
-  @include breakpoint-m {
+  @include media-query__medium {
     width: 100%;
-    padding: $s-4xl 157px 64px 157px;
+    padding: $s-4xl $s-odd-157 $s-odd-64 $s-odd-157;
   }
 
   &__title {
     margin-bottom: $s-xl;
 
-    @include breakpoint-m {
-      margin-bottom: 48px;
+    @include media-query__medium {
+      margin-bottom: $s-odd-48;
     }
   }
 
   &__clauses {
-    @extend %text-button-placeholder;
+    @include typography($typo__button);
     display: flex;
     flex-direction: row;
     align-items: center;
     margin: 0 0 $s-md $s-xl;
 
-    @include breakpoint-m {
+    @include media-query__medium {
       margin: 0 0 $s-lg $s-xl;
     }
   }
 
   &__clause {
     display: inline-block;
     margin-right: $s-xl;
-    color: $c-text-primary-black;
+    color: $color__text-primary-black;
 
     &.advanced-search__clause--grey {
-      color: $c-global-tertiary-2;
+      color: $color__global-tertiary-2;
     }
   }
 
@@ -51,7 +51,7 @@
   &__filter {
     width: 100%;
 
-    @include breakpoint-s {
+    @include media-query__small {
       width: 260px;
       margin-right: $s-lg;
     }
@@ -63,7 +63,7 @@
     flex-direction: column;
     justify-content: flex-end;
 
-    @include breakpoint-s {
+    @include media-query__small {
       flex-direction: row;
     }
   }
@@ -72,7 +72,7 @@
     align-self: center;
     margin-bottom: $s-lg;
 
-    @include breakpoint-s {
+    @include media-query__small {
       align-self: center;
       margin-bottom: 0;
     }
@@ -81,59 +81,59 @@
   &__search-button {
     width: 100%;
 
-    @include breakpoint-s {
+    @include media-query__small {
       margin-left: $s-lg;
       width: 266px;
     }
   }
 
   &__divider {
     height: 1px;
-    background-color: $c-global-tertiary-1;
+    background-color: $color__global-tertiary-1;
     margin: $s-2xl 0;
     width: 100%;
   }
 
   &__cql-input {
-    @extend %text-body-medium-regular-placeholder;
-    border: solid 1px $c-global-tertiary-1;
+    @include typography($typo__body-placeholder);
+    border: solid 1px $color__global-tertiary-1;
     width: 100%;
     margin-bottom: 46px;
     padding: $s-md;
     resize: none;
-    background-color: $c-global-primary;
+    background-color: $color__global-primary;
   }
 }
 
 .input-and-preview {
   display: flex;
   flex-direction: row;
-  margin-bottom: 64px;
+  margin-bottom: $s-odd-64;
 
   &__input {
     width: 100%;
 
-    @include breakpoint-m {
+    @include media-query__medium {
       padding-right: $s-4xl;
-      margin-bottom: 48px;
+      margin-bottom: $s-odd-48;
     }
   }
 
   &__preview {
-    padding: $s-xl 48px $s-xl 64px;
-    background-color: $c-global-secondary;
+    padding: $s-xl $s-odd-48 $s-xl $s-odd-64;
+    background-color: $color__global-secondary;
     flex-direction: column;
     align-self: flex-start;
     display: none;
 
-    @include breakpoint-m {
+    @include media-query__medium {
       display: flex;
       width: 300px;
       min-width: 300px;
       padding: $s-2xl $s-xl;
     }
-    @include breakpoint-l {
-      padding: $s-xl 48px $s-xl 64px;
+    @include media-query__large {
+      padding: $s-xl $s-odd-48 $s-xl $s-odd-64;
       width: 420px;
       min-width: 420px;
       display: flex;
@@ -142,9 +142,9 @@
     &--mobile {
       display: flex;
       width: 100%;
-      margin-bottom: 48px;
+      margin-bottom: $s-odd-48;
 
-      @include breakpoint-m {
+      @include media-query__medium {
         display: none;
       }
     }

src/stories/Blocks/article/article.scss

@@ -1,3 +1,3 @@
 .article {
-  background-color: $c-global-primary;
+  background-color: $color__global-primary;
 }

src/stories/Blocks/autosuggest/autosuggest.scss

@@ -1,6 +1,6 @@
 .autosuggest {
-  background-color: $c-global-primary;
-  outline: 1px solid $c-global-tertiary-1;
+  background-color: $color__global-primary;
+  outline: 1px solid $color__global-tertiary-1;
   position: absolute;
   left: 0;
   right: 0;

src/stories/Blocks/event-page/event-page.scss

@@ -1,3 +1,3 @@
 .event-page {
-  background-color: $c-global-primary;
+  background-color: $color__global-primary;
 }

src/stories/Blocks/footer/footer.scss

@@ -7,7 +7,7 @@
     display: none;
   }
 
-  @include breakpoint-s {
+  @include media-query__small {
     .footer__mobile {
       display: none;
     }
@@ -37,10 +37,10 @@
   }
 
   .internal-pagefold-parent {
-    background-color: $c-global-secondary;
+    background-color: $color__global-secondary;
 
-    @include breakpoint-m {
-      padding: 56px 100px 24px;
+    @include media-query__medium {
+      padding: $s-odd-56 $s-5xl $s-lg;
     }
   }
 }
@@ -56,15 +56,15 @@
   width: 82px;
 
   .dropdown__select {
-    background-color: $c-global-secondary;
-    height: 32px;
+    background-color: $color__global-secondary;
+    height: $s-xl;
     padding: 0 12px;
     min-width: 82px;
   }
 
   .dropdown__arrows {
-    height: 32px;
-    width: 32px;
+    height: $s-xl;
+    width: $s-xl;
   }
 }
 
@@ -78,16 +78,16 @@
   display: flex;
 
   li {
-    padding-bottom: 16px;
+    padding-bottom: $s-md;
   }
 
-  @include breakpoint-s {
+  @include media-query__small {
     li {
       padding-bottom: 0;
     }
 
     a {
-      padding-right: 24px;
+      padding-right: $s-lg;
     }
 
     a:last-child {
@@ -100,33 +100,33 @@
   display: flex;
 
   a {
-    padding-right: 24px;
+    padding-right: $s-lg;
   }
 }
 
 // Separator
 .footer__separator {
-  border-bottom: 1px solid $c-global-tertiary-1;
-  margin: #{$s-24}px 0;
+  border-bottom: 1px solid $color__global-tertiary-1;
+  margin: $s-lg 0;
 }
 
 // Separator mobile tweaks
 .footer__mobile .footer__separator {
-  margin: #{$s-24}px -50px;
+  margin: $s-lg (-$s-odd-50);
 }
 
 // Link tweaks
 .footer__column-link {
-  margin-top: #{$s-16}px;
+  margin-top: $s-md;
 }
 
 .footer__site-info-link {
   text-decoration: none;
-  @extend %text-links-placeholder;
+  @include typography($typo__links);
 }
 
 .footer__column-phone {
-  color: $c-text-primary-black;
+  color: $color__text-primary-black;
   text-decoration: none;
 }