mrahhal / css-theming Goto Github PK

Default font is coming up quoted in the css variable which is causing problems when it's inherit or initial.

https://sass-lang.com/blog/the-module-system-is-launched

Right now, it's like this in _base.scss:

$color-text: if(themes.$brightness=='light', color.scale($color, $lightness: -40%), color.scale($color, $lightness: 50%));

• Dynamically detects the configured values and displays them.
• Auto checks contrast ratios and warns if there are problems.
• Should be embeddable in another app.

https://angular.io/guide/build#configuring-commonjs-dependencies

Darker or lighter at elevations?

Consider following some of the material design spec for dark themes: https://material.io/design/color/dark-theme.html.

This can be helpful when trying to use rgba function on colors. You can't use rgba except with an "R, G, B" variable.

https://sass-lang.com/documentation/modules/color#scale

Things like theme-color-get.

Allow the following pattern:

.some-selector {
  @include themes-apply {
    // ...
  }
}

This currently doesn't work, as the result will be:

.some-selector .theme-default body {
  // ...
}

We want this instead:

.theme-default body .some-selector {
  // ...
}

• An interface first that describes this
• A default local storage implementation
• Add samples for a custom implementation

Right now design values are always resolved from the root element, which means the default category.