Skip to content

Commit fe33887

Browse files
chukaravechukarave
authored
Create a reusable custom variables file and use it for mismatch finder (#794)
* 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
1 parent 608f30a commit fe33887

File tree

7 files changed

+64
-45
lines changed

7 files changed

+64
-45
lines changed

‎resources/css/custom-variables.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:root {
2+
/* spacing */
3+
--dimension-spacing-none: 0em;
4+
--dimension-spacing-xxsmall: 0.125em;
5+
--dimension-spacing-xsmall: 0.25em;
6+
--dimension-spacing-small: 0.5em;
7+
--dimension-spacing-medium: 0.75em;
8+
--dimension-spacing-large: 1em;
9+
--dimension-spacing-xlarge: 1.5em;
10+
--dimension-spacing-xxlarge: 2em;
11+
12+
/*layout */
13+
--dimension-layout-xxsmall: 0.5rem;
14+
--dimension-layout-xsmall: 1rem;
15+
--dimension-layout-small: 1.5rem;
16+
--dimension-layout-medium: 2rem;
17+
--dimension-layout-large: 2.5rem;
18+
}

‎resources/js/Components/AuthWidget.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,17 @@ defineProps<{ user: User | null}>();
2222
<style lang="scss">
2323
@import '~@wmde/wikit-tokens/dist/_variables.scss';
2424
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
25+
@import '../../css/custom-variables.css';
2526
2627
.auth-widget {
2728
display: flex;
2829
color: $color-base-50;
2930
justify-content: space-between;
30-
gap: $dimension-spacing-xlarge;
31+
gap: var(--dimension-spacing-xlarge);
32+
align-items: center;
3133
3234
.icon-user {
33-
margin-inline-end: $dimension-spacing-small;
35+
margin-inline-end: var(--dimension-spacing-small);
3436
vertical-align: middle;
3537
}
3638

‎resources/js/Components/WikidataToolFooter.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,19 @@ withDefaults(defineProps<{
5353

5454
<style lang="scss">
5555
@import '~@wmde/wikit-tokens/dist/_variables.scss';
56+
@import '../../css/custom-variables.css';
5657
5758
.footer-container {
5859
background-color: $color-base-90;
5960
6061
& > footer {
6162
margin: auto;
62-
padding: $dimension-layout-xsmall;
63+
padding: var(--dimension-layout-xsmall);
6364
display: flex;
6465
flex-direction: column;
6566
6667
.h5 {
67-
margin: 0 0 $dimension-layout-xsmall 0;
68+
margin: 0 0 var(--dimension-layout-xsmall) 0;
6869
font-size: $font-size-style-body-s;
6970
}
7071
@@ -73,7 +74,7 @@ withDefaults(defineProps<{
7374
}
7475
7576
section + section {
76-
margin-block-start: $dimension-layout-medium;
77+
margin-block-start: var(--dimension-layout-medium);
7778
}
7879
7980
p {
@@ -82,15 +83,15 @@ withDefaults(defineProps<{
8283
}
8384
8485
p + p {
85-
margin-block-start: $dimension-layout-xxsmall;
86+
margin-block-start: var(--dimension-layout-xxsmall);
8687
}
8788
8889
@media (min-width: $width-breakpoint-tablet) {
8990
flex-direction: row;
90-
padding: $dimension-layout-small;
91+
padding: var(--dimension-layout-small);
9192
9293
section {
93-
margin-inline-end: $dimension-layout-large;
94+
margin-inline-end: var(--dimension-layout-large);
9495
}
9596
9697
section + section {

‎resources/js/Pages/Home.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ function showRandom(): void{
155155

156156
<style lang="scss">
157157
@import '~@wmde/wikit-tokens/dist/_variables.scss';
158+
@import '../../css/custom-variables.css';
158159
159160
#querying-section .heading {
160161
display: flex;
@@ -184,14 +185,14 @@ function showRandom(): void{
184185
/**
185186
* Layout
186187
*/
187-
padding: $dimension-spacing-large;
188-
margin: $dimension-layout-xsmall 0;
188+
padding: var(--dimension-spacing-large);
189+
margin: var(--dimension-layout-xsmall) 0;
189190
190191
// Any direct decendent of this form that has a predecessor element will
191192
// get a top margin, this creates the even gutter between elements or "stack"
192193
// See https://every-layout.dev/layouts/stack/#the-solution
193194
& > * + * {
194-
margin-top: $dimension-spacing-large;
195+
margin-top: var(--dimension-spacing-large);
195196
}
196197
197198
.form-buttons {

‎resources/js/Pages/Results.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -340,12 +340,13 @@ function _handleConfirmation(){
340340

341341
<style lang="scss">
342342
@import '~@wmde/wikit-tokens/dist/_variables.scss';
343+
@import '../../css/custom-variables.css';
343344
344345
.back-button {
345346
// to match the first heading on the home page
346-
margin-top: $dimension-layout-xsmall;
347+
margin-top: var(--dimension-layout-xsmall);
347348
// to avoid visual grouping with .description-section
348-
margin-bottom: $dimension-layout-xsmall;
349+
margin-bottom: var(--dimension-layout-xsmall);
349350
}
350351
351352
h2 {
@@ -375,15 +376,15 @@ h2 {
375376
}
376377
}
377378
.mismatches-form-footer {
378-
margin-top: $dimension-layout-xsmall;
379+
margin-top: var(--dimension-layout-xsmall);
379380
display: flex;
380381
flex-direction: row-reverse;
381382
justify-content: space-between;
382383
align-items: flex-start;
383-
gap: $dimension-layout-xsmall;
384+
gap: var(--dimension-layout-xsmall);
384385
// calculate the footer height to reserve space for
385386
// messages with two lines (1.5 line height plus padding)
386-
min-height: calc(2*1.5em + 2*$dimension-spacing-large);
387+
min-height: calc(2*var(--dimension-spacing-xlarge) + 2*var(--dimension-spacing-large));
387388
388389
.form-success-message {
389390
max-width: 705px;

‎resources/sass/app.scss‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import '~wikit-dist/wikit-vue-components-vue3compat.css';
55
@import "@wikimedia/codex/dist/codex.style.css";
66
@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
7+
@import '../css/custom-variables.css';
78
@import './link.scss';
89
@import './_typography.scss';
910

@@ -21,49 +22,49 @@ body {
2122
*/
2223
main {
2324
max-width: 1090px;
24-
padding: 0 1rem;
25+
padding: 0 var(--dimension-layout-xsmall);
2526
margin: 0 auto;
2627

2728
& > header {
2829
display: flex;
2930
justify-content: space-between;
30-
margin: 1.500rem 0;
31+
margin: var(--dimension-layout-small) 0;
3132
}
3233

3334
@media(min-width: $min-width-breakpoint-tablet){
34-
padding: 0 1.500rem;
35+
padding: 0 var(--dimension-layout-small);
3536
}
3637
}
3738

3839
section {
39-
margin-bottom: 2.500rem;
40+
margin-bottom: var(--dimension-layout-large);
4041
}
4142

4243
h1, .h1 {
4344
@include heading-1;
4445

45-
margin: 1rem 0;
46+
margin: var(--dimension-layout-xsmall) 0;
4647

4748
@media (min-width: $min-width-breakpoint-tablet) {
48-
margin: 1rem 0;
49+
margin: var(--dimension-layout-xsmall) 0;
4950
}
5051
}
5152

5253
h4, .h4 {
53-
margin: 0.500rem 0;
54+
margin: var(--dimension-layout-xxsmall) 0;
5455
@include heading-4;
5556

5657
@media(min-width: $min-width-breakpoint-tablet){
57-
margin: 1rem 0;
58+
margin: var(--dimension-layout-xsmall) 0;
5859
}
5960
}
6061

6162
h5, .h5 {
62-
margin: 0.500rem 0;
63+
margin: var(--dimension-layout-xxsmall) 0;
6364
@include heading-5;
6465

6566
@media(min-width: $min-width-breakpoint-tablet){
66-
margin: 1rem 0;
67+
margin: var(--dimension-layout-xsmall) 0;
6768
}
6869
}
6970

@@ -100,7 +101,7 @@ li {
100101

101102
// this ensures that there will be a space if there is more than one message
102103
#message-section .cdx-message:not(:nth-child(1)) {
103-
margin-top: 1rem;
104+
margin-top: var(--dimension-layout-xsmall);
104105
}
105106

106107
/**
@@ -121,16 +122,16 @@ li {
121122
display: flex;
122123

123124
.username {
124-
margin-inline-end: 1.500em;
125+
margin-inline-end: var(--dimension-spacing-xlarge);
125126
}
126127

127128
.icon-user {
128-
margin-inline-end: 0.500em;
129+
margin-inline-end: var(--dimension-spacing-small);
129130
vertical-align: middle;
130131
}
131132

132133
@media (max-width: $max-width-breakpoint-mobile) {
133-
margin-bottom: 1rem;
134+
margin-bottom: var(--dimension-layout-xsmall);
134135
}
135136
}
136137
}
@@ -324,7 +325,7 @@ dl.import-meta .download-csv {
324325
}
325326

326327
&-icon {
327-
margin-inline-end: 0.500em;
328+
margin-inline-end: var(--dimension-spacing-small);
328329
vertical-align: middle;
329330
}
330331
}
@@ -384,7 +385,7 @@ dl.import-meta .download-csv {
384385
}
385386

386387
.button-group {
387-
margin-block-end: 1em;
388+
margin-block-end: var(--dimension-spacing-large);
388389
}
389390

390391
.button {

‎resources/sass/noscript.scss‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,42 @@
11
@import '~@wikimedia/codex/dist/codex.style.css';
22
@import '~@wikimedia/codex/dist/codex.style-rtl.css';
33
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
4-
5-
$spacing-layout-50: 0.5rem;
6-
$spacing-layout-100: 1rem;
7-
$spacing-layout-150: 1.5rem;
8-
$spacing-layout-200: 2rem;
9-
$spacing-layout-900: 9rem;
4+
@import '../css/custom-variables.css';
105

116
main {
127
font-size: $font-size-medium;
138
line-height: $line-height-medium;
149
font-family: $font-family-system-sans;
1510
font-weight: $font-weight-normal;
1611
color: $color-base;
17-
padding: 10vw $spacing-layout-150 $spacing-layout-150 $spacing-layout-150;
12+
padding: 10vw var(----dimension-layout-small) var(----dimension-layout-small) var(----dimension-layout-small);
1813
max-width: 680px;
1914

2015
@media (min-width: $min-width-breakpoint-tablet) {
21-
padding: 10vw $spacing-layout-200 $spacing-layout-200 $spacing-layout-200;
16+
padding: 10vw var(--dimension-layout-medium) var(--dimension-layout-medium) var(--dimension-layout-medium);
2217
}
2318
@media (min-width: $min-width-breakpoint-desktop) {
24-
padding: $spacing-layout-900 0 $spacing-layout-150 0;
19+
padding: 9rem 0 var(----dimension-layout-small) 0;
2520
}
2621
p {
2722
margin-block-end: 0;
2823
}
2924
.h5 {
30-
margin: $spacing-layout-150 0;
25+
margin: var(----dimension-layout-small) 0;
3126
font-size: $font-size-medium;
3227
line-height: $line-height-xxx-small;
3328
font-family: $font-family-system-sans;
3429
font-weight: $font-weight-bold;
3530
color: $color-emphasized;
3631
}
3732
.message-wrapper {
38-
padding: $spacing-layout-50 0;
33+
padding: var(--dimension-layout-xxsmall) 0;
3934
@media (min-width: $min-width-breakpoint-tablet) {
40-
padding: $spacing-layout-100 0;
35+
padding: var(----dimension-layout-xsmall) 0;
4136
}
4237
}
4338
.description {
44-
padding-block-end: $spacing-layout-150;
39+
padding-block-end: var(----dimension-layout-small);
4540
}
4641
header {
4742
.logo-link {

0 commit comments

Comments
 (0)