Use unique names for theme colors

[spenserblack]

Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys. https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/_variables.scss#L77-L87

The folder structure could look like this:

scss/_main.scss
scss/sakura.scss
scss/themes/default.scss
scss/themes/[theme-name].scss

Where sakura.scss would look like this:

@import "themes/default";
@import "main";

And themes/default.scss would look this:

// what's currently in sakura.scss
$color-blossom: #1d7484;
$color-fade: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom,
  "color-fade": $color-fade,
  // ...
);

And themes/[theme-name].scss would look like this:

// copied from sakura-dark.scss for an example
$color-blossom-theme-name: #1d7484;
$color-fade-theme-name: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom-theme-name,
  "color-fade": $color-fade-theme-name,
  // ...
);

Why?

By making the variable names for each theme unique, users would be able to import them and do something like this:

@import "../node_modules/sakura.css/scss/themes/default";
@import "../node_modules/sakura.css/scss/themes/dark";
.alert {
  background-color: $color-blossom;
  color: $color-bg;

  &.dark {
    background-color: $color-blossom-dark;
    color: $color-bg-dark;
  }
}

I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? :thinking: