Change Details

User-authored CSS, including CSS in Gadgets, cannot use Less (per T56864#6153179). This means that the Codex design tokens cannot be used there, because MediaWiki currently only makes these available as Less variables. Implementation options include: 1. Magically transform user-authored CSS to substitute uses of a token with that token's value 1. Less-style placeholders: transform `color: @color-progressive;` to `color: #36c;` 2. CSS variable-style placeholders: transform `color: var( --color-progressive );` to `color: #36c` 2. Use real CSS variables 1. Create a ResourceLoader module that contains all Codex design tokens as CSS variables (i.e. its contents look like `:root { --color-progressive: #36c; --color-destructive: #d33; etc }`). Its size would be 17 KB (4.8 KB after gzip). 2. Detect which variables each gadget uses (by scanning its CSS for occurrences of `var( --something )`) and magically output the variables it needs alongside it. For example, if the Gadget's CSS contains `var( --color-progressive )`, we would add `:root { --color-progressive: #36c; }`

User-authored CSS, including CSS in Gadgets, cannot use Less (per T56864#6153179). This means that the Codex design tokens cannot be used there, because MediaWiki currently only makes these available as Less variables. Implementation options include: 1. Magically transform user-authored CSS to substitute uses of a token with that token's value 1. Less-style placeholders: transform `color: @color-progressive;` to `color: #36c;` 2. CSS variable-style placeholders: transform `color: var( --color-progressive );` to `color: #36c` 2. Use real CSS variables 1. Create a ResourceLoader module that contains all Codex design tokens as CSS variables (i.e. its contents look like `:root { --color-progressive: #36c; --color-destructive: #d33; etc }`). Its size would be 17 KB (4.8 KB after gzip). 2. Detect which variables each gadget uses (by scanning its CSS for occurrences of `var( --something )`) and magically output the variables it needs alongside it. For example, if the Gadget's CSS contains `var( --color-progressive )`, we would add `:root { --color-progressive: #36c; }` NOTE: The solutions for T355244 (TemplateStyles) and this one (Gadgets) may overlap significantly, depending on how they're implemented.

User-authored CSS, including CSS in Gadgets, cannot use Less (per T56864#6153179). This means that the Codex design tokens cannot be used there, because MediaWiki currently only makes these available as Less variables. Implementation options include: 1. Magically transform user-authored CSS to substitute uses of a token with that token's value 1. Less-style placeholders: transform `color: @color-progressive;` to `color: #36c;` 2. CSS variable-style placeholders: transform `color: var( --color-progressive );` to `color: #36c` 2. Use real CSS variables 1. Create a ResourceLoader module that contains all Codex design tokens as CSS variables (i.e. its contents look like `:root { --color-progressive: #36c; --color-destructive: #d33; etc }`). Its size would be 17 KB (4.8 KB after gzip). 2. Detect which variables each gadget uses (by scanning its CSS for occurrences of `var( --something )`) and magically output the variables it needs alongside it. For example, if the Gadget's CSS contains `var( --color-progressive )`, we would add `:root { --color-progressive: #36c; }` NOTE: The solutions for T355244 (TemplateStyles) and this one (Gadgets) may overlap significantly, depending on how they're implemented.