Exercise to understand the use of tokens by Google web material.
Read NOTES.md to understand the proof of concept;
< script type ="module ">
import 'blk-material/blk-material.js' ;
</ script >
< blk-material > </ blk-material >
To run a local development server that serves the basic demo located in demo/index.html
class: BlkMaterial
, blk-material
Name
Privacy
Type
Default
Description
Inherited From
_svgTag
_isNested
heading
public
string
'Hey there'
The heading to say "Hello" to.
counter
public
number
5
The number of times the button has been clicked.
propertyContext
new BlockquoteControllerContextMeta(this, { context: 'symbol-roles', })
roles
public
string
Name
Privacy
Description
Parameters
Return
Inherited From
#onClick
_sayHello
Formats a greeting
heading: string
string
Name
Type
Description
Inherited From
counterchange
CustomEvent
Indicates when the count changes
Name
Field
Inherited From
heading
heading
counter
counter
roles
roles
Name
Description
This element has a slot
Kind
Name
Declaration
Module
Package
js
BlkMaterial
BlkMaterial
src/BlkMaterial.js
class: BlkButton
, blk-button
Name
Privacy
Type
Default
Description
Inherited From
disabled
public
boolean
false
propertyContext
new BlockquoteControllerContextMeta(this, { context: 'symbol-roles', callback: v => { this.roles = v; }, })
roles
public
string
Name
Field
Inherited From
roles
roles
disabled
disabled
Kind
Name
Declaration
Module
Package
js
BlkButton
BlkButton
src/BlkButton.js
class: BlkRipple
, blk-ripple
Name
Privacy
Type
Default
Description
Inherited From
disabled
public
boolean
false
hovered
public
boolean
false
focused
public
boolean
false
pressed
public
boolean
false
element
Name
Privacy
Description
Parameters
Return
Inherited From
handleEvent
ev
handlePointerenter
handlePointerleave
handleFocus
Handles the focus event.
ev: FocusEvent
handleBlur
handlePointerdown
handlePointerup
handleClick
Name
Field
Inherited From
disabled
disabled
hovered
hovered
focused
focused
pressed
pressed
Kind
Name
Declaration
Module
Package
js
BlkRipple
BlkRipple
src/BlkRipple.js
src/styles/blk-button-styles.css.js
:
Name
Description
Type
styles
Kind
Name
Declaration
Module
Package
js
styles
styles
src/styles/blk-button-styles.css.js
src/styles/blk-button-tokens.js
:
Name
Description
Type
PREFIX
string
styleRoles
styleTokens
Kind
Name
Declaration
Module
Package
js
PREFIX
PREFIX
src/styles/blk-button-tokens.js
js
styleRoles
styleRoles
src/styles/blk-button-tokens.js
js
styleTokens
styleTokens
src/styles/blk-button-tokens.js
src/styles/blk-material-styles.css.js
:
Name
Description
Type
styles
Kind
Name
Declaration
Module
Package
js
styles
styles
src/styles/blk-material-styles.css.js
src/styles/blk-material-tokens.js
:
Name
Description
Type
PREFIX
string
styleRoles
styleTokens
Kind
Name
Declaration
Module
Package
js
PREFIX
PREFIX
src/styles/blk-material-tokens.js
js
styleRoles
styleRoles
src/styles/blk-material-tokens.js
js
styleTokens
styleTokens
src/styles/blk-material-tokens.js
src/styles/blk-ripple-styles.css.js
:
Name
Description
Type
styles
Kind
Name
Declaration
Module
Package
js
styles
styles
src/styles/blk-ripple-styles.css.js
src/styles/blk-ripple-tokens.js
:
Name
Description
Type
PREFIX
string
styleTokens
Kind
Name
Declaration
Module
Package
js
PREFIX
PREFIX
src/styles/blk-ripple-tokens.js
js
styleTokens
styleTokens
src/styles/blk-ripple-tokens.js
src/tokens/blk-ref-alpha.js
:
Name
Description
Type
refAlpha
object
Kind
Name
Declaration
Module
Package
js
default
refAlpha
src/tokens/blk-ref-alpha.js
src/tokens/blk-ref-palette.js
:
Name
Description
Type
refPalette
object
Kind
Name
Declaration
Module
Package
js
default
refPalette
src/tokens/blk-ref-palette.js
src/tokens/blk-ref-spacing.js
:
Kind
Name
Declaration
Module
Package
js
default
src/tokens/blk-ref-spacing.js
src/tokens/blk-ref-typeface.js
:
Kind
Name
Declaration
Module
Package
js
default
src/tokens/blk-ref-typeface.js
src/tokens/blk-sys-alpha.js
:
Name
Description
Type
sysAlpha
object
Kind
Name
Declaration
Module
Package
js
default
sysAlpha
src/tokens/blk-sys-alpha.js
src/tokens/blk-sys-color.js
:
Name
Description
Type
dark
object
sysColor
object
Kind
Name
Declaration
Module
Package
js
default
sysColor
src/tokens/blk-sys-color.js
js
dark
dark
src/tokens/blk-sys-color.js
src/tokens/blk-sys-spacing.js
:
Name
Description
Type
sysSpacing
object
Kind
Name
Declaration
Module
Package
js
default
sysSpacing
src/tokens/blk-sys-spacing.js
src/tokens/blk-sys-typescale.js
:
Name
Description
Type
sysTypescale
object
Kind
Name
Declaration
Module
Package
js
default
sysTypescale
src/tokens/blk-sys-typescale.js
src/tokens/blk-system.js
:
Name
Description
Type
SYSTEM
object
Kind
Name
Declaration
Module
Package
js
SYSTEM
SYSTEM
src/tokens/blk-system.js
src/tokens/dark-color-scheme.js
:
Name
Description
Type
darkColorScheme
Kind
Name
Declaration
Module
Package
js
darkColorScheme
darkColorScheme
src/tokens/dark-color-scheme.js
js
setDocumentStyles
setDocumentStyles
src/tokens/dark-color-scheme.js
src/tokens/generate-tokens.js
:
Name
Description
Type
ROLES
string
Name
Description
Parameters
Return
concatenateStringsByKey
Returns an object with concatenated strings by key.
arr: Array<Object>
Object
cssStyleRule
Create a single CSS style rule.
selector: string, values: Array<string>
string
setVariables
Create custom CSS properties for a component.
data: Object, prefix: string
string
setTokens
Create custom CSS properties for all tokens in a data.
data: Object, prefix: string
string
setRoles
Create custom CSS properties for all roles.
data: Object, prefix: string
Object
Kind
Name
Declaration
Module
Package
js
ROLES
ROLES
src/tokens/generate-tokens.js
js
concatenateStringsByKey
concatenateStringsByKey
src/tokens/generate-tokens.js
js
cssStyleRule
cssStyleRule
src/tokens/generate-tokens.js
js
setVariables
setVariables
src/tokens/generate-tokens.js
js
setTokens
setTokens
src/tokens/generate-tokens.js
js
setRoles
setRoles
src/tokens/generate-tokens.js
Kind
Name
Declaration
Module
Package
custom-element-definition
blk-button
BlkButton
/src/BlkButton.js
Kind
Name
Declaration
Module
Package
custom-element-definition
blk-material
BlkMaterial
/src/BlkMaterial.js
Kind
Name
Declaration
Module
Package
custom-element-definition
blk-ripple
BlkRipple
/src/BlkRipple.js
Kind
Name
Declaration
Module
Package
js
BlkMaterial
BlkMaterial
./src/BlkMaterial.js