{"id":17857754,"url":"https://github.com/oscarmarina/blk-material","last_synced_at":"2025-08-24T15:12:42.941Z","repository":{"id":160532567,"uuid":"635397261","full_name":"oscarmarina/blk-material","owner":"oscarmarina","description":"Exercise to understand the use of tokens by Google web material.","archived":false,"fork":false,"pushed_at":"2024-08-23T21:14:39.000Z","size":5349,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-23T22:28:03.560Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oscarmarina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-02T15:54:01.000Z","updated_at":"2024-08-23T22:28:04.863Z","dependencies_parsed_at":null,"dependency_job_id":"ee96df2d-9116-4248-a796-1d6cf70e335a","html_url":"https://github.com/oscarmarina/blk-material","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fblk-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fblk-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fblk-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fblk-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oscarmarina","download_url":"https://codeload.github.com/oscarmarina/blk-material/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246868084,"owners_count":20846873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-28T04:03:50.808Z","updated_at":"2025-04-02T18:26:39.310Z","avatar_url":"https://github.com/oscarmarina.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)\n\n## `\u003cblk-material\u003e`\n\u003e Exercise to understand the use of tokens by Google web material.\n\u003e Read [NOTES.md](./NOTES.md) to understand the proof of concept;\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blk-material)\n\n- https://material.io/blog/tone-based-surface-color-m3\n- https://m3.material.io/styles/color/the-color-system/tokens\n- https://m3.material.io/theme-builder#/dynamic\n\n## Installation\n\n```bash\nnpm i blk-material\n```\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'blk-material/blk-material.js';\n\u003c/script\u003e\n\n\u003cblk-material\u003e\u003c/blk-material\u003e\n```\n\n## Local Demo with `vite`\n\n```bash\nnpm start\n```\n\nTo run a local development server that serves the basic demo located in demo/index.html\n\n\n### `src/BlkMaterial.js`:\n\n#### class: `BlkMaterial`, `blk-material`\n\n##### Fields\n\n| Name              | Privacy | Type     | Default                                                                           | Description                                      | Inherited From |\n| ----------------- | ------- | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------ | -------------- |\n| `_svgTag`         |         |          |                                                                                   |                                                  |                |\n| `_isNested`       |         |          |                                                                                   |                                                  |                |\n| `heading`         | public  | `string` | `'Hey there'`                                                                     | The heading to say \"Hello\" to.                   |                |\n| `counter`         | public  | `number` | `5`                                                                               | The number of times the button has been clicked. |                |\n| `propertyContext` |         |          | `new BlockquoteControllerContextMeta(this, {      context: 'symbol-roles',    })` |                                                  |                |\n| `roles`           | public  | `string` |                                                                                   |                                                  |                |\n\n##### Methods\n\n| Name        | Privacy | Description        | Parameters        | Return   | Inherited From |\n| ----------- | ------- | ------------------ | ----------------- | -------- | -------------- |\n| `#onClick`  |         |                    |                   |          |                |\n| `_sayHello` |         | Formats a greeting | `heading: string` | `string` |                |\n\n##### Events\n\n| Name            | Type          | Description                      | Inherited From |\n| --------------- | ------------- | -------------------------------- | -------------- |\n| `counterchange` | `CustomEvent` | Indicates when the count changes |                |\n\n##### Attributes\n\n| Name      | Field   | Inherited From |\n| --------- | ------- | -------------- |\n| `heading` | heading |                |\n| `counter` | counter |                |\n| `roles`   | roles   |                |\n\n##### Slots\n\n| Name | Description             |\n| ---- | ----------------------- |\n|      | This element has a slot |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name          | Declaration | Module             | Package |\n| ---- | ------------- | ----------- | ------------------ | ------- |\n| `js` | `BlkMaterial` | BlkMaterial | src/BlkMaterial.js |         |\n\n### `src/BlkButton.js`:\n\n#### class: `BlkButton`, `blk-button`\n\n##### Fields\n\n| Name              | Privacy | Type      | Default                                                                                                                                | Description | Inherited From |\n| ----------------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |\n| `disabled`        | public  | `boolean` | `false`                                                                                                                                |             |                |\n| `propertyContext` |         |           | `new BlockquoteControllerContextMeta(this, {      context: 'symbol-roles',      callback: v =\u003e {        this.roles = v;      },    })` |             |                |\n| `roles`           | public  | `string`  |                                                                                                                                        |             |                |\n\n##### Attributes\n\n| Name       | Field    | Inherited From |\n| ---------- | -------- | -------------- |\n| `roles`    | roles    |                |\n| `disabled` | disabled |                |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name        | Declaration | Module           | Package |\n| ---- | ----------- | ----------- | ---------------- | ------- |\n| `js` | `BlkButton` | BlkButton   | src/BlkButton.js |         |\n\n### `src/BlkRipple.js`:\n\n#### class: `BlkRipple`, `blk-ripple`\n\n##### Fields\n\n| Name       | Privacy | Type      | Default | Description | Inherited From |\n| ---------- | ------- | --------- | ------- | ----------- | -------------- |\n| `disabled` | public  | `boolean` | `false` |             |                |\n| `hovered`  | public  | `boolean` | `false` |             |                |\n| `focused`  | public  | `boolean` | `false` |             |                |\n| `pressed`  | public  | `boolean` | `false` |             |                |\n| `element`  |         |           |         |             |                |\n\n##### Methods\n\n| Name                 | Privacy | Description              | Parameters       | Return | Inherited From |\n| -------------------- | ------- | ------------------------ | ---------------- | ------ | -------------- |\n| `handleEvent`        |         |                          | `ev`             |        |                |\n| `handlePointerenter` |         |                          |                  |        |                |\n| `handlePointerleave` |         |                          |                  |        |                |\n| `handleFocus`        |         | Handles the focus event. | `ev: FocusEvent` |        |                |\n| `handleBlur`         |         |                          |                  |        |                |\n| `handlePointerdown`  |         |                          |                  |        |                |\n| `handlePointerup`    |         |                          |                  |        |                |\n| `handleClick`        |         |                          |                  |        |                |\n\n##### Attributes\n\n| Name       | Field    | Inherited From |\n| ---------- | -------- | -------------- |\n| `disabled` | disabled |                |\n| `hovered`  | hovered  |                |\n| `focused`  | focused  |                |\n| `pressed`  | pressed  |                |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name        | Declaration | Module           | Package |\n| ---- | ----------- | ----------- | ---------------- | ------- |\n| `js` | `BlkRipple` | BlkRipple   | src/BlkRipple.js |         |\n\n### `src/styles/blk-button-styles.css.js`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                              | Package |\n| ---- | -------- | ----------- | ----------------------------------- | ------- |\n| `js` | `styles` | styles      | src/styles/blk-button-styles.css.js |         |\n\n### `src/styles/blk-button-tokens.js`:\n\n#### Variables\n\n| Name          | Description | Type     |\n| ------------- | ----------- | -------- |\n| `PREFIX`      |             | `string` |\n| `styleRoles`  |             |          |\n| `styleTokens` |             |          |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name          | Declaration | Module                          | Package |\n| ---- | ------------- | ----------- | ------------------------------- | ------- |\n| `js` | `PREFIX`      | PREFIX      | src/styles/blk-button-tokens.js |         |\n| `js` | `styleRoles`  | styleRoles  | src/styles/blk-button-tokens.js |         |\n| `js` | `styleTokens` | styleTokens | src/styles/blk-button-tokens.js |         |\n\n### `src/styles/blk-material-styles.css.js`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                                | Package |\n| ---- | -------- | ----------- | ------------------------------------- | ------- |\n| `js` | `styles` | styles      | src/styles/blk-material-styles.css.js |         |\n\n### `src/styles/blk-material-tokens.js`:\n\n#### Variables\n\n| Name          | Description | Type     |\n| ------------- | ----------- | -------- |\n| `PREFIX`      |             | `string` |\n| `styleRoles`  |             |          |\n| `styleTokens` |             |          |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name          | Declaration | Module                            | Package |\n| ---- | ------------- | ----------- | --------------------------------- | ------- |\n| `js` | `PREFIX`      | PREFIX      | src/styles/blk-material-tokens.js |         |\n| `js` | `styleRoles`  | styleRoles  | src/styles/blk-material-tokens.js |         |\n| `js` | `styleTokens` | styleTokens | src/styles/blk-material-tokens.js |         |\n\n### `src/styles/blk-ripple-styles.css.js`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                              | Package |\n| ---- | -------- | ----------- | ----------------------------------- | ------- |\n| `js` | `styles` | styles      | src/styles/blk-ripple-styles.css.js |         |\n\n### `src/styles/blk-ripple-tokens.js`:\n\n#### Variables\n\n| Name          | Description | Type     |\n| ------------- | ----------- | -------- |\n| `PREFIX`      |             | `string` |\n| `styleTokens` |             |          |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name          | Declaration | Module                          | Package |\n| ---- | ------------- | ----------- | ------------------------------- | ------- |\n| `js` | `PREFIX`      | PREFIX      | src/styles/blk-ripple-tokens.js |         |\n| `js` | `styleTokens` | styleTokens | src/styles/blk-ripple-tokens.js |         |\n\n### `src/tokens/blk-ref-alpha.js`:\n\n#### Variables\n\n| Name       | Description | Type     |\n| ---------- | ----------- | -------- |\n| `refAlpha` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                      | Package |\n| ---- | --------- | ----------- | --------------------------- | ------- |\n| `js` | `default` | refAlpha    | src/tokens/blk-ref-alpha.js |         |\n\n### `src/tokens/blk-ref-palette.js`:\n\n#### Variables\n\n| Name         | Description | Type     |\n| ------------ | ----------- | -------- |\n| `refPalette` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                        | Package |\n| ---- | --------- | ----------- | ----------------------------- | ------- |\n| `js` | `default` | refPalette  | src/tokens/blk-ref-palette.js |         |\n\n### `src/tokens/blk-ref-spacing.js`:\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                        | Package |\n| ---- | --------- | ----------- | ----------------------------- | ------- |\n| `js` | `default` |             | src/tokens/blk-ref-spacing.js |         |\n\n### `src/tokens/blk-ref-typeface.js`:\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                         | Package |\n| ---- | --------- | ----------- | ------------------------------ | ------- |\n| `js` | `default` |             | src/tokens/blk-ref-typeface.js |         |\n\n### `src/tokens/blk-sys-alpha.js`:\n\n#### Variables\n\n| Name       | Description | Type     |\n| ---------- | ----------- | -------- |\n| `sysAlpha` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                      | Package |\n| ---- | --------- | ----------- | --------------------------- | ------- |\n| `js` | `default` | sysAlpha    | src/tokens/blk-sys-alpha.js |         |\n\n### `src/tokens/blk-sys-color.js`:\n\n#### Variables\n\n| Name       | Description | Type     |\n| ---------- | ----------- | -------- |\n| `dark`     |             | `object` |\n| `sysColor` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                      | Package |\n| ---- | --------- | ----------- | --------------------------- | ------- |\n| `js` | `default` | sysColor    | src/tokens/blk-sys-color.js |         |\n| `js` | `dark`    | dark        | src/tokens/blk-sys-color.js |         |\n\n### `src/tokens/blk-sys-spacing.js`:\n\n#### Variables\n\n| Name         | Description | Type     |\n| ------------ | ----------- | -------- |\n| `sysSpacing` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration | Module                        | Package |\n| ---- | --------- | ----------- | ----------------------------- | ------- |\n| `js` | `default` | sysSpacing  | src/tokens/blk-sys-spacing.js |         |\n\n### `src/tokens/blk-sys-typescale.js`:\n\n#### Variables\n\n| Name           | Description | Type     |\n| -------------- | ----------- | -------- |\n| `sysTypescale` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name      | Declaration  | Module                          | Package |\n| ---- | --------- | ------------ | ------------------------------- | ------- |\n| `js` | `default` | sysTypescale | src/tokens/blk-sys-typescale.js |         |\n\n### `src/tokens/blk-system.js`:\n\n#### Variables\n\n| Name     | Description | Type     |\n| -------- | ----------- | -------- |\n| `SYSTEM` |             | `object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                   | Package |\n| ---- | -------- | ----------- | ------------------------ | ------- |\n| `js` | `SYSTEM` | SYSTEM      | src/tokens/blk-system.js |         |\n\n### `src/tokens/dark-color-scheme.js`:\n\n#### Variables\n\n| Name              | Description | Type |\n| ----------------- | ----------- | ---- |\n| `darkColorScheme` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                | Declaration       | Module                          | Package |\n| ---- | ------------------- | ----------------- | ------------------------------- | ------- |\n| `js` | `darkColorScheme`   | darkColorScheme   | src/tokens/dark-color-scheme.js |         |\n| `js` | `setDocumentStyles` | setDocumentStyles | src/tokens/dark-color-scheme.js |         |\n\n### `src/tokens/generate-tokens.js`:\n\n#### Variables\n\n| Name    | Description | Type     |\n| ------- | ----------- | -------- |\n| `ROLES` |             | `string` |\n\n\u003chr/\u003e\n\n#### Functions\n\n| Name                      | Description                                            | Parameters                                | Return   |\n| ------------------------- | ------------------------------------------------------ | ----------------------------------------- | -------- |\n| `concatenateStringsByKey` | Returns an object with concatenated strings by key.    | `arr: Array\u003cObject\u003e`                      | `Object` |\n| `cssStyleRule`            | Create a single CSS style rule.                        | `selector: string, values: Array\u003cstring\u003e` | `string` |\n| `setVariables`            | Create custom CSS properties for a component.          | `data: Object, prefix: string`            | `string` |\n| `setTokens`               | Create custom CSS properties for all tokens in a data. | `data: Object, prefix: string`            | `string` |\n| `setRoles`                | Create custom CSS properties for all roles.            | `data: Object, prefix: string`            | `Object` |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                      | Declaration             | Module                        | Package |\n| ---- | ------------------------- | ----------------------- | ----------------------------- | ------- |\n| `js` | `ROLES`                   | ROLES                   | src/tokens/generate-tokens.js |         |\n| `js` | `concatenateStringsByKey` | concatenateStringsByKey | src/tokens/generate-tokens.js |         |\n| `js` | `cssStyleRule`            | cssStyleRule            | src/tokens/generate-tokens.js |         |\n| `js` | `setVariables`            | setVariables            | src/tokens/generate-tokens.js |         |\n| `js` | `setTokens`               | setTokens               | src/tokens/generate-tokens.js |         |\n| `js` | `setRoles`                | setRoles                | src/tokens/generate-tokens.js |         |\n\n### `define/blk-button.js`:\n\n#### Exports\n\n| Kind                        | Name         | Declaration | Module            | Package |\n| --------------------------- | ------------ | ----------- | ----------------- | ------- |\n| `custom-element-definition` | `blk-button` | BlkButton   | /src/BlkButton.js |         |\n\n### `define/blk-material.js`:\n\n#### Exports\n\n| Kind                        | Name           | Declaration | Module              | Package |\n| --------------------------- | -------------- | ----------- | ------------------- | ------- |\n| `custom-element-definition` | `blk-material` | BlkMaterial | /src/BlkMaterial.js |         |\n\n### `define/blk-ripple.js`:\n\n#### Exports\n\n| Kind                        | Name         | Declaration | Module            | Package |\n| --------------------------- | ------------ | ----------- | ----------------- | ------- |\n| `custom-element-definition` | `blk-ripple` | BlkRipple   | /src/BlkRipple.js |         |\n\n### `index.js`:\n\n#### Exports\n\n| Kind | Name          | Declaration | Module               | Package |\n| ---- | ------------- | ----------- | -------------------- | ------- |\n| `js` | `BlkMaterial` | BlkMaterial | ./src/BlkMaterial.js |         |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarmarina%2Fblk-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foscarmarina%2Fblk-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarmarina%2Fblk-material/lists"}