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
wmde · Jan 18, 2024 · e5d930e · e5d930e
1 parent 5fbf186
commit e5d930e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 19 deletions.
diff --git 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
@@ -175,19 +175,19 @@ 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 {
       width: 100%
     }
   }
 
-    .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
@@ -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
@@ -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
@@ -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;
 	}
-}
-
+}