More actions
Proton One (talk | contribs) m consistency ➙ visual consistency |
Proton One (talk | contribs) Added list of design variables |
||
| Line 15: | Line 15: | ||
:<code><nowiki>{{Design var|red}}</nowiki></code> | :<code><nowiki>{{Design var|red}}</nowiki></code> | ||
:: gives... | :: gives... | ||
{{Design var|red}} | :{{Design var|red}} | ||
:<code><nowiki>{{Design var|magenta}}</nowiki></code> | :<code><nowiki>{{Design var|magenta}}</nowiki></code> | ||
:: gives... | :: gives... | ||
{{Design var|magenta}} | :{{Design var|magenta}} | ||
:<code><nowiki>{{Design var|#abcdef}}</nowiki></code> | :<code><nowiki>{{Design var|#abcdef}}</nowiki></code> | ||
:: gives... | :: gives... | ||
{{Design var|#abcdef}} | :{{Design var|#abcdef}} | ||
; List of design variables | |||
* {{co|{{design var|red}}|red}} {{co|{{design var|orange}}|orange(coral)}} {{co|{{design var|yellow}}|yellow}} {{co|{{design var|green}}|green(lightgreen)}} {{co|{{design var|cyan}}|cyan}} {{co|{{design var|blue}}|blue}} {{co|{{design var|paleblue}}|paleblue}} {{co|{{design var|purple}}|purple}} {{co|{{design var|brown}}|brown}} {{co|{{design var|pink}}|pink}} {{co|{{design var|violet}}|violet}} {{co|{{design var|grey}}|grey}} | |||
* {{co|{{design var|base}}|base}} {{co|{{design var|inverted}}|inverted}} {{co|{{design var|base-fixed}}|base-fixed}} {{co|{{design var|inverted-fixed}}|inverted-fixed}} | |||
* {{co|{{design var|emphasized}}|emphasized}} {{co|{{design var|subtle}}|subtle}} {{co|{{design var|placeholder}}|placeholder}} {{co|{{design var|disabled}}|disabled}} | |||
* {{co|{{design var|progressive}}|progressive}} {{co|{{design var|destructive}}|destructive}} {{co|{{design var|visited}}|visited}} | |||
* {{co|{{design var|error}}|error}} {{co|{{design var|warning}}|warning}} {{co|{{design var|success}}|success}} | |||
* {{co|{{design var|notice}}|notice}} {{co|{{design var|added}}|added}} {{co|{{design var|removed}}|removed}} | |||
<includeonly>[[Category:Formatting templates]]</includeonly> | <includeonly>[[Category:Formatting templates]]</includeonly> | ||
<noinclude>[[Category:Template documentation]]</noinclude> | <noinclude>[[Category:Template documentation]]</noinclude> | ||
Latest revision as of 07:07, 3 December 2025
- Description
- Design variables allow visual consistency by adjusting the light and dark themes to account for the physiological difference in color perception between black-on-white and white-on-black
- Dependencies
-
- Used by
- {{co}}
- Syntax
- {{Design var|<text color>}}
- Parameters
-
- text color
- If a replacement design variable exists, injects it. If not, passes the color unchanged.
- Sample
{{Design var|red}}- gives...
- var(--color-syntax-red)
{{Design var|magenta}}- gives...
- magenta
{{Design var|#abcdef}}- gives...
- #abcdef
- List of design variables
- red orange(coral) yellow green(lightgreen) cyan blue paleblue purple brown pink violet grey
- base inverted base-fixed inverted-fixed
- emphasized subtle placeholder disabled
- progressive destructive visited
- error warning success
- notice added removed