replace variables in components and pages

chukarave · hasanakg · commit 45b357bd4bbf · 2024-01-12T10:21:49.000+01:00
diff --git a/resources/js/Components/AuthWidget.vue b/resources/js/Components/AuthWidget.vue
@@ -22,16 +22,17 @@ defineProps<{ user: User | null}>();
 <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: $dimension-spacing-xlarge;
+    gap: var(--dimension-spacing-xlarge);
     align-items: center;
 
     .icon-user {
-        margin-inline-end: $dimension-spacing-small;
+        margin-inline-end: var(--dimension-spacing-small);
         vertical-align: middle;
     }
 
diff --git a/resources/js/Components/WikidataToolFooter.vue b/resources/js/Components/WikidataToolFooter.vue
@@ -53,18 +53,19 @@ withDefaults(defineProps<{
 
 <style lang="scss">
 @import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import '../../css/custom-variables.css';
 
 .footer-container {
     background-color: $color-base-90;
 
     & > footer {
         margin: auto;
-        padding: $dimension-layout-xsmall;
+        padding: var(--dimension-layout-xsmall);
         display: flex;
         flex-direction: column;
 
         .h5 {
-            margin: 0 0 $dimension-layout-xsmall 0;
+            margin: 0 0 var(--dimension-layout-xsmall) 0;
             font-size: $font-size-style-body-s;
         }
 
@@ -73,7 +74,7 @@ withDefaults(defineProps<{
         }
 
         section + section {
-            margin-block-start: $dimension-layout-medium;
+            margin-block-start: var(--dimension-layout-medium);
         }
 
         p {
@@ -82,15 +83,15 @@ withDefaults(defineProps<{
         }
 
         p + p {
-            margin-block-start: $dimension-layout-xxsmall;
+            margin-block-start: var(--dimension-layout-xxsmall);
         }
 
         @media (min-width: $width-breakpoint-tablet) {
             flex-direction: row;
-            padding: $dimension-layout-small;
+            padding: var(--dimension-layout-small);
 
             section {
-                margin-inline-end: $dimension-layout-large;
+                margin-inline-end: var(--dimension-layout-large);
             }
 
             section + section {
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -155,6 +155,7 @@ function showRandom(): void{
 
 <style lang="scss">
 @import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import '../../css/custom-variables.css';
 
 #querying-section .heading {
     display: flex;
@@ -184,14 +185,14 @@ function showRandom(): void{
     /**
     * Layout
     */
-    padding: $dimension-spacing-large;
-    margin: $dimension-layout-xsmall 0;
+    padding: var(--dimension-spacing-large);
+    margin: var(--dimension-layout-xsmall) 0;
 
     // Any direct decendent of this form that has a predecessor element will
     // get a top margin, this creates the even gutter between elements or "stack"
     // See https://every-layout.dev/layouts/stack/#the-solution
     & > * + * {
-        margin-top: $dimension-spacing-large;
+        margin-top: var(--dimension-spacing-large);
     }
 
     .form-buttons {
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -340,12 +340,13 @@ function _handleConfirmation(){
 
 <style lang="scss">
 @import '~@wmde/wikit-tokens/dist/_variables.scss';
+@import '../../css/custom-variables.css';
 
 .back-button {
     // to match the first heading on the home page
-    margin-top: $dimension-layout-xsmall;
+    margin-top: var(--dimension-layout-xsmall);
     // to avoid visual grouping with .description-section
-    margin-bottom: $dimension-layout-xsmall;
+    margin-bottom: var(--dimension-layout-xsmall);
 }
 
 h2 {
@@ -375,15 +376,15 @@ h2 {
 	}
 }
 .mismatches-form-footer {
-    margin-top: $dimension-layout-xsmall;
+    margin-top: var(--dimension-layout-xsmall);
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
     align-items: flex-start;
-    gap: $dimension-layout-xsmall;
+    gap: var(--dimension-layout-xsmall);
     // calculate the footer height to reserve space for
     // messages with two lines (1.5 line height plus padding)
-    min-height: calc(2*1.5em + 2*$dimension-spacing-large);
+    min-height: calc(2*1.5em + 2*var(--dimension-spacing-large));
 
     .form-success-message {
         max-width: 705px;
