Description
We actually did the something like this with SCSS. There was a layout module, which defined the structure of the component (padding, size, animation) and defined a lot of color variables it used inside (for like border color) and their state-dependant variables (like hovered background color) and defined the basic color inheritances.
$color-button-default-background: #000 !default;
$color-button-default-text: #fff !default;
$color-button-hovered-background: $color-button-default-background !default;
$color-button-hovered-text: $color-button-default-text !default;
.button {
color: $color-button-default-text;
background: $color-button-default-background;
&:hover {
color: $color-button-hovered-text;
background: $color-button-hovered-background;
}
}Next to it there was a color module for each color scheme, which defines the basic colors of the scheme and maps it to the component color variable.
/// raw colors
$schema-bright-red: #f00;
$schema-bright-blue: #00f;
$schema-bright-green: #0f0;
/// mapping
$color-button-default-background: $schema-bright-red !default;
$color-button-default-text: $schema-bright-blue !default;
$color-button-hovered-text: $schema-bright-yellow !default;And then when you wanted to use a component with the color scheme, you have to import the two files in the proper order:
.theme-bright {
@import "schema-bright";
@import "component-layouts";
}And because of the use of !default not just in the layout, but in the schema as well, you can override basic colors of component colors at the import level:
.theme-bright--custom {
$color-bright-red: #e11;
$color-button-hovered-text: aquamarine;
@import "schema-bright";
@import "component-layouts";
}