Re-factor and streamline the SCSS basics.

.github/workflows/lint.yml

@@ -7,7 +7,8 @@ on:
       - main
 
 jobs:
-  css_stylelint:
+  css-lint:
+    name: CSS Linter
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -16,10 +17,11 @@ jobs:
           node-version-file: '.nvmrc'
       - run: yarn install --frozen-lockfile
 
-      - name: Run Stylelint
-        run: yarn css:stylelint -- -f github
+      - name: Run css:lint
+        run: yarn css:lint
 
-  js_eslint:
+  js-lint:
+    name: JS Linter
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -28,49 +30,19 @@ jobs:
           node-version-file: '.nvmrc'
       - run: yarn install --frozen-lockfile
 
-      - name: Run eslint
-        run: yarn js:eslint
+      - name: Run js:lint
+        run: yarn js:lint
 
-  css_prettier:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-
-      - run: yarn install --frozen-lockfile
-
-      - name: Run Prettier
-        run: yarn css:prettier -- --check
-
-  js_prettier:
+  markdown-linkt:
+    name: Markdown Linter
+    if: '!github.event.deleted'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-
       - run: yarn install --frozen-lockfile
 
-      - name: Run Prettier
-        run: yarn js:prettier -- --check
-
-  markdownlint:
-    name: Lint markdown
-    if: '!github.event.deleted'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
-      - name: Install Dependencies
-        run: yarn install
-      - name: Install problem matcher
-        uses: xt0rted/markdownlint-problem-matcher@v2
-      - name: Lint markdown
-        run: yarn lint:markdown
+      - name: Run markdown:lint
+        run: yarn markdown:lint

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,48 @@
+# 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 and modifiers
+
+Sometimes you'll want to add variants to CSS-only classes. This can be done
+using **modifier 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`.
+
+## 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**

package.json

@@ -16,14 +16,16 @@
     "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw",
     "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'",
     "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw",
-    "css:build": "sass base.scss:src/styles/css/base.css",
+    "css:build": "sass base.scss:src/styles/css/base.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
+    "markdown:lint": "markdownlint-cli2",
+    "markdown:format": "markdownlint-cli2-fix",
     "watch": "concurrently 'yarn:js:lint:watch' 'yarn:css:lint:watch'",
-    "dev": "concurrently --raw \"yarn storybook\" \"yarn css:watch\" \"yarn watch\"",
+    "dev": "concurrently --raw 'yarn storybook' 'yarn css:watch' 'yarn watch'",
     "chromatic": "npx chromatic --exit-zero-on-changes",
-    "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint'",
-    "lint:markdown": "markdownlint-cli2",
-    "lint:markdown:fix": "markdownlint-cli2-fix"
+    "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint' 'yarn:markdown:lint'",
+    "format": "concurrently 'yarn:js:format' 'yarn:css:format' 'yarn:markdown:format'"
+
   },
   "browserslist": {
     "production": [

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

@@ -2,40 +2,40 @@
   width: 100%;
   padding: 40px $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;
   }
 
   &__title {
     margin-bottom: $s-xl;
 
-    @include breakpoint-m {
+    @include media-query__medium {
       margin-bottom: 48px;
     }
   }
 
   &__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,27 +81,27 @@
   &__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;
   }
 }
 
@@ -113,26 +113,26 @@
   &__input {
     width: 100%;
 
-    @include breakpoint-m {
+    @include media-query__medium {
       padding-right: $s-4xl;
       margin-bottom: 48px;
     }
   }
 
   &__preview {
     padding: $s-xl 48px $s-xl 64px;
-    background-color: $c-global-secondary;
+    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 {
+    @include media-query__large {
       padding: $s-xl 48px $s-xl 64px;
       width: 420px;
       min-width: 420px;
@@ -144,7 +144,7 @@
       width: 100%;
       margin-bottom: 48px;
 
-      @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;
 }