Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feedback] Contextual styling with custom properties #13

Open
szalonna opened this Issue Apr 5, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@szalonna
Copy link

szalonna commented Apr 5, 2018

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";
}
@simurai

This comment has been minimized.

Copy link
Owner

simurai commented Apr 6, 2018

Thanks for the feedback. 🙇 Seems a good alternative if custom properties are still to early to use. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.