Class Theme<TValues>

Creates a theme class for grouping variables and applying them to elements.

Type Parameters

TValues extends Record<string, InterpolatedVars<any> | ControlVar<any, any>> = Record<string, InterpolatedVars<any> | ControlVar<any, any>>

Hierarchy (View Summary)

Base
- Theme

Index

Constructors

Properties

_dependants _lastPropertiesSet _listeners css els options ready value

Methods

_add _generateCss _notify add addDep attach detach notify off on recompute remove removeDep set setOpts setElVariables

Constructors

constructor

new Theme<
    TValues extends
        Record<string, ControlVar<any, any> | InterpolatedVars<any>> = Record<
        string,
        ControlVar<any, any>
        | InterpolatedVars<any>,
    >,
>(
    value: TValues,
    opts?: Partial<Theme<TValues>["options"]>,
): Theme<TValues>
Type Parameters
- TValues extends Record<string, ControlVar<any, any> | InterpolatedVars<any>> = Record<string, ControlVar<any, any> | InterpolatedVars<any>>
Parameters
- value: TValues
- opts: Partial<Theme<TValues>["options"]> = {}
Returns Theme<TValues>
Overrides Base.constructor
- Defined in Theme.ts:28

Properties

`Protected`_dependants

_dependants: Base[] = []

`Protected`_lastPropertiesSet

_lastPropertiesSet: string[] = []

`Protected`_listeners

_listeners: Record<string, (() => void)[]> = ...

css

css: Record<string, string> = {}

els

els: HTMLElement[] = []

options

options: { escapeChar: string } = ...

`Protected`ready

ready: boolean = false

value

value: TValues = ...

Methods

`Protected`_add

_add(key: string, value: ControlVar<any, any> | InterpolatedVars<any>): void
Parameters
- key: string
- value: ControlVar<any, any> | InterpolatedVars<any>
Returns void
- Defined in Theme.ts:48

`Protected`_generateCss

_generateCss(
    res: Record<string, string>,
    key: string,
    sep: string,
    value: ControlVar<any, any> | InterpolatedVars<any>,
    __namedParameters?: { remove?: boolean },
): void
Parameters
- res: Record<string, string>
- key: string
- sep: string
- value: ControlVar<any, any> | InterpolatedVars<any>
- __namedParameters: { remove?: boolean } = {}
Returns void
- Defined in Theme.ts:104

`Protected`_notify

_notify(): void
Returns void
Inherited from Base._notify
- Defined in Base.ts:15

add

add(value: Record<string, ControlVar<any, any> | InterpolatedVars<any>>): void
Parameters
- value: Record<string, ControlVar<any, any> | InterpolatedVars<any>>
Returns void
- Defined in Theme.ts:42

addDep

addDep(dep: any): void
Parameters
- dep: any
Returns void
Inherited from Base.addDep
- Defined in Base.ts:4

attach

attach(el?: HTMLElement): void
Attach to an element and automatically set and update the theme's properties on it.

If no element is passed, attaches to document.documentElement.
Parameters
- el: HTMLElement = document.documentElement
Returns void
- Defined in Theme.ts:173

detach

detach(el?: HTMLElement): void
Parameters
- el: HTMLElement = document.documentElement
Returns void
- Defined in Theme.ts:178

`Protected`notify

notify(__namedParameters?: { recompute?: boolean }): void
Parameters
- __namedParameters: { recompute?: boolean } = {}
Returns void
Overrides Base.notify
- Defined in Theme.ts:81

off

off(type: "change", cb: () => void): void
Parameters
- type: "change"
- cb: () => void
Returns void
- Defined in Theme.ts:97

on

on(type: "change", cb: () => void): void
Parameters
- type: "change"
- cb: () => void
Returns void
- Defined in Theme.ts:93

recompute

recompute(force?: boolean): void
The theme can force dependencies to recompute.

This should not be needed unless you want to recompute based of some external state.

Please file a bug report otherwise.
Parameters
- force: boolean = true
Returns void
- Defined in Theme.ts:135

remove

remove(key: string): void
Parameters
- key: string
Returns void
- Defined in Theme.ts:59

removeDep

removeDep(dep: any): void
Parameters
- dep: any
Returns void
Inherited from Base.removeDep
- Defined in Base.ts:8

set

set(key: string, value: ControlVar<any, any> | InterpolatedVars<any>): void
Parameters
- key: string
- value: ControlVar<any, any> | InterpolatedVars<any>
Returns void
- Defined in Theme.ts:71

setOpts

setOpts(value?: Partial<Theme<TValues>["options"]>): void
Parameters
- value: Partial<Theme<TValues>["options"]> = {}
Returns void
- Defined in Theme.ts:36

`Static`setElVariables

setElVariables(
    el: HTMLElement,
    css: Record<string, string>,
    lastPropertiesSet?: string[],
): string[]
Set css variables on an element.

Careful that the css properties are prefixed with --, otherwise they might conflict with other style properties.

Can be passed a list of already set properties to remove. Returns a list of properties that were set.
Parameters
- el: HTMLElement
- css: Record<string, string>
- lastPropertiesSet: string[] = []
Returns string[]
- Defined in Theme.ts:156