@moki.codes/mokui-theme

theme
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
theme subsystem provider, defines components appearance.
Applies minimal css reset.
Important note: modificators use rem as a unit, so it is possible to scale
theme by manipulating html node's font-size property, preferably by scaling
it in percentages(defaults are 100% on mobile and 112.5% on tablet and above)

Installation
--------------------------------------------------------------------------------
``
yarn add @moki.codes/mokui-theme
`

Styles
--------------------------------------------------------------------------------
`
@import "@moki.codes/mokui-theme/dist/mokui-theme.css"
`

Basic Usage
--------------------------------------------------------------------------------
`
...

...

...

`

Modificators
--------------------------------------------------------------------------------
| name | value | description |
| ----------- | ------------- | ---------------------------------------------- |
| typography | default | establishes default typography |
| | | system font stack |
| breakpoint | default | defines default screen breakpoints, |
| | | althought some are still hardcoded due |
| | | to native css limitations |
| | | --screen-s: 480px; |
| | | --screen-m: 766px; |
| | | --screen-l: 990px; |
| | | --screen-xl: 1194px; |
| msp | perfect-fifth | defines perfect fifth as a primary |
| | | modular scale |
| msc | major-third | defines major third as a complimentary |
| | | both modular scales are scalings of the base |
| | | ms-0 by the ratio ms-1 |
| | | variables from ms-m1 down to the ms-m6 |
| | | represents 1/ratio^n, where ratio is the |
| | | scale ratio(1.5 in case of the perfect fifth) |
| | | and n is range [1, 6]. |
| | | variables from ms-1 up to the ms-16 |
| | | represents ratio^n, where ratio is the scale |
| | | ratio(1.25 in case of the major third) |
| | | and n is the range [1, 16] |
| gap | default | default gap is defined as a base of the |
| | | primary modular scale. |
| color | light | defines light color palette variables |
| | dark | defines dark color palette variables |
| | | both color palette variables are: |
| | | --color-primary |
| | | --color-primary-light |
| | | --color-primary-dark |
| | | --color-secondary |
| | | --color-secondary-light |
| | | --color-secondary-dark |
| | | --color-background |
| | | --color-surface |
| | | --color-error |
| | | --color-success |
| | | --color-on-primary |
| | | --color-on-primary-light |
| | | --color-on-primary-dark |
| | | --color-on-secondary |
| | | --color-on-secondary-light |
| | | --color-on-secondary-dark |
| | | --color-on-background |
| | | --color-on-surface |
| | | --color-on-error |
| | | --color-on-success |
| grid- | default | sets grid columns variables used inside grid |
| columns | | --grid-columns-xs: 4 |
| | | --grid-columns-s: 8 |
| | | --grid-columns-m: 8 |
| | | --grid-columns-l: 12 |
| | | --grid-columns-xl: 12 |
| elevation | default | sets elevation variables used inside |
| | | the elevation block |
| | | --elevation-color-umbra: rgba(0, 0, 0, 0.2) |
| | | --elevation-color-penumbra: rgba(0, 0, 0, 0.14)|
| | | --elevation-color-ambient: rgba(0, 0, 0, 0.12) |
| | | --elevation-transition-duration: 0.28s |

Elements
--------------------------------------------------------------------------------
* toggle

toggle
--------------------------------------------------------------------------------
toggle is a toggler which is triggers THEME_TOGGLE_EVENT, given to two html
elements one representing to the light and another to the dark theme switch.

Modificators
--------------------------------------------------------------------------------
| name | value | description |
| ----------- | ------------- | ---------------------------------------------- |
| hide | | hides toggle element |

Javascript
--------------------------------------------------------------------------------

Basic Usage
--------------------------------------------------------------------------------
`
import { Theme } from "@moki.codes/mokui-theme";

const themeEl = document.querySelector(".theme");
const themeComponent = Theme(themeEl);
/ when done /
themeComponent.destroy();
`

Exports
--------------------------------------------------------------------------------
* Theme
* ThemeComponent
* ThemeAdapter

Theme
--------------------------------------------------------------------------------
(e: Element) => ThemeComponent>>>>

Theme factory is a composition of the ThemeComponent of ThemeAdapter
of Emitter of Listener of Component.

ThemeComponent
--------------------------------------------------------------------------------
>>>>(o: T) => ThemeComponent

ThemeComponent factory provides core theme functionality:
determines initial theme from elment .theme and switches color theme, when
THEME_TOGGLE_EVENT occurs.

Properties
--------------------------------------------------------------------------------
| name | description |
| --------------------------- | ---------------------------------------------- |
| toggleLight: HTMLElement | initialized to the HTMLElement child of the |
| | root theme element with selector |
| | strings.THEME_COLOR_TOGGLE_LIGHT_SELECTOR |
| toggleDark: HTMLElement | initialized to the HTMLElement child of the |
| | root theme element with selector |
| | strings.THEME_COLOR_TOGGLE_DARK_SELECTOR |

Methods
--------------------------------------------------------------------------------
| name | description |
| --------------------------- | ---------------------------------------------- |
| destroy(): void; | clean up routine to be called upon deleting |
| | component |

events
--------------------------------------------------------------------------------
| name | Description |
| ----------------------- | -------------------------------------------------- |
| THEME_TOGGLE_EVENT | listens on event from strings constants |
| | switches theme |

ThemeAdapter
--------------------------------------------------------------------------------
>>>(o: T) => ThemeAdapter

ThemeAdapter factory provides default adapter functionality one can override
partially or completely, used by ThemeComponent.

| name | description |
| --------------------------- | ---------------------------------------------- |
| handleClick(): void | handles click, emits strings.TAB_CLICKED_EVENT |
| getAttr(name: string) | get value of the attribute name of the tab |
| : string | |
| hasClass(name: string) | returns if theme has class name |
| : boolean | |
| addClass(name: string) | adds class name to the element theme |
| : void | |
| removeClass(name: string) | removes class name from the element theme |
| : void | |
| toggleLightAddClass( | adds class name to the toggle light switch |
| this: ThemeAdapter, | element |
| name: string): void; | |
| toggleLightRemoveClass( | removes class name from the toggle light |
| this: ThemeAdapter, | switch element |
| name: string): void; | |
| toggleDarkAddClass( | adds class name to the toggle dark switch |
| this: ThemeAdapter, | element |
| name: string): void; | |
| toggleDarkRemoveClass( | removes class name` from the toggle dark |
| this: ThemeAdapter, | switch element |
| name: string): void; | |

classes
--------------------------------------------------------------------------------
| name | value |
| --------------------------- | ---------------------------------------------- |
| THEME_COLOR_TOGGLE_HIDE: | "theme__toggle_hide" |
| string | |
| THEME_COLOR_TOGGLE_SHOW: | "theme__toggle_show" |
| string | |
| THEME_COLOR_LIGHT: | "theme_color_light" |
| string | |
| THEME_COLOR_DARK: | "theme_color_dark" |
| string | |

strings
--------------------------------------------------------------------------------
| name | value |
| ---------------------------------- | --------------------------------------- |
| THEME_TOGGLE_EVENT: | "mokui-header:action-secondary-clicked" |
| string | |
| THEME_COLOR_LIGHT: | "light" |
| string | |
| THEME_COLOR_DARK: | "dark" |
| string | |
| THEME_COLOR_TOGGLE_LIGHT_SELECTOR: | ".theme__toggle_light" |
| THEME_COLOR_TOGGLE_DARK_SELECTOR: | ".theme__toggle_dark" |