@tame-your-theme/css-style-declaration NPM

Tame Your Theme

Overview

For the full and interactive documentation go here.

The main idea of this lib is to help creating themes by using CSS custom variables alongside with HSL colors and the CSS Object Model to change the css variables in runtime.

To achieve that, this lib is split in two packages:

@tame-your-theme/scss - scss helper functions to create themed css variable colors, themed color harmonies
@tame-your-theme/css-style-declaration - native css style declarations api helper to change theme in run time

Each package can be used independently.

If you don't need to change in run time, you can just use the @tame-your-theme/scss to create your variables and play with its colors easily.

Installation

Using npm:

npm install @tame-your-theme/css-style-declaration
npm install @tame-your-theme/scss

Using yarn:

yarn add @tame-your-theme/css-style-declaration
yarn add @tame-your-theme/scss

TL;DR

How to use in just a few steps:

create the themed colors by using the mixin create-theme-color from the @tame-your-theme/scss
create the themes using a list of names and values in your javascript preferred language (typescript, vanilla, react, angular...)
call the setTheme from the @tame-your-theme/css-style-declaration with the desired theme

The package `@tame-your-theme/css-style-declaration`

setTheme

Changes the theme according to the given variables. This method uses the native css set property method to change the css variable.

This method accepts two arguments:

export interface Theme {
  variables: ThemeAttribute[]
  getHueSaturationAndLightness: GetHueSaturationAndLightnessType
}

Following some principles from the Clean Architecture this lib aims to be dependencyless and this can be seen particularly in the parameter getHueSaturationAndLightness.

The idea of this method is basically avoid an extra dependency, so it receives a function which needs to return the specific values used in the lib.

export type GetHueSaturationAndLightnessType = (value: string) => {
  hue: number
  saturation: number
  lightness: number
}

In the example shown in the the documentation the lib being used to get these values is hex-to-hsl, but one can use any lib or even create the logic to get the values from a hexadecimal color. The following example uses the setTheme function to change the theme dynamically. To achieve this change, it's necessary to have a proper css set in place in the components.

Using only this package

:root {
  --primary-color-h: 39deg;
  --primary-color-s: 100%;
  --primary-color-l: 50%;
  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));

  --background-color-h: 0deg;
  --background-color-s: 0%;
  --background-color-l: 100%;
  --background-color: hsl(var(--background-color-h), var(--background-color-s), var(--background-color-l));

  --background-contrast-color-h: 0deg;
  --background-contrast-color-s: 0%;
  --background-contrast-color-l: 13%;
  --background-contrast-color: hsl(
    var(--background-contrast-color-h),
    var(--background-contrast-color-s),
    var(--background-contrast-color-l)
  );
}

After creating these variables, it's just a matter of calling the setThemes.