{"_id":"@domir/material-color-utilities","name":"@domir/material-color-utilities","dist-tags":{"latest":"0.2.7"},"versions":{"0.2.7":{"name":"@domir/material-color-utilities","version":"0.2.7","publishConfig":{"access":"public"},"description":"Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.","keywords":["material","material design","material3","material you","color extraction","theming"],"repository":{"type":"git","url":"git+https://github.com/material-foundation/material-color-utilities.git","directory":"typescript"},"author":{"name":"Material Eng"},"license":"Apache-2.0","bugs":{"url":"https://github.com/material-foundation/material-color-utilities/issues"},"homepage":"https://github.com/material-foundation/material-color-utilities/tree/main/typescript","type":"module","main":"index.js","module":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js","default":"./index.js"}},"scripts":{"build":"wireit","build:ts":"wireit","prepublishOnly":"npm run build"},"wireit":{"build":{"dependencies":["build:ts"]},"build:ts":{"command":"tsc --pretty","files":["tsconfig.json","**/*.ts","!**/*.d.ts"],"output":[".tsbuildinfo","**/*.js","**/*.js.map","**/*.d.ts","!*.js","!types/"],"clean":"if-file-deleted"}},"devDependencies":{"@types/jasmine":"^3.10.3","@types/node":"^18.7.17","jasmine":"^4.0.2","typescript":"^4.5.5","wireit":"^0.9.5"},"gitHead":"3d942dd195ad0c04c99d768459cd0bbaa1e644ff","_id":"@domir/material-color-utilities@0.2.7","_nodeVersion":"18.14.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-yWVSfL3uDMOIhuuCXsa1jAhDhR/KOqAmWlUmmuE9UA91RK3jFrxJ73TeAhwpz9ZX0n0UTHBkDuZ8lmE99gChDQ==","shasum":"eda62916eeee8197b835a295d93963d68d5aa8d9","tarball":"https://registry.npmjs.org/@domir/material-color-utilities/-/material-color-utilities-0.2.7.tgz","fileCount":126,"unpackedSize":734210,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoCUfb5PC1vPgOJ8KIrMYOKAn+qJT9lrd1MKdvut5B1QIgDV651LfWNSb7h+WGFQ/Ggn9WBIu1WG0/Og5on27WxyI="}]},"_npmUser":{"name":"domir","email":"domi.github@gmail.com"},"directories":{},"maintainers":[{"name":"domir","email":"domi.github@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-color-utilities_0.2.7_1706463057899_0.4380322506310783"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-28T17:30:57.786Z","0.2.7":"2024-01-28T17:30:58.108Z","modified":"2024-01-28T17:30:58.392Z"},"maintainers":[{"name":"domir","email":"domi.github@gmail.com"}],"description":"Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.","homepage":"https://github.com/material-foundation/material-color-utilities/tree/main/typescript","keywords":["material","material design","material3","material you","color extraction","theming"],"repository":{"type":"git","url":"git+https://github.com/material-foundation/material-color-utilities.git","directory":"typescript"},"author":{"name":"Material Eng"},"bugs":{"url":"https://github.com/material-foundation/material-color-utilities/issues"},"license":"Apache-2.0","readme":"# material-color-utilities\n\n[![npm package](https://badgen.net/npm/v/@material/material-color-utilities)](https://npmjs.com/package/@material/material-color-utilities)\n\nAlgorithms and utilities that power the Material Design 3 (M3) color system,\nincluding choosing theme colors from images and creating tones of colors; all in\na new color space.\n\nSee the main\n[README](https://github.com/material-foundation/material-color-utilities#readme)\nfor more information.\n\n## Getting started\n\n`npm i @material/material-color-utilities` or `yarn add @material/material-color-utilities`\n\n```typescript\nimport { Hct } from \"@material/material-color-utilities\";\n\n// Simple demonstration of HCT.\nconst color = Hct.fromInt(0xff4285f4);\nconsole.log(`Hue: ${color.hue}`);\nconsole.log(`Chrome: ${color.chroma}`);\nconsole.log(`Tone: ${color.tone}`);\n\n```\n\n### Theming\n\n```typescript\nimport { argbFromHex, themeFromSourceColor, applyTheme } from \"@material/material-color-utilities\";\n\n// Get the theme from a hex color\nconst theme = themeFromSourceColor(argbFromHex('#f82506'), [\n  {\n    name: \"custom-1\",\n    value: argbFromHex(\"#ff0000\"),\n    blend: true,\n  },\n]);\n\n// Print out the theme as JSON\nconsole.log(JSON.stringify(theme, null, 2));\n\n// Check if the user has dark mode turned on\nconst systemDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\n// Apply the theme to the body by updating custom properties for material tokens\napplyTheme(theme, {target: document.body, dark: systemDark});\n\n```\n\n## Contributing\n\nThis repo is not accepting external contributions, but feature requests and bug\nreports are welcome on\n[GitHub](https://github.com/material-foundation/material-color-utilities/issues).\n","readmeFilename":"README.md"}