Replace tokens in pages (#800)

* import codex tokens in _typography.scss

* replace tokens for `Home.vue`

* replace tokens on

* remove wikit tokens import from

* add footer section titles style

* replace all wikit variables in app.scss and _typography.scss

* include new body mixins

* fix faulty variable name

* replace dimension-layout tokens with temporary explicit values

* replace dimension-spacing tokens with temporary explicit values

* only include one body style mixin in

* make tablet breakpoints into mobile breakpoints

* replace all wikit variables in app.scss and _typography.scss

* include new body mixins

* fix faulty variable name

* replace dimension-layout tokens with temporary explicit values

* replace dimension-spacing tokens with temporary explicit values

* only include one body style mixin in

* add custom variables file and replace app.css vars

* add custon variables css file and adjust path

* replace variables in components and pages

* fix incorrect/redundant values

* fix brackets removed unintentionally

resources/js/Pages/Home.vue

@@ -154,9 +154,13 @@ function showRandom(): void{
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import '../../sass/_typography.scss';
 @import '../../css/custom-variables.css';
 
+#about-description {
+    @include body-M
+}
+
 #querying-section .heading {
     display: flex;
     justify-content: space-between;
@@ -172,14 +176,14 @@ function showRandom(): void{
     /**
     * Colors
     */
-    background-color: $background-color-neutral-default;
+    background-color: $background-color-interactive-subtle;
 
     /**
     * Border
     */
     border-style: $border-style-base;
-    border-width: $border-width-thin;
-    border-color: $border-color-base-subtle;
+    border-width: $border-width-base;
+    border-color: $border-color-subtle;
     border-radius: $border-radius-base;
 
     /**

resources/js/Pages/Layout.vue

@@ -166,7 +166,8 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '../../sass/_typography.scss';
 
 #app {
     box-sizing: border-box;
@@ -185,7 +186,7 @@ onBeforeUnmount(() => {
         width: 268px;
         height: 24px;
 
-        @media (min-width: $width-breakpoint-tablet) {
+        @media (min-width: $min-width-breakpoint-tablet) {
             background-image: url('/images/mismatch-finder-logo.svg');
             width: 384px;
             height: 24px;
@@ -207,8 +208,7 @@ onBeforeUnmount(() => {
         gap: 1.5rem;
 
         .logo-link {
-            outline: none;
-            @media (min-width: $width-breakpoint-tablet) {
+            @media (min-width: $min-width-breakpoint-tablet) {
                 width: auto;
             }
         }
@@ -225,7 +225,7 @@ onBeforeUnmount(() => {
         }
     }
 
-    @media (min-width: $width-breakpoint-tablet) {
+    @media (min-width: $min-width-breakpoint-tablet) {
         main>header {
             flex-direction: row;
             flex-wrap: wrap;
@@ -237,5 +237,10 @@ onBeforeUnmount(() => {
             }
         }
     }
+
+    .footer-title {
+        @include body-S;
+        font-weight: $font-weight-bold;
+    }
 }
 </style>

resources/js/Pages/Results.vue

@@ -339,7 +339,6 @@ function _handleConfirmation(){
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
 @import '../../css/custom-variables.css';
 
 .back-button {

resources/sass/_typography.scss

@@ -1,3 +1,17 @@
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+
+@mixin link {
+    color: $font-color-progressive;
+    text-decoration: none;
+
+    &:focus-visible { // for chrome
+        outline: dotted;
+        outline-width: 1px;
+        outline-color: gray;
+    }
+
+}
+
 @mixin body-M {
     font-family: $font-family-system-sans;
     font-size: $font-size-medium;
@@ -11,7 +25,6 @@
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
     line-height: $line-height-medium;
-    color: $color-base;
 }
 
 @mixin ui-text-M ($font-weight: $font-weight-normal){

resources/sass/app.scss

@@ -42,7 +42,6 @@ section {
 
 h1, .h1 {
     @include heading-1;
-
     margin: var(--dimension-layout-xsmall) 0;
 
     @media (min-width: $min-width-breakpoint-tablet) {