shayo-theme

0.0.3

Theme.

shayo-theme is a fork from @material/theme.

Installation

$ npm install shayo-theme

Usage

Sass

@import "path/to/node_modules/shayo-theme/theme";

// Set theme primary color.
$s-theme-palette--primary: #ce1126;

// Set theme secondary color.
$s-theme-palette--secondary: #11ceb9;

@include s-theme-custom-properties;

// Return primary color from color palette.
@debug s-theme-palette-get("primary");

// Return secondary text color on secondary color background.
@debug s-theme-text-get("secondary", "secondary");

// Return tertiary text color on colored background.
@debug s-theme-text-get("tertiary", #000);

// Output primary text color on secondary color background.
.foo {
  @include s-theme-property("property", "primary", "secondary");
}

// Output tertiary text color on colored background.
.foo {
  @include s-theme-property("property", "tertiary", #fff);
}

// Output primary color from color palette w/ Edge feature-detect.
.foo {
  @include s-theme-property("property", "primary", $edge: true);
}

// Output new assigned color.
.foo {
  @include s-theme-property("property", #11ceb9);
}

// Get dark variant for color.
@debug s-theme-darken(#ce1126);

@debug s-theme-darken(#11ceb9, 4);

// Get light variant for color.
@debug s-theme-lighten(#ce1126);

@debug s-theme-lighten(#11ceb9, 4);

Terminal

/path/to/style.scss:12 DEBUG: #ce1126
/path/to/style.scss:15 DEBUG: rgba(0, 0, 0, 0.54)
/path/to/style.scss:18 DEBUG: rgba(255, 255, 255, 0.5)
/path/to/style.scss:41 DEBUG: #ef384c
/path/to/style.scss:43 DEBUG: #064a43
/path/to/style.scss:46 DEBUG: #f47a87
/path/to/style.scss:48 DEBUG: #7af4e6

Css

:root {
  --s-theme-primary: #ce1126;
  --s-theme-secondary: #11ceb9;
  --s-theme-primary-on-dark: #fff;
  --s-theme-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --s-theme-tertiary-on-dark: rgba(255, 255, 255, 0.5);
  --s-theme-primary-on-light: rgba(0, 0, 0, 0.87);
  --s-theme-secondary-on-light: rgba(0, 0, 0, 0.54);
  --s-theme-tertiary-on-light: rgba(0, 0, 0, 0.38);
}

.foo {
  property: rgba(0, 0, 0, 0.87);
  property: var(--s-theme-primary-on-light, rgba(0, 0, 0, 0.87));
}

.foo {
  property: rgba(0, 0, 0, 0.38);
  property: var(--s-theme-tertiary-on-light, rgba(0, 0, 0, 0.38));
}

.foo {
  property: #ce1126;
}

@supports not (-ms-ime-align: auto) {
  .foo {
    property: var(--s-theme-primary, #ce1126);
  }
}

.foo {
  property: #11ceb9;
}

Author

Zaza Agency

This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit creativecommons.org/licenses.