Tyfy - Modules

In this module, colors from the settings file are assigned to custom properties of the :root pseudo-element. Using custom properties allows the colors to be easily modified. They can be assigned class-specific values. They can also be modified using JavaScript.

:root {
  --tycolor-bg:                   #{$tycolor-bg};
  --tycolor-bg-tab-active:        #{$tycolor-bg-tab-active};
  --tycolor-fg:                   #{$tycolor-fg};
  --tycolor-text-light:           #{$tycolor-text-light};
  --tycolor-link-default:         #{$tycolor-link-default};
  --tycolor-link-active:          #{$tycolor-link-active};
  --tycolor-border:               #{$tycolor-border};
  --tycolor-border-link-default:  #{$tycolor-border-link-default};
  --tycolor-border-link-active:   #{$tycolor-border-link-active};
  --tycolor-shade:                #{$tycolor-shade};
}

Also in this module, colors and fonts are applied to the <body>:

body {
  background:var(--tycolor-bg);
  color:var(--tycolor-fg);
  font-family:$tyfont-base;
  font-size:$tyfont-size-base;
  line-height:tylead($tyfont-size-base);
}