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
...
<body class="theme
theme_color_light
theme_msp_perfect_fifth
...
">
...
<!-- theme provided to children -->
...
</body>
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
ThemeThemeComponentThemeAdapter
Theme
(e: Element) => ThemeComponent<ThemeAdapter<Emitter<Listener<Component<{}>>>>>
Theme factory is a composition of the ThemeComponent of ThemeAdapter of Emitter of Listener of Component.
ThemeComponent
<T extends ThemeAdapter<Emitter<Listener<Component<{}>>>>>(o: T) => ThemeComponent<T>
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
<T extends Emitter<Listener<Component<{}>>>>(o: T) => ThemeAdapter<T>
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" |