wip

base.scss

@@ -1,24 +1,21 @@
 @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";
@@ -122,5 +119,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";

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 -50px;
 }
 
 // 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;
 }