Name Description Size
design-tokens.json 22014
docs
package-lock.json 52492
package.json 459
tests
text-and-typography.css Typography scale 1002
tokens-brand.css DO NOT EDIT this file directly, instead modify design-tokens.json and run `npm run build` to see your changes. 2080
tokens-config.js eslint-env node 15915
tokens-platform.css DO NOT EDIT this file directly, instead modify design-tokens.json and run `npm run build` to see your changes. 1718
tokens-shared.css DO NOT EDIT this file directly, instead modify design-tokens.json and run `npm run build` to see your changes. 13130
tokens-storybook.mjs DO NOT EDIT this file directly, instead modify design-tokens.json and run `npm run build` to see your changes. 38963
tokens-table.css Wrapper and filter styles 6567
tokens-table.stories.mjs / class TablesPage extends LitElement { #query = ""; static properties = { surface: { type: String, state: true }, tokensData: { type: Object, state: true }, filteredTokens: { type: Object, state: true }, }; constructor() { super(); this.surface = "brand"; this.tokensData = storybookTables; } handleSurfaceChange(e) { this.surface = e.target.value; } handleInput(e) { this.#query = e.originalTarget.value.trim().toLowerCase(); e.preventDefault(); this.handleSearch(); } debounce(fn, delayMs = 300) { let timeout; return function () { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, delayMs); }; } handleSearch() { // Clear filteredTokens to show all data. if (!this.#query) { this.filteredTokens = null; } let filteredTokens = Object.entries(this.tokensData).reduce( (acc, [key, tokens]) => { if (key.includes(this.#query)) { return { ...acc, [key]: tokens }; } let filteredItems = tokens.filter(({ name: tokenName, value }) => this.filterTokens(this.#query, tokenName, value) ); if (filteredItems.length) { return { ...acc, [key]: filteredItems }; } return acc; }, {} ); this.filteredTokens = filteredTokens; } filterTokens(searchTerm, tokenName, tokenVal) { if ( tokenName.includes(searchTerm) || (typeof tokenVal == "string" && tokenVal.includes(searchTerm)) ) { return true; } if (typeof tokenVal == "object") { return Object.entries(tokenVal).some(([key, val]) => this.filterTokens(searchTerm, key, val) ); } return false; } handleClearSearch(e) { this.#query = ""; e.preventDefault(); this.handleSearch(); } render() { if (!this.tokensData) { return ""; } return html` <link rel="stylesheet" href=${styles} /> <div class="page-wrapper"> <div class="filters-wrapper"> <div class="search-wrapper"> <div class="search-icon"></div> <input type="search" placeholder="Filter tokens" @input=${this.debounce(this.handleInput)} .value=${this.#query} /> <div class="clear-icon" role="button" title="Clear" ?hidden=${!this.#query} @click=${this.handleClearSearch} ></div> </div> <fieldset id="surface" @change=${this.handleSurfaceChange}> <label> <input type="radio" name="surface" value="brand" ?checked=${this.surface == "brand"} /> In-content </label> <label> <input type="radio" name="surface" value="platform" ?checked=${this.surface == "platform"} /> Chrome </label> </fieldset> </div> <div class="tables-wrapper"> ${Object.entries(this.filteredTokens ?? this.tokensData).map( ([tableName, tableEntries]) => { return html` <tokens-table name=${tableName} surface=${this.surface} .tokens=${tableEntries} > </tokens-table> `; } )} </div> </div> `; } } customElements.define("tables-page", TablesPage); /** 12111