From 66d60c3970fbc3b4b03c10b1ee677c20aa05ea42 Mon Sep 17 00:00:00 2001 From: Noa wmde Date: Thu, 4 Aug 2022 13:41:51 +0200 Subject: [PATCH 1/3] Allow defaults for token font variables In an attempt to allow wikit font to be overriden Bug: T313476 --- tokens/properties/alias.json | 22 +++++++++++++++------- vue-components/src/styles/main.scss | 11 ++++++++++- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/tokens/properties/alias.json b/tokens/properties/alias.json index 1761b977d..ecc51bc29 100644 --- a/tokens/properties/alias.json +++ b/tokens/properties/alias.json @@ -3,22 +3,28 @@ "family": { "style": { "heading-serif": { - "value": "{font.family.serif.value}" + "value": "{font.family.serif.value}", + "themeable": true }, "heading-sans": { + "themeable": true, "value": "{font.family.sans.value}" }, "body": { - "value": "{font.family.sans.value}" + "value": "{font.family.sans.value}", + "themeable": true }, "body-s": { - "value": "{font.family.sans.value}" + "value": "{font.family.sans.value}", + "themeable": true }, "placeholder": { - "value": "{font.family.sans.value}" + "value": "{font.family.sans.value}", + "themeable": true }, "description": { - "value": "{font.family.sans.value}" + "value": "{font.family.sans.value}", + "themeable": true } } }, @@ -558,10 +564,12 @@ }, "link": { "property": { - "value": "{transition.property.color.value}" + "value": "{transition.property.color.value}", + "themeable": true }, "duration": { - "value": "{transition.duration.fast.value}" + "value": "{transition.duration.fast.value}", + "themeable": true } } } diff --git a/vue-components/src/styles/main.scss b/vue-components/src/styles/main.scss index 518873c27..4f93ed0a5 100644 --- a/vue-components/src/styles/main.scss +++ b/vue-components/src/styles/main.scss @@ -1,5 +1,14 @@ +@use '~@wmde/wikit-tokens/dist/variables' with ( + $font-family-style-heading-serif: 'monospace', + $font-family-style-heading-sans: 'monospace', + $font-family-style-body: 'monospace', + $font-family-style-body-s:'monospace', + $font-family-style-placeholder: 'monospace', + $font-family-style-description:'monospace' +); + @import '~ress'; -@import '~@wmde/wikit-tokens/dist/variables'; +// @import '~@wmde/wikit-tokens/dist/variables'; @import './mixins/Label'; @import './mixins/Link'; @import './mixins/InlineProgressBar'; From 6fe4a285e6985ca8a76a195cf3e9ee126eaf1b24 Mon Sep 17 00:00:00 2001 From: Noa wmde Date: Thu, 4 Aug 2022 15:55:09 +0200 Subject: [PATCH 2/3] use `@use` with namespace to allow build with default variables Bug: T313476 --- vue-components/src/styles/main.scss | 10 +--------- vue-components/src/styles/shared.scss | 8 ++++++++ vue-components/vue.config.js | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 vue-components/src/styles/shared.scss diff --git a/vue-components/src/styles/main.scss b/vue-components/src/styles/main.scss index 4f93ed0a5..98a5368b6 100644 --- a/vue-components/src/styles/main.scss +++ b/vue-components/src/styles/main.scss @@ -1,12 +1,4 @@ -@use '~@wmde/wikit-tokens/dist/variables' with ( - $font-family-style-heading-serif: 'monospace', - $font-family-style-heading-sans: 'monospace', - $font-family-style-body: 'monospace', - $font-family-style-body-s:'monospace', - $font-family-style-placeholder: 'monospace', - $font-family-style-description:'monospace' -); - +@use './shared' as *; @import '~ress'; // @import '~@wmde/wikit-tokens/dist/variables'; @import './mixins/Label'; diff --git a/vue-components/src/styles/shared.scss b/vue-components/src/styles/shared.scss new file mode 100644 index 000000000..89309fc22 --- /dev/null +++ b/vue-components/src/styles/shared.scss @@ -0,0 +1,8 @@ +@forward '~@wmde/wikit-tokens/dist/variables' with ( + $font-family-style-heading-serif: 'monospace', + $font-family-style-heading-sans: 'monospace', + $font-family-style-body: 'monospace', + $font-family-style-body-s:'monospace', + $font-family-style-placeholder: 'monospace', + $font-family-style-description:'monospace' +); diff --git a/vue-components/vue.config.js b/vue-components/vue.config.js index dff283987..7e4ea5fa7 100644 --- a/vue-components/vue.config.js +++ b/vue-components/vue.config.js @@ -5,7 +5,7 @@ module.exports = { css: { loaderOptions: { sass: { - additionalData: '@use "sass:math"; @import "@/styles/main.scss";', + additionalData: '@use "sass:math"; @use "@/styles/shared" as *; @import "@/styles/main.scss";', }, }, }, From 87dfeb8463cdcf33e5568c2825161a2cdfa0600f Mon Sep 17 00:00:00 2001 From: Noa wmde Date: Thu, 25 Aug 2022 14:39:02 +0200 Subject: [PATCH 3/3] make wikit tokens themeable to allow overriding them This is a WIP for documentation purposes Bug: T313476 --- tokens/.style-dictionary/config.js | 3 +++ tokens/properties/alias.json | 4 ++-- tokens/properties/mixins/Label.json | 3 ++- vue-components/src/styles/main.scss | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/tokens/.style-dictionary/config.js b/tokens/.style-dictionary/config.js index a32d1ba08..e26453c80 100644 --- a/tokens/.style-dictionary/config.js +++ b/tokens/.style-dictionary/config.js @@ -17,6 +17,9 @@ const StyleDictionary = require( 'style-dictionary' ), destination: '_variables.scss', format: 'scss/variables', filter: removeWikimediaUiBaseVars, + options: { + outputReferences: false, + }, } ], }, css: { diff --git a/tokens/properties/alias.json b/tokens/properties/alias.json index ecc51bc29..5b16d3818 100644 --- a/tokens/properties/alias.json +++ b/tokens/properties/alias.json @@ -7,8 +7,8 @@ "themeable": true }, "heading-sans": { - "themeable": true, - "value": "{font.family.sans.value}" + "value": "{font.family.sans.value}", + "themeable": true }, "body": { "value": "{font.family.sans.value}", diff --git a/tokens/properties/mixins/Label.json b/tokens/properties/mixins/Label.json index 990f08f26..daf4f6d3d 100644 --- a/tokens/properties/mixins/Label.json +++ b/tokens/properties/mixins/Label.json @@ -7,7 +7,8 @@ "value": "{font.color.disabled.value}" }, "font-family": { - "value": "{font.family.style.body.value}" + "value": "{font.family.style.body.value}", + "themeable": "true" }, "font-size": { "value": "{font.size.style.body.value}" diff --git a/vue-components/src/styles/main.scss b/vue-components/src/styles/main.scss index 98a5368b6..364b824e4 100644 --- a/vue-components/src/styles/main.scss +++ b/vue-components/src/styles/main.scss @@ -1,4 +1,4 @@ -@use './shared' as *; +//@use './shared' as *; @import '~ress'; // @import '~@wmde/wikit-tokens/dist/variables'; @import './mixins/Label';