add custom variables file and replace app.css vars

chukarave · chukarave · commit cc67f86afc4e · 2023-12-21T10:55:29.000+01:00
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -4,6 +4,7 @@
 @import '~wikit-dist/wikit-vue-components-vue3compat.css';
 @import "@wikimedia/codex/dist/codex.style.css";
 @import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+@import '../custom-variables.css';
 @import './link.scss';
 @import './_typography.scss';
 
@@ -22,49 +23,49 @@ body {
 */
 main {
     max-width: 1090px;
-    padding: 0 1rem;
+    padding: 0 var(--dimension-layout-xsmall);
     margin: 0 auto;
 
     & > header {
         display: flex;
         justify-content: space-between;
-        margin: 1.500rem 0;
+        margin: var(--dimension-layout-small) 0;
     }
 
     @media(min-width: $min-width-breakpoint-tablet){
-        padding: 0 1.500rem;
+        padding: 0 var(--dimension-layout-small);
     }
 }
 
 section {
-    margin-bottom: 2.500rem;
+    margin-bottom: var(--dimension-layout-large);
 }
 
 h1, .h1 {
     @include heading-1;
 
-    margin: 1rem 0;
+    margin: var(--dimension-layout-xsmall) 0;
 
     @media (min-width: $min-width-breakpoint-tablet) {
-        margin: 1rem 0;
+        margin: var(--dimension-layout-small) 0;
     }
 }
 
 h4, .h4 {
-    margin: 0.500rem 0;
+    margin: var(--dimension-layout-xxsmall) 0;
     @include heading-4;
 
     @media(min-width: $min-width-breakpoint-tablet){
-        margin: 1rem 0;
+        margin: var(--dimension-layout-xsmall) 0;
     }
 }
 
 h5, .h5 {
-    margin: 0.500rem 0;
+    margin: var(--dimension-layout-xxsmall) 0;
     @include heading-5;
 
     @media(min-width: $min-width-breakpoint-tablet){
-        margin: 1rem 0;
+        margin: var(--dimension-layout-xsmall) 0;
     }
 }
 
@@ -101,7 +102,7 @@ li {
 
 // this ensures that there will be a space if there is more than one message
 #message-section .cdx-message:not(:nth-child(1)) {
-    margin-top: 1rem;
+    margin-top: var(--dimension-layout-xsmall);
 }
 
 /**
@@ -122,16 +123,16 @@ li {
         display: flex;
 
         .username {
-            margin-inline-end: 1.500em;
+            margin-inline-end: var(--dimension-spacing-xlarge);
         }
 
         .icon-user {
-            margin-inline-end: 0.500em;
+            margin-inline-end: var(--dimension-spacing-small);
             vertical-align: middle;
         }
 
         @media (max-width: $max-width-breakpoint-tablet) {
-            margin-bottom: 1rem;
+            margin-bottom: var(--dimension-layout-xsmall);
         }
     }
 }
@@ -326,7 +327,7 @@ dl.import-meta .download-csv {
     }
 
     &-icon {
-        margin-inline-end: 0.500em;
+        margin-inline-end: var(--dimension-spacing-small);
         vertical-align: middle;
     }
 }
@@ -386,7 +387,7 @@ dl.import-meta .download-csv {
     }
 
     .button-group {
-        margin-block-end: 1em;
+        margin-block-end: var(--dimension-spacing-large);
     }
 
     .button {
diff --git a/resources/sass/noscript.scss b/resources/sass/noscript.scss
@@ -1,47 +1,42 @@
 @import '~@wikimedia/codex/dist/codex.style.css';
 @import '~@wikimedia/codex/dist/codex.style-rtl.css';
 @import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
-
-$spacing-layout-50: 0.5rem;
-$spacing-layout-100: 1rem;
-$spacing-layout-150: 1.5rem;
-$spacing-layout-200: 2rem;
-$spacing-layout-900: 9rem;
+@import '../custom-variables.css';
 
 main {
     font-size: $font-size-medium;
     line-height: $line-height-medium;
     font-family: $font-family-system-sans;
     font-weight: $font-weight-normal;
     color: $color-base;
-    padding: 10vw $spacing-layout-150 $spacing-layout-150 $spacing-layout-150;
+    padding: 10vw var(----dimension-layout-small) var(----dimension-layout-small) var(----dimension-layout-small) var(----dimension-layout-small);
     max-width: 680px;
 
     @media (min-width: $min-width-breakpoint-tablet) {
-        padding: 10vw $spacing-layout-200 $spacing-layout-200 $spacing-layout-200;
+        padding: 10vw var(--dimension-layout-medium) var(--dimension-layout-medium) var(--dimension-layout-medium);
     }
     @media (min-width: $min-width-breakpoint-desktop) {
-        padding: $spacing-layout-900 0 $spacing-layout-150 0;
+        padding: 9rem 0 var(----dimension-layout-small) 0;
     }
     p {
         margin-block-end: 0;
     }
     .h5 {
-        margin: $spacing-layout-150 0;
+        margin: var(----dimension-layout-small) 0;
         font-size: $font-size-medium;
         line-height: $line-height-xxx-small;
         font-family: $font-family-system-sans;
         font-weight: $font-weight-bold;
         color: $color-emphasized;
     }
     .message-wrapper {
-        padding: $spacing-layout-50 0;
+        padding: var(--dimension-layout-xxsmall) 0;
         @media (min-width: $min-width-breakpoint-tablet) {
-            padding: $spacing-layout-100 0;
+            padding: var(----dimension-layout-xsmall) 0;
         }
     }
     .description {
-        padding-block-end: $spacing-layout-150;
+        padding-block-end: var(----dimension-layout-small);
     }
     header {
         .logo-link {

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`@import '~wikit-dist/wikit-vue-components-vue3compat.css';`
`5`	`5`	`@import "@wikimedia/codex/dist/codex.style.css";`
`6`	`6`	`@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";`
	`7`	`+@import '../custom-variables.css';`
`7`	`8`	`@import './link.scss';`
`8`	`9`	`@import './_typography.scss';`
`9`	`10`
`@@ -22,49 +23,49 @@ body {`
`22`	`23`	`*/`
`23`	`24`	`main {`
`24`	`25`	`max-width: 1090px;`
`25`		`- padding: 0 1rem;`
	`26`	`+ padding: 0 var(--dimension-layout-xsmall);`
`26`	`27`	`margin: 0 auto;`
`27`	`28`
`28`	`29`	`& > header {`
`29`	`30`	`display: flex;`
`30`	`31`	`justify-content: space-between;`
`31`		`- margin: 1.500rem 0;`
	`32`	`+ margin: var(--dimension-layout-small) 0;`
`32`	`33`	`}`
`33`	`34`
`34`	`35`	`@media(min-width: $min-width-breakpoint-tablet){`
`35`		`- padding: 0 1.500rem;`
	`36`	`+ padding: 0 var(--dimension-layout-small);`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`section {`
`40`		`- margin-bottom: 2.500rem;`
	`41`	`+ margin-bottom: var(--dimension-layout-large);`
`41`	`42`	`}`
`42`	`43`
`43`	`44`	`h1, .h1 {`
`44`	`45`	`@include heading-1;`
`45`	`46`
`46`		`- margin: 1rem 0;`
	`47`	`+ margin: var(--dimension-layout-xsmall) 0;`
`47`	`48`
`48`	`49`	`@media (min-width: $min-width-breakpoint-tablet) {`
`49`		`- margin: 1rem 0;`
	`50`	`+ margin: var(--dimension-layout-small) 0;`
`50`	`51`	`}`
`51`	`52`	`}`
`52`	`53`
`53`	`54`	`h4, .h4 {`
`54`		`- margin: 0.500rem 0;`
	`55`	`+ margin: var(--dimension-layout-xxsmall) 0;`
`55`	`56`	`@include heading-4;`
`56`	`57`
`57`	`58`	`@media(min-width: $min-width-breakpoint-tablet){`
`58`		`- margin: 1rem 0;`
	`59`	`+ margin: var(--dimension-layout-xsmall) 0;`
`59`	`60`	`}`
`60`	`61`	`}`
`61`	`62`
`62`	`63`	`h5, .h5 {`
`63`		`- margin: 0.500rem 0;`
	`64`	`+ margin: var(--dimension-layout-xxsmall) 0;`
`64`	`65`	`@include heading-5;`
`65`	`66`
`66`	`67`	`@media(min-width: $min-width-breakpoint-tablet){`
`67`		`- margin: 1rem 0;`
	`68`	`+ margin: var(--dimension-layout-xsmall) 0;`
`68`	`69`	`}`
`69`	`70`	`}`
`70`	`71`
`@@ -101,7 +102,7 @@ li {`
`101`	`102`
`102`	`103`	`// this ensures that there will be a space if there is more than one message`
`103`	`104`	`#message-section .cdx-message:not(:nth-child(1)) {`
`104`		`- margin-top: 1rem;`
	`105`	`+ margin-top: var(--dimension-layout-xsmall);`
`105`	`106`	`}`
`106`	`107`
`107`	`108`	`/**`
`@@ -122,16 +123,16 @@ li {`
`122`	`123`	`display: flex;`
`123`	`124`
`124`	`125`	`.username {`
`125`		`- margin-inline-end: 1.500em;`
	`126`	`+ margin-inline-end: var(--dimension-spacing-xlarge);`
`126`	`127`	`}`
`127`	`128`
`128`	`129`	`.icon-user {`
`129`		`- margin-inline-end: 0.500em;`
	`130`	`+ margin-inline-end: var(--dimension-spacing-small);`
`130`	`131`	`vertical-align: middle;`
`131`	`132`	`}`
`132`	`133`
`133`	`134`	`@media (max-width: $max-width-breakpoint-tablet) {`
`134`		`- margin-bottom: 1rem;`
	`135`	`+ margin-bottom: var(--dimension-layout-xsmall);`
`135`	`136`	`}`
`136`	`137`	`}`
`137`	`138`	`}`
`@@ -326,7 +327,7 @@ dl.import-meta .download-csv {`
`326`	`327`	`}`
`327`	`328`
`328`	`329`	`&-icon {`
`329`		`- margin-inline-end: 0.500em;`
	`330`	`+ margin-inline-end: var(--dimension-spacing-small);`
`330`	`331`	`vertical-align: middle;`
`331`	`332`	`}`
`332`	`333`	`}`
`@@ -386,7 +387,7 @@ dl.import-meta .download-csv {`
`386`	`387`	`}`
`387`	`388`
`388`	`389`	`.button-group {`
`389`		`- margin-block-end: 1em;`
	`390`	`+ margin-block-end: var(--dimension-spacing-large);`
`390`	`391`	`}`
`391`	`392`
`392`	`393`	`.button {`