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
Theme
ThemeComponent
ThemeAdapter
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" |