GitHub - oscarmarina/blk-material: Exercise to understand the use of tokens by Google web material.

`<blk-material>`

Exercise to understand the use of tokens by Google web material. Read NOTES.md to understand the proof of concept;

Installation

npm i blk-material

Usage

<script type="module">
  import 'blk-material/blk-material.js';
</script>

<blk-material></blk-material>

Local Demo with `vite`

npm start

To run a local development server that serves the basic demo located in demo/index.html

`src/BlkMaterial.js`:

class: `BlkMaterial`, `blk-material`

Fields

Name	Privacy	Type	Default	Description
`_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`

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`#onClick`
`_sayHello`		Formats a greeting	`heading: string`	`string`

Events

Name	Type	Description	Inherited From
`counterchange`	`CustomEvent`	Indicates when the count changes

Attributes

Name	Field	Inherited From
`heading`	heading
`counter`	counter
`roles`	roles

Slots

Name	Description
	This element has a slot

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlkMaterial`	BlkMaterial	src/BlkMaterial.js

`src/BlkButton.js`:

class: `BlkButton`, `blk-button`

Fields

Name	Privacy	Type	Default
`disabled`	public	`boolean`	`false`
`propertyContext`			`new BlockquoteControllerContextMeta(this, { context: 'symbol-roles', callback: v => { this.roles = v; }, })`
`roles`	public	`string`

Attributes

Name	Field	Inherited From
`roles`	roles
`disabled`	disabled

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlkButton`	BlkButton	src/BlkButton.js

`src/BlkRipple.js`:

class: `BlkRipple`, `blk-ripple`

Fields

Name	Privacy	Type	Default
`disabled`	public	`boolean`	`false`
`hovered`	public	`boolean`	`false`
`focused`	public	`boolean`	`false`
`pressed`	public	`boolean`	`false`
`element`

Methods

Name	Description	Parameters
`handleEvent`		`ev`
`handlePointerenter`
`handlePointerleave`
`handleFocus`	Handles the focus event.	`ev: FocusEvent`
`handleBlur`
`handlePointerdown`
`handlePointerup`
`handleClick`

Attributes

Name	Field	Inherited From
`disabled`	disabled
`hovered`	hovered
`focused`	focused
`pressed`	pressed

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlkRipple`	BlkRipple	src/BlkRipple.js

`src/styles/blk-button-styles.css.js`:

Variables

Name	Description	Type
`styles`

Exports

Kind	Name	Declaration	Module	Package
`js`	`styles`	styles	src/styles/blk-button-styles.css.js

`src/styles/blk-button-tokens.js`:

Variables

Name	Description	Type
`PREFIX`		`string`
`styleRoles`
`styleTokens`

Exports

Kind	Name	Declaration	Module
`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`:

Variables

Name	Description	Type
`styles`

Exports

Kind	Name	Declaration	Module	Package
`js`	`styles`	styles	src/styles/blk-material-styles.css.js

`src/styles/blk-material-tokens.js`:

Variables

Name	Description	Type
`PREFIX`		`string`
`styleRoles`
`styleTokens`

Exports

Kind	Name	Declaration	Module
`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`:

Variables

Name	Description	Type
`styles`

Exports

Kind	Name	Declaration	Module	Package
`js`	`styles`	styles	src/styles/blk-ripple-styles.css.js

`src/styles/blk-ripple-tokens.js`:

Variables

Name	Description	Type
`PREFIX`		`string`
`styleTokens`

Exports

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`:

Variables

Name	Description	Type
`refAlpha`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`	refAlpha	src/tokens/blk-ref-alpha.js

`src/tokens/blk-ref-palette.js`:

Variables

Name	Description	Type
`refPalette`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`	refPalette	src/tokens/blk-ref-palette.js

`src/tokens/blk-ref-spacing.js`:

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`		src/tokens/blk-ref-spacing.js

`src/tokens/blk-ref-typeface.js`:

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`		src/tokens/blk-ref-typeface.js

`src/tokens/blk-sys-alpha.js`:

Variables

Name	Description	Type
`sysAlpha`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`	sysAlpha	src/tokens/blk-sys-alpha.js

`src/tokens/blk-sys-color.js`:

Variables

Name	Description	Type
`dark`		`object`
`sysColor`		`object`

Exports

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`:

Variables

Name	Description	Type
`sysSpacing`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`	sysSpacing	src/tokens/blk-sys-spacing.js

`src/tokens/blk-sys-typescale.js`:

Variables

Name	Description	Type
`sysTypescale`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`default`	sysTypescale	src/tokens/blk-sys-typescale.js

`src/tokens/blk-system.js`:

Variables

Name	Description	Type
`SYSTEM`		`object`

Exports

Kind	Name	Declaration	Module	Package
`js`	`SYSTEM`	SYSTEM	src/tokens/blk-system.js

`src/tokens/dark-color-scheme.js`:

Variables

Name	Description	Type
`darkColorScheme`

Exports

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`:

Variables

Name	Description	Type
`ROLES`		`string`

Functions

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`

Exports

Kind	Name	Declaration	Module
`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

`define/blk-button.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blk-button`	BlkButton	/src/BlkButton.js

`define/blk-material.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blk-material`	BlkMaterial	/src/BlkMaterial.js

`define/blk-ripple.js`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`blk-ripple`	BlkRipple	/src/BlkRipple.js

`index.js`:

Exports

Kind	Name	Declaration	Module	Package
`js`	`BlkMaterial`	BlkMaterial	./src/BlkMaterial.js

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.husky		.husky
demo		demo
notes		notes
scripts		scripts
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierignore		.prettierignore
LICENSE		LICENSE
NOTES.md		NOTES.md
README.md		README.md
custom-elements-manifest.config.js		custom-elements-manifest.config.js
custom-elements.json		custom-elements.json
eslint.config.js		eslint.config.js
index.html		index.html
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

License

oscarmarina/blk-material

Folders and files

Latest commit

History

Repository files navigation

<blk-material>

Installation

Usage

Local Demo with vite

src/BlkMaterial.js:

class: BlkMaterial, blk-material

Fields

Methods

Events

Attributes

Slots

Exports

src/BlkButton.js:

class: BlkButton, blk-button

Fields

Attributes

Exports

src/BlkRipple.js:

class: BlkRipple, blk-ripple

Fields

Methods

Attributes

Exports

src/styles/blk-button-styles.css.js:

Variables

Exports

src/styles/blk-button-tokens.js:

Variables

Exports

src/styles/blk-material-styles.css.js:

Variables

Exports

src/styles/blk-material-tokens.js:

Variables

Exports

src/styles/blk-ripple-styles.css.js:

Variables

Exports

src/styles/blk-ripple-tokens.js:

Variables

Exports

src/tokens/blk-ref-alpha.js:

Variables

Exports

src/tokens/blk-ref-palette.js:

Variables

Exports

src/tokens/blk-ref-spacing.js:

Exports

src/tokens/blk-ref-typeface.js:

Exports

src/tokens/blk-sys-alpha.js:

Variables

Exports

src/tokens/blk-sys-color.js:

Variables

Exports

src/tokens/blk-sys-spacing.js:

Variables

Exports

src/tokens/blk-sys-typescale.js:

Variables

Exports

src/tokens/blk-system.js:

Variables

Exports

src/tokens/dark-color-scheme.js:

Variables

Exports

src/tokens/generate-tokens.js:

Variables

Functions

Exports

define/blk-button.js:

`<blk-material>`

Local Demo with `vite`

`src/BlkMaterial.js`:

class: `BlkMaterial`, `blk-material`

`src/BlkButton.js`:

class: `BlkButton`, `blk-button`

`src/BlkRipple.js`:

class: `BlkRipple`, `blk-ripple`

`src/styles/blk-button-styles.css.js`:

`src/styles/blk-button-tokens.js`:

`src/styles/blk-material-styles.css.js`:

`src/styles/blk-material-tokens.js`:

`src/styles/blk-ripple-styles.css.js`:

`src/styles/blk-ripple-tokens.js`:

`src/tokens/blk-ref-alpha.js`:

`src/tokens/blk-ref-palette.js`:

`src/tokens/blk-ref-spacing.js`:

`src/tokens/blk-ref-typeface.js`:

`src/tokens/blk-sys-alpha.js`:

`src/tokens/blk-sys-color.js`:

`src/tokens/blk-sys-spacing.js`:

`src/tokens/blk-sys-typescale.js`:

`src/tokens/blk-system.js`:

`src/tokens/dark-color-scheme.js`:

`src/tokens/generate-tokens.js`:

`define/blk-button.js`:

`define/blk-material.js`:

`define/blk-ripple.js`:

`index.js`:

Packages