Override global Sass variables from theme

Dev
1

Continuing the discussion from Cleaning up our color palette :artist_palette::

Themes already have the ability to define sass variables:

However, from personal testing, these seem to be local to the theme’s stylesheets, and won’t globally override a variable.

If they did it would prove incredibly useful for theme development, as it would allow the theme to specify exactly what colour should be used as $primary-medium, $tertiary-low and so on - rather than have it automagically calculated off of the colour scheme.

Perhaps there should be a scope option, something like this:

"fields": {
  "primary-medium": {
    "value": "#012345",
    "type": "color",
    "scope": "global"
  }
}
2

Maybe, but what happens if multiple theme components are fighting for such a change, who wins?

3

As a wise man once said:

I can’t see much use for this beyond colours, and I can’t ever see a user wanting to enable two themes both of which change the color scheme.

Perhaps though this makes more sense as an extension to color_schemes, which can only be enabled individually:

"color_schemes": {
  "Extened Scheme": {
    "primary": "000",
    "primary-medium": "666",
    "primary-low": "aaaaaa"
  }
}
4

Related:

5

J’en ai vraiment besoin.

J’ai une couleur primaire par défaut : 4d238c. Le problème est que la couleur générée pour $primary-secondary (#a179de) ne respecte pas les directives d’accessibilité, je dois donc la rendre plus sombre.

Il semble fastidieux de la modifier partout où le système utilise la couleur secondaire, alors que je pourrais simplement écraser $primary-secondary avec une couleur comme : red.

6

Vous pouvez désormais remplacer les variables générées automatiquement dans un thème distant : Override values for auto-generated color variables