{"id":15527231,"url":"https://github.com/glare-labs/tailwindcss-material-tokens","last_synced_at":"2025-04-23T12:23:04.429Z","repository":{"id":226540151,"uuid":"768992640","full_name":"glare-labs/tailwindcss-material-tokens","owner":"glare-labs","description":"Insert tokens in material design into tailwindcss as utils.","archived":false,"fork":false,"pushed_at":"2024-11-10T05:38:59.000Z","size":326,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-22T16:51:55.569Z","etag":null,"topics":["material-design","material-tailwind","tailwindcss-plugin","tokens"],"latest_commit_sha":null,"homepage":"https://glare-labs.github.io/tailwindcss-material-tokens/","language":"TypeScript","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/glare-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-08T05:49:32.000Z","updated_at":"2024-11-21T00:35:16.000Z","dependencies_parsed_at":"2024-03-12T09:55:52.836Z","dependency_job_id":"2a9e75dd-51ca-4c43-b2f6-554d067c0ae5","html_url":"https://github.com/glare-labs/tailwindcss-material-tokens","commit_stats":{"total_commits":80,"total_committers":3,"mean_commits":"26.666666666666668","dds":0.5,"last_synced_commit":"d27e7e9cf8de47681d23e1d896ea2d9898a3165f"},"previous_names":["glare-labs/tailwindcss-material-tokens"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glare-labs%2Ftailwindcss-material-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glare-labs%2Ftailwindcss-material-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glare-labs%2Ftailwindcss-material-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glare-labs%2Ftailwindcss-material-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glare-labs","download_url":"https://codeload.github.com/glare-labs/tailwindcss-material-tokens/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250431436,"owners_count":21429474,"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":["material-design","material-tailwind","tailwindcss-plugin","tokens"],"created_at":"2024-10-02T11:05:08.834Z","updated_at":"2025-04-23T12:23:04.399Z","avatar_url":"https://github.com/glare-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-material-tokens\n\n_If you wish, you are welcome to submit a document update request_\n\n---\n\nImport the Material Design tokens into tailwindcss and use them through plugins.\n\n+ ESM Supported Only\n+ Typescript Supported\n\n```\nnpm i -D @glare-labs/tailwindcss-material-tokens\n```\n\n```javascript\nimport { provideAll } from '@glare-labs/tailwindcss-material-tokens'\n\nconst all = provideAll()\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n    // ...\n\n    plugins: [\n        ...all.allPlugins()\n    ],\n}\n```\n\n---\n\n_If you don’t want to be troubled by the original styles of tailwindcss, please try to turn off the styles that come with tailwindcss (color, rounded, shadow, text)._\n\n![Screenshot1](https://github.com/glare-labs/tailwindcss-material-tokens/blob/main/imgs/Part-1.png?raw=true)\n![Screenshot2](https://github.com/glare-labs/tailwindcss-material-tokens/blob/main/imgs/Part-2.png?raw=true)\n\n## Usage\n\nFor example:\n```html\n\u003cdiv class=\"w-24 h-24 shape-large elevation-1 bg-primary\"\u003e\n    \u003cp class=\"text-title-large text-on-primary\"\u003eTitle\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### provideColor \u0026 provide*\n```typescript\nimport { provideBorder, provideColor, provideElevation, provideMotion, provideShape, provideSizing, provideTypography, provideWindowMediaQuery } from '@glare-labs/tailwindcss-material-tokens'\n\n\nconst border = provideBorder()\nconst color = provideColor()\nconst elevation = provideElevation()\nconst motion = provideMotion()\nconst shape = provideShape()\nconst sizing = provideSizing()\nconst typography = provideTypography()\nconst width = provideSizing()\nconst mq = provideWindowMediaQuery()\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n    // ...\n\n    plugins: [\n        border.getPlugin(),\n        color.getPlugin(),\n        elevation.getPlugin(),\n        motion.getPlugin(),\n        shape.getPlugin(),\n        sizing.getPlugin(),\n        typography.getPlugin(),\n        width.getPlugin(),\n        mq.getPlugin(),\n    ],\n}\n```\n\n### provideAll\nprovideAll includes:\n- border\n- color\n- elevation\n- motion\n- shape\n- sizing\n- typography\n\n```typescript\nimport { provideAll } from '@glare-labs/tailwindcss-material-tokens'\n\nconst all = provideAll()\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n    // ...\n\n    plugins: [\n        ...all.getAllPlugins()\n    ],\n}\n```\n\n## APIs\n\nMost plugins support `prefix`, `hardcodeDefaultValue`, `excludeTokens` and `customTokens` options.\n\n### prefix\nprefix represents a public CSS variable:\n\n```typescript\nconst color = provideColor({\n    prefix: 'my-product-prefix'\n})\n```\n\nthe result:\n```css\n.bg-primary {\n    background-color: var(--my-product-prefix-primary, #005ac1);\n}\n```\n\n### hardcodeDefaultValue\nIf hardcodeDefaultValue is true, the CSS contains a default value.\n\n```typescript\nconst color = provideColor({\n    prefix: 'my-product-prefix',\n    hardcodeDefaultValue: false,\n})\n```\n\nthe result:\n```css\n.bg-primary {\n    background-color: var(--my-product-prefix-primary,);\n}\n```\n\n### excludeTokens\nexcludeTokens is a token blacklist, including unnecessary token groups.\n\n```typescript\nconst color = provideColor({\n    excludeTokens: [\n        // remove .bg-primary and .text-primary\n        'primary'\n    ]\n})\n```\n\n## Default Color Values\n\n_Contains only color._\n```javascript\n{\n  primaryPaletteKeyColor: '#047aff',\n  secondaryPaletteKeyColor: '#727598',\n  tertiaryPaletteKeyColor: '#7b70a3',\n  neutralPaletteKeyColor: '#737782',\n  neutralVariantPaletteKeyColor: '#727785',\n  background: '#f9f9ff',\n  onBackground: '#181c25',\n  surface: '#f9f9ff',\n  surfaceDim: '#d7d9e6',\n  surfaceBright: '#f9f9ff',\n  surfaceContainerLowest: '#ffffff',\n  surfaceContainerLow: '#f1f3ff',\n  surfaceContainer: '#ebedfa',\n  surfaceContainerHigh: '#e5e8f5',\n  surfaceContainerHighest: '#dfe2ef',\n  onSurface: '#181c25',\n  surfaceVariant: '#dee2f2',\n  onSurfaceVariant: '#424753',\n  inverseSurface: '#2c303a',\n  inverseOnSurface: '#eef0fd',\n  outline: '#727785',\n  outlineVariant: '#c2c6d6',\n  shadow: '#000000',\n  scrim: '#000000',\n  surfaceTint: '#005ac1',\n  primary: '#005ac1',\n  onPrimary: '#ffffff',\n  primaryContainer: '#d8e2ff',\n  onPrimaryContainer: '#001a41',\n  inversePrimary: '#adc6ff',\n  secondary: '#595c7e',\n  onSecondary: '#ffffff',\n  secondaryContainer: '#dfe0ff',\n  onSecondaryContainer: '#151937',\n  tertiary: '#625789',\n  onTertiary: '#ffffff',\n  tertiaryContainer: '#e7deff',\n  onTertiaryContainer: '#1e1341',\n  error: '#ba1a1a',\n  onError: '#ffffff',\n  errorContainer: '#ffdad6',\n  onErrorContainer: '#410002',\n  primaryFixed: '#d8e2ff',\n  primaryFixedDim: '#adc6ff',\n  onPrimaryFixed: '#001a41',\n  onPrimaryFixedVariant: '#004494',\n  secondaryFixed: '#dfe0ff',\n  secondaryFixedDim: '#c1c4eb',\n  onSecondaryFixed: '#151937',\n  onSecondaryFixedVariant: '#414465',\n  tertiaryFixed: '#e7deff',\n  tertiaryFixedDim: '#ccbff8',\n  onTertiaryFixed: '#1e1341',\n  onTertiaryFixedVariant: '#4a4070'\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglare-labs%2Ftailwindcss-material-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglare-labs%2Ftailwindcss-material-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglare-labs%2Ftailwindcss-material-tokens/lists"}