Skip to content

Commit

Permalink
Use Codex tokens and custom spacing variables
Browse files Browse the repository at this point in the history
Migrate away from Wikit tokens to Codex SASS variables where
they are available. In some cases we use custom CSS variables
for values from Wikit whose Codex equivalents are missing.

Bug: T369510
Bug: T369508
Bug: T369509
  • Loading branch information
codders committed Sep 20, 2024
1 parent 8c35b7f commit 6b0162c
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 29 deletions.
4 changes: 3 additions & 1 deletion src/components/AnonymousEditWarning.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const warning = computed(
</template>

<style lang="scss" scoped>
@import '@/styles/custom-variables.css';
.wbl-snl-anonymous-edit-warning {
margin: 1rem 0;
margin: var( --dimension-layout-xsmall ) 0;
}
</style>
4 changes: 2 additions & 2 deletions src/components/LanguageInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ export default {
</template>

<style lang="scss">
@import '@wmde/wikit-tokens/variables';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
/* stylelint-disable selector-class-pattern */
.wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper {
gap: $dimension-spacing-xsmall;
gap: $spacing-50;
}
/* stylelint-enable selector-class-pattern */
Expand Down
4 changes: 2 additions & 2 deletions src/components/LemmaInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@ export default {
</template>

<style lang="scss">
@import '@wmde/wikit-tokens/variables';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
.wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper {
gap: $dimension-spacing-xsmall;
gap: $spacing-50;
}
/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
</style>
4 changes: 2 additions & 2 deletions src/components/LexicalCategoryInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@ export default {
</template>

<style lang="scss">
@import '@wmde/wikit-tokens/variables';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
/* stylelint-disable selector-class-pattern */
.wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper {
gap: $dimension-spacing-xsmall;
gap: $spacing-50;
}
/* stylelint-enable selector-class-pattern */
Expand Down
20 changes: 10 additions & 10 deletions src/components/NewLexemeForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -190,16 +190,16 @@ export default {
</template>

<style scoped lang="scss">
@import '@wmde/wikit-tokens/variables';
@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
@import '@/styles/custom-variables.css';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
.wbl-snl-form {
& > * + * {
margin-top: $dimension-layout-xsmall;
margin-top: var( --dimension-layout-xsmall );
}
// Box model
padding: $dimension-layout-small;
padding: var( --dimension-layout-xsmall );
// Border
border-style: $border-style-base;
Expand All @@ -209,12 +209,12 @@ export default {
}
.wbl-snl-copyright {
@include small-text;
font-size: 0.8125rem;
font-style: italic;
font-synthesis: none;
margin-bottom: 0;
/* codex Body S */
font-family: $font-family-system-sans;
font-size: $font-size-small;
font-weight: $font-weight-normal;
line-height: $line-height-medium;
color: $color-base;
}
</style>
8 changes: 4 additions & 4 deletions src/components/RequiredAsterisk.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@ export default {
</template>

<style lang="scss" scoped>
@import '@wmde/wikit-tokens/variables';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
.wbl-snl-required-asterisk {
font-size: $font-size-xxlarge;
font-size: $font-size-xx-large;
line-height: 0;
&:not( :first-child ) {
margin-inline-start: $dimension-spacing-small;
margin-inline-start: $spacing-50;
}
&:not( :last-child ) {
margin-inline-end: $dimension-spacing-small;
margin-inline-end: $spacing-50;
}
}
</style>
16 changes: 11 additions & 5 deletions src/components/SearchExisting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,19 @@ const searchMessage = computed( () => messages.get(
</template>

<style lang="scss" scoped>
@import '@wmde/wikit-tokens/variables';
@import '@wmde/wikit-vue-components/src/styles/mixins/Typography';
@import '@/styles/custom-variables.css';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
.wbl-snl-search-existing {
@include body;
/* font Codex Body */
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-normal;
line-height: $line-height-medium;
color: $color-base;
margin-top: 1rem;
margin-bottom: 1rem;
/* margins */
margin-top: var( --dimension-layout-xsmall );
margin-bottom: var( --dimension-layout-xsmall );
}
</style>
6 changes: 3 additions & 3 deletions src/components/SpellingVariantInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -128,17 +128,17 @@ export default {
</template>

<style lang="scss">
@import '@wmde/wikit-tokens/variables';
@import '@wikimedia/codex-design-tokens/theme-wikimedia-ui';
.wbl-snl-spelling-variant-lookup {
/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
&.wikit .wikit-Lookup__label-wrapper {
gap: $dimension-spacing-xsmall;
gap: $spacing-50;
}
/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
&__help-link {
padding-bottom: $wikit-Label-padding-block-end;
padding-bottom: $spacing-50;
display: inline-block;
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/custom-variables.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
* {
/* layout */
--dimension-layout-xsmall: 1rem;
}

0 comments on commit 6b0162c

Please sign in to comment.