From e5d930e6abb1655f1611fd7eb95802afa2230c40 Mon Sep 17 00:00:00 2001
From: Noa Rave <noa.rave@wikimedia.de>
Date: Thu, 18 Jan 2024 13:10:07 +0100
Subject: [PATCH] Replace tokens in remaining components (#823)

* 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

* Replace tokens in remaining components

* add and use new mixin

* use mixin for all buttons

* removing new mixin in order to include in PR #792 instead

* don't apply button mixin to icon (also make it bold)

* remove redundant wikit reference

* get rid of trailing spaces

* more white space removal

* remove extra line
---
 resources/js/Components/AuthWidget.vue         |  2 --
 resources/js/Components/MismatchRow.vue        |  6 +++---
 resources/js/Components/WikidataToolFooter.vue |  8 ++++----
 resources/sass/_typography.scss                |  2 +-
 resources/sass/app.scss                        | 16 +++++++---------
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/resources/js/Components/AuthWidget.vue b/resources/js/Components/AuthWidget.vue
index 41723fbb..fd955119 100644
--- a/resources/js/Components/AuthWidget.vue
+++ b/resources/js/Components/AuthWidget.vue
@@ -20,13 +20,11 @@ defineProps<{ user: User | null}>();
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
 @import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
 @import '../../css/custom-variables.css';
 
 .auth-widget {
     display: flex;
-    color: $color-base-50;
     justify-content: space-between;
     gap: var(--dimension-spacing-xlarge);
     align-items: center;
diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
index b5b3cfcf..5250117d 100644
--- a/resources/js/Components/MismatchRow.vue
+++ b/resources/js/Components/MismatchRow.vue
@@ -175,7 +175,7 @@ function showDialog(e: Event) {
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
 
   a {
     break-line-link {
@@ -183,11 +183,11 @@ function showDialog(e: Event) {
     }
   }
 
-    .wikit-Button.full-description-button {
+ .full-description-button {
       padding: 0px 2px;
       font-weight: 400;
     }
     .empty-value {
-      color: $font-color-disabled;
+      color: $color-disabled;
     }
 </style>
diff --git a/resources/js/Components/WikidataToolFooter.vue b/resources/js/Components/WikidataToolFooter.vue
index b7a7a950..bece310e 100644
--- a/resources/js/Components/WikidataToolFooter.vue
+++ b/resources/js/Components/WikidataToolFooter.vue
@@ -52,11 +52,11 @@ withDefaults(defineProps<{
 </script>
 
 <style lang="scss">
-@import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
 @import '../../css/custom-variables.css';
 
 .footer-container {
-    background-color: $color-base-90;
+    background-color: $background-color-interactive-subtle;
 
     & > footer {
         margin: auto;
@@ -66,7 +66,7 @@ withDefaults(defineProps<{
 
         .h5 {
             margin: 0 0 var(--dimension-layout-xsmall) 0;
-            font-size: $font-size-style-body-s;
+            font-size: $font-size-small;
         }
 
         section {
@@ -79,7 +79,7 @@ withDefaults(defineProps<{
 
         p {
             margin-block-end: 0;
-            font-size: $font-size-style-body-s;
+            font-size: $font-size-small;
         }
 
         p + p {
diff --git a/resources/sass/_typography.scss b/resources/sass/_typography.scss
index e1411205..39a04633 100644
--- a/resources/sass/_typography.scss
+++ b/resources/sass/_typography.scss
@@ -9,7 +9,6 @@
         outline-width: 1px;
         outline-color: gray;
     }
-
 }
 
 @mixin body-M {
@@ -25,6 +24,7 @@
     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){
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 205fc9db..4762de2e 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -344,6 +344,12 @@ dl.import-meta .download-csv {
     }
 }
 
+// TODO: This is a temporary fix until issue https://phabricator.wikimedia.org/T326900
+// is marked as resolved.
+.cdx-button {
+    @include ui-text-M($font-weight-bold);
+}
+
 .svg {
     &-white-fill {
         filter: invert(1);
@@ -395,12 +401,6 @@ dl.import-meta .download-csv {
     }
 }
 
-// TODO: This is a temporary fix until issue https://phabricator.wikimedia.org/T326900
-// is marked as resolved.
-.cdx-button .cdx-icon {
-    vertical-align: text-top;
-}
-
 .cdx-dialog {
 	header {
 		color: $color-emphasized;
@@ -410,12 +410,10 @@ dl.import-meta .download-csv {
 	}
 }
 
-
 .cdx-select-vue {
 	width: 100%;
 	&__handle {
 		min-width: unset;
 		max-width: 256px;
 	}
-}
-
+}
\ No newline at end of file